From ca4ec0a5382c3422baf82361e36cfdd66f855902 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Sat, 16 Nov 2024 09:04:16 +0700
Subject: [PATCH] update: change assessment and verifying, add border on left
 and right side

---
 .../assessment/index.lazy.tsx                 | 626 ++++++------
 .../_verifyingLayout/verifying/index.lazy.tsx | 910 +++++++++---------
 2 files changed, 748 insertions(+), 788 deletions(-)

diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
index d0498b3..0b2c302 100644
--- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
@@ -1,10 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import {
-  Flex,
-  Stack,
-  Text,
   Loader,
-  ActionIcon,
 } from "@mantine/core";
 import {
   Card,
@@ -569,9 +565,9 @@ export default function AssessmentPage() {
 
   if (isError) {
     return (
-      <Text color="red">
+      <p color="red">
         Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
-      </Text>
+      </p>
     );
   }
 
@@ -579,9 +575,9 @@ export default function AssessmentPage() {
     return (
       <Card>
         <CardContent>
-          <Text color="red" className="text-center">
+          <p color="red" className="text-center">
             Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
-          </Text>
+          </p>
         </CardContent>
       </Card>
     );
@@ -615,23 +611,23 @@ export default function AssessmentPage() {
 
   return (
     <div>
-      <Stack gap="md">
-        <Flex justify="space-between" align="flex-start" mt="lg">
+      <div className="space-y-4">
+        <div className="flex justify-between items-start">
 
           {/* LEFT-SIDE */}
           {/* Aspek dan Sub-Aspek */}
-            <AppHeader
-              openNavbar={isLeftSidebarOpen}
-              toggle={toggleLeftSidebar}
-              toggleLeftSidebar={toggleLeftSidebar}
-            />
+          <AppHeader
+            openNavbar={isLeftSidebarOpen}
+            toggle={toggleLeftSidebar}
+            toggleLeftSidebar={toggleLeftSidebar}
+          />
 
           {/* Sidebar for Mobile */}
           {isMobile && (
             <LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
               <LeftSheetContent className="h-full w-75 overflow-auto">
                 <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
-                <Flex direction="column" gap="xs" className="w-64">
+                <div className="w-64">
                   <div className="space-y-2">
                     {/* Aspek */}
                     {aspectsQuery.data?.data
@@ -666,7 +662,7 @@ export default function AssessmentPage() {
                                 .map((subAspect) => (
                                   <div
                                     key={subAspect.id}
-                                    className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
+                                    className={`cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
                                     onClick={() => setSelectedSubAspectId(subAspect.id)}
                                   >
                                     <div className="text-xs">{subAspect.name}</div>
@@ -677,75 +673,75 @@ export default function AssessmentPage() {
                         </div>
                       ))}
                   </div>
-                </Flex>
+                </div>
               </LeftSheetContent>
             </LeftSheet>
           )}
 
           {/* Sidebar for Desktop (Always Visible) */}
-            <div className="hidden md:block fixed h-screen w-64 overflow-auto">
-              <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
-              <Flex direction="column" gap="xs" className="w-64">
-                <div className="space-y-2">
-                  {/* Aspek */}
-                  {aspectsQuery.data?.data
-                    .filter((aspect) =>
-                      aspect.subAspects.some((subAspect) =>
-                        data?.data.some((question) => question.subAspectId === subAspect.id)
-                      )
+          <div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
+            <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
+            <div className="w-64">
+              <div className="space-y-2">
+                {/* Aspek */}
+                {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-2 ">
-                        <div
-                          className="flex justify-between cursor-pointer"
-                          onClick={() => toggleAspect(aspect.id)}
-                        >
-                          <div className="text-sm font-bold px-3">{aspect.name}</div>
-                          <div>
-                            {openAspects[aspect.id] ? (
-                              <TbChevronDown size={25} />
-                            ) : (
-                              <TbChevronRight size={25} />
-                            )}
-                          </div>
+                  )
+                  .map((aspect) => (
+                    <div key={aspect.id} className="p-2 ">
+                      <div
+                        className="flex justify-between cursor-pointer"
+                        onClick={() => toggleAspect(aspect.id)}
+                      >
+                        <div className="text-sm font-bold px-3">{aspect.name}</div>
+                        <div>
+                          {openAspects[aspect.id] ? (
+                            <TbChevronDown size={25} />
+                          ) : (
+                            <TbChevronRight size={25} />
+                          )}
                         </div>
-
-                        {/* Sub-Aspek */}
-                        {openAspects[aspect.id] && (
-                          <div className="mt-2 space-y-2">
-                            {aspect.subAspects
-                              .filter((subAspect) =>
-                                data?.data.some((question) => question.subAspectId === subAspect.id)
-                              )
-                              .map((subAspect) => (
-                                <div
-                                  key={subAspect.id}
-                                  className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
-                                  onClick={() => setSelectedSubAspectId(subAspect.id)}
-                                >
-                                  <div className="text-xs">{subAspect.name}</div>
-                                </div>
-                              ))}
-                          </div>
-                        )}
                       </div>
-                    ))}
-                </div>
-              </Flex>
+
+                      {/* Sub-Aspek */}
+                      {openAspects[aspect.id] && (
+                        <div className="mt-2 space-y-2">
+                          {aspect.subAspects
+                            .filter((subAspect) =>
+                              data?.data.some((question) => question.subAspectId === subAspect.id)
+                            )
+                            .map((subAspect) => (
+                              <div
+                                key={subAspect.id}
+                                className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
+                                onClick={() => setSelectedSubAspectId(subAspect.id)}
+                              >
+                                <div className="text-xs">{subAspect.name}</div>
+                              </div>
+                            ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+              </div>
             </div>
+          </div>
 
           {/* MIDDLE */}
           {/* Pertanyaan */}
           <div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full">
-            <Stack gap="sm" style={{ flex: 1 }}>
-              <Text className="text-2xl font-bold ml-6">
+            <div className="space-y-6 flex flex-col">
+              <Label className="text-2xl font-bold ml-6 mt-4">
                 Harap menjawab semua pertanyaan yang tersedia
-              </Text>
-              <Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text>
+              </Label>
+              <Label className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Label>
               {filteredQuestions.length === 0 ? (
-                <Text className="text-center p-3">
+                <Label className="text-center p-3">
                   Pertanyaan tidak ada untuk sub-aspek yang dipilih.
-                </Text>
+                </Label>
               ) : (
                 filteredQuestions.map((question: any, index: number) => {
                   const questionId = question.questionId;
@@ -757,99 +753,97 @@ export default function AssessmentPage() {
                       ref={(el) => (questionRefs.current[questionId] = el)}
                       className="space-y-4"
                     >
-                      <Stack gap="sm">
-                        <div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
-                          {/* Question Number */}
-                          <Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text>
+                      <div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
+                        {/* Question Number */}
+                        <Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
 
-                          {/* Question Text */}
-                          <Text className="font-bold break-words text-sm p-2">{question.questionText}</Text>
+                        {/* Question Text */}
+                        <Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
 
-                          {/* Action Icon/Flag */}
-                          <ActionIcon
-                            onClick={() => handleToggleFlag(questionId)}
-                            title="Tandai"
-                            className={`m-2 rounded-md border-1 flex items-center justify-center h-7 w-7 ${flaggedQuestions[questionId] ? "border-white bg-red-500" : "border-gray-100 bg-white"}`}
-                          >
-                            <TbFlagFilled
-                              size={25}
-                              className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
-                            />
-                          </ActionIcon>
-                        </div>
-
-                        {/* Radio Button Options */}
-                        {question.options?.length > 0 ? (
-                          <div className="mx-11">
-                            <RadioGroup
-                              value={answers[question.questionId] || ""}
-                              onValueChange={(value) => handleAnswerChange(question.questionId, value)}
-                              className="flex flex-col gap-2"
-                            >
-                              {question.options.map((option: any) => (
-                                <div
-                                  key={option.optionId}
-                                  className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${answers[question.questionId] === option.optionId
-                                    ? "bg-[--primary-color] text-white border-[--primary-color]"
-                                    : "bg-gray-200 text-black border-gray-200"
-                                    }`}
-                                  onClick={() => handleAnswerChange(question.questionId, option.optionId)}
-                                >
-                                  <RadioGroupItem
-                                    value={option.optionId}
-                                    id={option.optionId}
-                                    checked={answers[question.questionId] === option.optionId}
-                                    className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
-                                  />
-                                  <Label
-                                    htmlFor={option.optionId}
-                                    className="ml-2 font-bold cursor-pointer flex-1"
-                                  >
-                                    {option.optionText}
-                                  </Label>
-                                </div>
-                              ))}
-                            </RadioGroup>
-                          </div>
-                        ) : (
-                          <Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
-                        )}
-
-                        {/* Textarea for additional information */}
-                        <div className="mx-11">
-                          <Textarea
-                            placeholder="Berikan keterangan terkait jawaban di atas"
-                            value={validationInformation[question.questionId] || ""}
-                            onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
+                        {/* Action Button/Flag */}
+                        <button
+                          onClick={() => handleToggleFlag(questionId)}
+                          title="Tandai"
+                          className={`m-2 rounded-md border-1 flex items-center justify-center h-7 w-7 ${flaggedQuestions[questionId] ? "border-white bg-red-500" : "border-gray-100 bg-white"}`}
+                        >
+                          <TbFlagFilled
+                            size={25}
+                            className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
                           />
-                        </div>
+                        </button>
+                      </div>
 
-                        {/* File Upload */}
-                        <FileUpload
-                          question={question}
-                          handleFileChange={handleFileChange}
-                          handleRemoveFile={handleRemoveFile}
-                          uploadedFiles={uploadedFiles}
-                          dragActive={dragActive}
-                          handleDragOver={handleDragOver}
-                          handleDragLeave={handleDragLeave}
-                          handleDrop={handleDrop}
-                          modalOpenFileSize={modalOpenFileSize}
-                          setModalOpenFileSize={setModalOpenFileSize}
-                          exceededFileName={exceededFileName}
-                          handleClick={handleClick}
+                      {/* Radio Button Options */}
+                      {question.options?.length > 0 ? (
+                        <div className="mx-11">
+                          <RadioGroup
+                            value={answers[question.questionId] || ""}
+                            onValueChange={(value) => handleAnswerChange(question.questionId, value)}
+                            className="flex flex-col gap-2"
+                          >
+                            {question.options.map((option: any) => (
+                              <div
+                                key={option.optionId}
+                                className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${answers[question.questionId] === option.optionId
+                                  ? "bg-[--primary-color] text-white border-[--primary-color]"
+                                  : "bg-gray-200 text-black border-gray-200"
+                                  }`}
+                                onClick={() => handleAnswerChange(question.questionId, option.optionId)}
+                              >
+                                <RadioGroupItem
+                                  value={option.optionId}
+                                  id={option.optionId}
+                                  checked={answers[question.questionId] === option.optionId}
+                                  className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
+                                />
+                                <Label
+                                  htmlFor={option.optionId}
+                                  className="ml-2 font-bold cursor-pointer flex-1"
+                                >
+                                  {option.optionText}
+                                </Label>
+                              </div>
+                            ))}
+                          </RadioGroup>
+                        </div>
+                      ) : (
+                        <Label color="red">Tidak ada opsi untuk pertanyaan ini.</Label>
+                      )}
+
+                      {/* Textarea for additional information */}
+                      <div className="mx-11">
+                        <Textarea
+                          placeholder="Berikan keterangan terkait jawaban di atas"
+                          value={validationInformation[question.questionId] || ""}
+                          onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
                         />
+                      </div>
 
-                        {/* Divider between questions */}
-                        <div>
-                          <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
-                        </div>
-                      </Stack>
+                      {/* File Upload */}
+                      <FileUpload
+                        question={question}
+                        handleFileChange={handleFileChange}
+                        handleRemoveFile={handleRemoveFile}
+                        uploadedFiles={uploadedFiles}
+                        dragActive={dragActive}
+                        handleDragOver={handleDragOver}
+                        handleDragLeave={handleDragLeave}
+                        handleDrop={handleDrop}
+                        modalOpenFileSize={modalOpenFileSize}
+                        setModalOpenFileSize={setModalOpenFileSize}
+                        exceededFileName={exceededFileName}
+                        handleClick={handleClick}
+                      />
+
+                      {/* Divider between questions */}
+                      <div>
+                        <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
+                      </div>
                     </div>
                   );
                 })
               )}
-            </Stack>
+            </div>
             {/* Pagination for mobile */}
             <div className="md:hidden mb-4 flex justify-center">
               <Pagination
@@ -861,7 +855,7 @@ export default function AssessmentPage() {
                   }
                 }}
               >
-                <Text className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Text>
+                <Label className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Label>
               </Pagination>
             </div>
           </div>
@@ -920,73 +914,71 @@ export default function AssessmentPage() {
                 <div className="mt-4">
                   <h2 className="text-lg font-extrabold mt-4 mb-2">Nilai Sementara</h2>
                   <div className="max-h-full overflow-hidden">
-                      <div>
-                        {filteredAspects.length > 0 ? (
-                          filteredAspects.map((aspect) => {
-                            const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
-                            const aspectScoreValue = parseFloat(aspectScore);
+                    <div>
+                      {filteredAspects.length > 0 ? (
+                        filteredAspects.map((aspect) => {
+                          const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
+                          const aspectScoreValue = parseFloat(aspectScore);
 
-                            return (
-                              <div key={aspect.aspectId} className="flex justify-between items-center">
-                                <Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text>
-                                <Text
-                                  className={`text-xl font-bold ${
-                                    aspectScoreValue >= 4.5
-                                      ? "text-green-700"
-                                      : aspectScoreValue >= 3.5
-                                      ? "text-green-400"
-                                      : aspectScoreValue >= 2.5
+                          return (
+                            <div key={aspect.aspectId} className="flex justify-between items-center">
+                              <Label className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Label>
+                              <Label
+                                className={`text-xl font-bold ${aspectScoreValue >= 4.5
+                                  ? "text-green-700"
+                                  : aspectScoreValue >= 3.5
+                                    ? "text-green-400"
+                                    : aspectScoreValue >= 2.5
                                       ? "text-yellow-400"
                                       : aspectScoreValue >= 1.5
-                                      ? "text-orange-500"
-                                      : "text-red-500"
+                                        ? "text-orange-500"
+                                        : "text-red-500"
                                   }`}
-                                >
-                                  {aspectScore}
-                                </Text>
-                              </div>
-                            );
-                          })
-                        ) : (
-                          <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
-                        )}
-                      </div>
+                              >
+                                {aspectScore}
+                              </Label>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
+                      )}
+                    </div>
 
-                      {/* Divider */}
-                      <div className="border-t-2 border-gray-300 my-4" />
+                    {/* Divider */}
+                    <div className="border-t-2 border-gray-300 my-4" />
 
-                      {/* Skor Sub-Aspek */}
-                      <div>
-                        {filteredSubAspects.length > 0 ? (
-                          filteredSubAspects.map((subAspect) => {
-                            const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
-                            const subAspectScoreValue = parseFloat(subAspectScore);
+                    {/* Skor Sub-Aspek */}
+                    <div>
+                      {filteredSubAspects.length > 0 ? (
+                        filteredSubAspects.map((subAspect) => {
+                          const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
+                          const subAspectScoreValue = parseFloat(subAspectScore);
 
-                            return (
-                              <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
-                                <Text className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Text>
-                                <Text
-                                  className={`text-sm font-bold ${
-                                    subAspectScoreValue >= 4.5
-                                      ? "text-green-700"
-                                      : subAspectScoreValue >= 3.5
-                                      ? "text-green-400"
-                                      : subAspectScoreValue >= 2.5
+                          return (
+                            <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
+                              <Label className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Label>
+                              <Label
+                                className={`text-sm font-bold ${subAspectScoreValue >= 4.5
+                                  ? "text-green-700"
+                                  : subAspectScoreValue >= 3.5
+                                    ? "text-green-400"
+                                    : subAspectScoreValue >= 2.5
                                       ? "text-yellow-400"
                                       : subAspectScoreValue >= 1.5
-                                      ? "text-orange-500"
-                                      : "text-red-500"
+                                        ? "text-orange-500"
+                                        : "text-red-500"
                                   }`}
-                                >
-                                  {subAspectScore}
-                                </Text>
-                              </div>
-                            );
-                          })
-                        ) : (
-                          <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
-                        )}
-                      </div>
+                              >
+                                {subAspectScore}
+                              </Label>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
+                      )}
+                    </div>
 
                     {/* Finish Button */}
                     <div className="mt-4">
@@ -1019,11 +1011,11 @@ export default function AssessmentPage() {
           </div>
 
           {/* Sidebar for desktop (always visible) */}
-          <div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4">
-            <Flex direction="column" gap="xs" className="mx-4">
-              <Text className="font-medium text-lg text-gray-800 mb-2">
-                  Nomor Soal
-              </Text>
+          <div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4 border-x">
+            <div className="mx-4 space-y-2">
+              <Label className="font-medium text-lg text-gray-800 mb-2">
+                Nomor Soal
+              </Label>
 
               {/* Navigasi (Number of Questions) */}
               <div className="grid grid-cols-5 gap-2">
@@ -1050,126 +1042,128 @@ export default function AssessmentPage() {
                   ) : null;
                 })}
               </div>
+            </div>
 
-              <div className="mt-4 flex justify-center">
-                <Pagination 
-                  page={currentPage} 
-                  totalPages={totalPages} 
-                  onPageChange={(newPage) => {
-                    if (selectedSubAspectId) {
-                      handlePageChange(selectedSubAspectId, newPage);
-                    }
-                  }}
-                >
-                  <Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
-                </Pagination>
-              </div>
+            {/* Pagination */}
+            <div className="mt-6 py-2 flex justify-center border-y">
+              <Pagination
+                page={currentPage}
+                totalPages={totalPages}
+                onPageChange={(newPage) => {
+                  if (selectedSubAspectId) {
+                    handlePageChange(selectedSubAspectId, newPage);
+                  }
+                }}
+              >
+                <Label className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Label>
+              </Pagination>
+            </div>
 
+            <div className="mx-4 space-y-2">
               {/* Skor Aspek dan Sub-Aspek */}
               <div className="mt-4">
                 <Card>
-                  <Text className="text-lg font-extrabold text-center mt-4 mb-2">
+                  <p className="text-lg font-extrabold text-center mt-4 mb-2">
                     Nilai Sementara
-                  </Text>
-                    <CardContent className="max-h-full overflow-hidden">
-                      <ScrollArea className="h-[200px] w-full rounded-md p-2">
-                        <CardDescription>
-                          {filteredAspects.length > 0 ? (
-                            filteredAspects.map((aspect) => {
-                              const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
-                              const aspectScoreValue = parseFloat(aspectScore);
-
-                              return (
-                                <div key={aspect.aspectId} className="flex justify-between items-center">
-                                  <Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
-                                  <Text
-                                    className={`text-xl font-bold ${
-                                      aspectScoreValue >= 4.5
-                                        ? "text-green-700"
-                                        : aspectScoreValue >= 3.5
-                                        ? "text-green-400"
-                                        : aspectScoreValue >= 2.5
-                                        ? "text-yellow-400"
-                                        : aspectScoreValue >= 1.5
-                                        ? "text-orange-500"
-                                        : "text-red-500"
-                                    }`}
-                                  >
-                                    {aspectScore}
-                                  </Text>
-                                </div>
-                              );
-                            })
-                          ) : (
-                            <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
-                          )}
-                        </CardDescription>
-
-                        {/* Garis pembatas */}
-                        <div className="border-t-2 border-gray-300 my-4" />
-
-                        {/* Skor Sub-Aspek */}
-                        {filteredSubAspects.length > 0 ? (
-                          filteredSubAspects.map((subAspect) => {
-                            const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
-                            const subAspectScoreValue = parseFloat(subAspectScore);
+                  </p>
+                  <CardContent className="max-h-full overflow-hidden">
+                    <ScrollArea className="h-[200px] w-full rounded-md p-2">
+                      <CardDescription>
+                        {filteredAspects.length > 0 ? (
+                          filteredAspects.map((aspect) => {
+                            const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
+                            const aspectScoreValue = parseFloat(aspectScore);
 
                             return (
-                              <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
-                                <Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
-                                <Text
-                                  className={`text-sm font-bold ${
-                                    subAspectScoreValue >= 4.5
-                                      ? "text-green-700"
-                                      : subAspectScoreValue >= 3.5
+                              <div key={aspect.aspectId} className="flex justify-between items-center">
+                                <Label className="text-lg text-gray-700">{aspect.aspectName}</Label>
+                                <Label
+                                  className={`text-xl font-bold ${aspectScoreValue >= 4.5
+                                    ? "text-green-700"
+                                    : aspectScoreValue >= 3.5
                                       ? "text-green-400"
-                                      : subAspectScoreValue >= 2.5
-                                      ? "text-yellow-400"
-                                      : subAspectScoreValue >= 1.5
-                                      ? "text-orange-500"
-                                      : "text-red-500"
-                                  }`}
+                                      : aspectScoreValue >= 2.5
+                                        ? "text-yellow-400"
+                                        : aspectScoreValue >= 1.5
+                                          ? "text-orange-500"
+                                          : "text-red-500"
+                                    }`}
                                 >
-                                  {subAspectScore}
-                                </Text>
+                                  {aspectScore}
+                                </Label>
                               </div>
                             );
                           })
                         ) : (
-                          <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
+                          <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
                         )}
-                      </ScrollArea>
-                      {/* Tombol Selesai */}
-                      <div>
-                          <Button
-                            onClick={handleFinishClick}
-                            className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
-                          >
-                            Selesai
-                          </Button>
-                      </div>
-                    </CardContent>
+                      </CardDescription>
 
-                    {/* Modal untuk konfirmasi selesai asesmen */}
-                    <FinishAssessmentModal
-                      opened={modalOpen}
-                      onClose={() => setModalOpen(false)}
-                      onConfirm={handleConfirmFinish}
-                      assessmentId={assessmentId}
-                    />
+                      {/* Garis pembatas */}
+                      <div className="border-t-2 border-gray-300 my-4" />
 
-                    {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
-                    <ValidationModal
-                      opened={validationModalOpen}
-                      onClose={() => setValidationModalOpen(false)}
-                      unansweredQuestions={unansweredQuestions}
-                    />
+                      {/* Skor Sub-Aspek */}
+                      {filteredSubAspects.length > 0 ? (
+                        filteredSubAspects.map((subAspect) => {
+                          const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
+                          const subAspectScoreValue = parseFloat(subAspectScore);
+
+                          return (
+                            <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
+                              <Label className="text-sm text-gray-700">{subAspect.subAspectName}</Label>
+                              <Label
+                                className={`text-sm font-bold ${subAspectScoreValue >= 4.5
+                                  ? "text-green-700"
+                                  : subAspectScoreValue >= 3.5
+                                    ? "text-green-400"
+                                    : subAspectScoreValue >= 2.5
+                                      ? "text-yellow-400"
+                                      : subAspectScoreValue >= 1.5
+                                        ? "text-orange-500"
+                                        : "text-red-500"
+                                  }`}
+                              >
+                                {subAspectScore}
+                              </Label>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
+                      )}
+                    </ScrollArea>
+
+                    {/* Tombol Selesai */}
+                    <div>
+                      <Button
+                        onClick={handleFinishClick}
+                        className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
+                      >
+                        Selesai
+                      </Button>
+                    </div>
+                  </CardContent>
+
+                  {/* Modal untuk konfirmasi selesai asesmen */}
+                  <FinishAssessmentModal
+                    opened={modalOpen}
+                    onClose={() => setModalOpen(false)}
+                    onConfirm={handleConfirmFinish}
+                    assessmentId={assessmentId}
+                  />
+
+                  {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
+                  <ValidationModal
+                    opened={validationModalOpen}
+                    onClose={() => setValidationModalOpen(false)}
+                    unansweredQuestions={unansweredQuestions}
+                  />
                 </Card>
               </div>
-            </Flex>
+            </div>
           </div>
-        </Flex>
-      </Stack>
+        </div>
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx b/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
index 771a45d..fedceff 100644
--- a/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
+++ b/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
@@ -1,12 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import {
-  Flex,
-  Stack,
-  Text,
   Loader,
-  ActionIcon,
-  CloseButton,
-  Group,
 } from "@mantine/core";
 import {
   Card,
@@ -32,25 +26,22 @@ import {
 } from "@/shadcn/components/ui/leftsheet";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import {
-  submitAssessmentMutationOptions,
   uploadFileMutationOptions,
   fetchAspects,
   getQuestionsAllQueryOptions,
-  toggleFlagAnswer,
 } from "@/modules/assessmentManagement/queries/assessmentQueries";
-import { 
+import {
   getAnswersRevisionQueryOptions,
   submitAssessmentRevisionMutationOptions,
   updateOptionQuery,
   updateValidationQuery,
 } from "@/modules/assessmentResultsManagement/queries/assessmentResultsManagaementQueries";
-import { 
+import {
   getAllVerifiedAspectsAverageScore,
 } from "@/modules/assessmentResult/queries/assessmentResultQueries";
 import { TbLayoutSidebarLeftCollapseFilled, TbChevronRight, TbChevronDown } from "react-icons/tb";
 import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
 import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
-import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
 import { useState, useRef, useEffect } from "react";
 import AppHeader from "@/components/AppHeader";
 
@@ -137,13 +128,13 @@ export default function AssessmentPage() {
 
   useEffect(() => {
     const id = getQueryParam("id");
-  
+
     if (!id) {
       setAssessmentId(null);
     } else {
       setAssessmentId(id);
     }
-    
+
     // Check if aspectsQuery.data is defined
     if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0) {
       // If no sub-aspect is selected, find a suitable default
@@ -153,15 +144,15 @@ export default function AssessmentPage() {
           .find((subAspect) =>
             data?.data.some((question) => question.subAspectId === subAspect.id)
           );
-  
+
         if (firstMatchingSubAspect) {
           setSelectedSubAspectId(firstMatchingSubAspect.id);
-  
+
           // Find the parent aspect and set its id as the selectedAspectId
           const parentAspect = aspectsQuery.data.data.find((aspect) =>
             aspect.subAspects.some((sub) => sub.id === firstMatchingSubAspect.id)
           );
-  
+
           if (parentAspect) {
             setSelectedAspectId(parentAspect.id); // Use `id` from the parent aspect
             setOpenAspects({ [parentAspect.id]: true }); // Open only relevant aspects
@@ -172,7 +163,7 @@ export default function AssessmentPage() {
         const matchingAspect = aspectsQuery.data.data.find((aspect) =>
           aspect.subAspects.some((subAspect) => subAspect.id === selectedSubAspectId)
         );
-  
+
         if (matchingAspect) {
           setSelectedAspectId(matchingAspect.id); // Use `id` from the matching aspect
           setOpenAspects({ [matchingAspect.id]: true }); // Close all other dropdowns and open only the newly selected aspect
@@ -185,17 +176,17 @@ export default function AssessmentPage() {
     }
   }, [aspectsQuery.data, selectedSubAspectId, data?.data]);
 
-// Fetching answers for the assessment
-const { data: answersData } = useQuery(
-  getAnswersRevisionQueryOptions(assessmentId || "")
-);
+  // Fetching answers for the assessment
+  const { data: answersData } = useQuery(
+    getAnswersRevisionQueryOptions(assessmentId || "")
+  );
 
-const formattedResult = answersData?.data.reduce((acc, item) => {
-  if (item.questionId != null && item.newOptionId != null) {
+  const formattedResult = answersData?.data.reduce((acc, item) => {
+    if (item.questionId != null && item.newOptionId != null) {
       acc[item.questionId] = item.newOptionId;
-  }
-  return acc;
-}, {} as Record<string, string>);
+    }
+    return acc;
+  }, {} as Record<string, string>);
 
   // Effect untuk mengatur answers dari data yang diambil
   useEffect(() => {
@@ -203,27 +194,27 @@ const formattedResult = answersData?.data.reduce((acc, item) => {
       console.error();
       return;
     }
-  
+
     if (formattedResult) {
       setAnswers(formattedResult);
     }
-  }, [answersData, assessmentId]); 
+  }, [answersData, assessmentId]);
 
   // Fungsi untuk memeriksa pertanyaan yang belum dijawab
   const checkUnansweredQuestions = () => {
     console.log("answer validation data:", answers);
     // Filter pertanyaan yang belum dijawab berdasarkan data `answers`
     const unanswered = data?.data.filter(question => {
-        return question.questionId !== null && !answers[question.questionId];
+      return question.questionId !== null && !answers[question.questionId];
     }) || [];
-console.log("unanswered questions:", unanswered.length);
+    console.log("unanswered questions:", unanswered.length);
     setUnansweredQuestions(unanswered.length);
 
     // Tampilkan modal berdasarkan jumlah pertanyaan yang belum dijawab
     if (unanswered.length > 0) {
-        setValidationModalOpen(true);
+      setValidationModalOpen(true);
     } else {
-        setModalOpen(true);
+      setModalOpen(true);
     }
   };
 
@@ -234,19 +225,19 @@ console.log("unanswered questions:", unanswered.length);
 
   const handleConfirmFinish = async (assessmentId: string) => {
     try {
-        // Skip counting unanswered questions here to prevent duplication
-        const mutation = submitAssessmentRevisionMutationOptions(assessmentId);
-        const response = await mutation.mutationFn();
+      // Skip counting unanswered questions here to prevent duplication
+      const mutation = submitAssessmentRevisionMutationOptions(assessmentId);
+      const response = await mutation.mutationFn();
 
-        // Navigate to results
-        const newUrl = `/assessmentResult?id=${assessmentId}`;
-        window.history.pushState({}, "", newUrl);
-        console.log("Navigated to:", newUrl);
-        console.log(response.message);
+      // Navigate to results
+      const newUrl = `/assessmentResult?id=${assessmentId}`;
+      window.history.pushState({}, "", newUrl);
+      console.log("Navigated to:", newUrl);
+      console.log(response.message);
     } catch (error) {
-        console.error("Error finishing assessment:", error);
+      console.error("Error finishing assessment:", error);
     } finally {
-        setModalOpen(false);
+      setModalOpen(false);
     }
   };
 
@@ -266,8 +257,8 @@ console.log("unanswered questions:", unanswered.length);
 
   // Filter aspects by selected aspectId
   const filteredAspects = selectedAspectId
-  ? aspects.filter((aspect) => aspect.aspectId === selectedAspectId) // Use 'id' instead of 'aspectId'
-  : aspects;
+    ? aspects.filter((aspect) => aspect.aspectId === selectedAspectId) // Use 'id' instead of 'aspectId'
+    : aspects;
 
   // Get the currently selected aspect to show all related sub-aspects
   const currentAspect = aspects.find(aspect => aspect.aspectId === selectedAspectId);
@@ -288,43 +279,20 @@ console.log("unanswered questions:", unanswered.length);
     }
   }, [flaggedQuestions]);
 
-  // Mutation function to toggle flag
-  // const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
-  //   mutationFn: toggleFlagAnswer,
-  //   onSuccess: (response) => {
-  //     if (response && response.answer) {
-  //       const { answer } = response;
-  //       setFlaggedQuestions((prevFlags) => {
-  //         const newFlags = {
-  //           ...prevFlags,
-  //           [answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
-  //         };
-  //         // Simpan perubahan ke localStorage
-  //         localStorage.setItem("flaggedQuestions", JSON.stringify(newFlags));
-  //         return newFlags;
-  //       });
-  //     }
-  //   },
-
-  //   onError: (error) => {
-  //     console.error("Error toggling flag:", error);
-  //   },
-  // });
-
   // Usage of the mutation in your component
   const { mutate: submitOption } = useMutation({
     mutationFn: (form: {
-        assessmentId: string;
-        questionId: string;
-        optionId: string;
+      assessmentId: string;
+      questionId: string;
+      optionId: string;
     }) => updateOptionQuery(form),
     onSuccess: () => {
       averageScoreQuery.refetch();
-        // Tindakan yang diambil setelah berhasil
-        console.log("Option updated successfully!");
+      // Tindakan yang diambil setelah berhasil
+      console.log("Option updated successfully!");
     },
     onError: (error) => {
-        console.error("Error updating option:", error);
+      console.error("Error updating option:", error);
     },
   });
 
@@ -333,8 +301,8 @@ console.log("unanswered questions:", unanswered.length);
 
     // Memastikan assessmentId adalah string yang valid
     if (!assessmentId) {
-        console.error("Assessment ID tidak ditemukan");
-        return; // Keluar jika assessmentId tidak ada
+      console.error("Assessment ID tidak ditemukan");
+      return; // Keluar jika assessmentId tidak ada
     }
 
     // Update jawaban untuk pertanyaan tertentu
@@ -345,21 +313,21 @@ console.log("unanswered questions:", unanswered.length);
 
     // Call the mutation to submit the option
     submitOption({
-        assessmentId, // Menggunakan assessmentId yang diperoleh dari parameter
-        questionId,
-        optionId, // Mengirim ID opsi yang dipilih
+      assessmentId, // Menggunakan assessmentId yang diperoleh dari parameter
+      questionId,
+      optionId, // Mengirim ID opsi yang dipilih
     });
   };
 
   const validationResult = answersData?.data.reduce((acc, item) => {
     if (item.questionId != null && item.newValidationInformation != null) {
-        acc[item.questionId] = item.newValidationInformation;
+      acc[item.questionId] = item.newValidationInformation;
     }
     return acc;
   }, {} as Record<string, string>);
 
   // Mengambil data dari database saat komponen dimuat
-  useEffect(() => {    
+  useEffect(() => {
     if (validationResult) {
       setValidationInformation(validationResult);
     }
@@ -368,16 +336,16 @@ console.log("unanswered questions:", unanswered.length);
   // Mutation untuk mengirim data ke backend
   const { mutate: submitValidation } = useMutation({
     mutationFn: (form: {
-        assessmentId: string;
-        questionId: string;
-        newValidationInformation: string;
+      assessmentId: string;
+      questionId: string;
+      newValidationInformation: string;
     }) => updateValidationQuery(form),
     onSuccess: () => {
-        // Tindakan yang diambil setelah berhasil
-        console.log("Validation updated successfully!");
+      // Tindakan yang diambil setelah berhasil
+      console.log("Validation updated successfully!");
     },
     onError: (error) => {
-        console.error("Error updating validation:", error);
+      console.error("Error updating validation:", error);
     },
   });
 
@@ -385,20 +353,20 @@ console.log("unanswered questions:", unanswered.length);
   const handleTextareaChange = (questionId: string, value: string) => {
     // Memperbarui state validationInformation
     setValidationInformation((prev) => ({
-        ...prev,
-        [questionId]: value,
+      ...prev,
+      [questionId]: value,
     }));
 
     // Pastikan assessmentId tidak null sebelum mengirimkan data ke server
     if (assessmentId) {
-        // Kirim data validasi ke server
-        submitValidation({
-            assessmentId,
-            questionId,
-            newValidationInformation: value,
-        });
+      // Kirim data validasi ke server
+      submitValidation({
+        assessmentId,
+        questionId,
+        newValidationInformation: value,
+      });
     } else {
-        console.error("Assessment ID tidak ditemukan");
+      console.error("Assessment ID tidak ditemukan");
     }
   };
 
@@ -419,14 +387,14 @@ console.log("unanswered questions:", unanswered.length);
   useEffect(() => {
     const keys = Object.keys(localStorage);
     keys.forEach((key) => {
-        if (key.startsWith(`uploadedFile_${assessmentId}_`)) { // Menggunakan assessmentId
-            const fileData = JSON.parse(localStorage.getItem(key) || '{}');
-            const questionId = key.replace(`uploadedFile_${assessmentId}_`, ''); // Ambil questionId dari kunci
-            setUploadedFiles(prev => ({
-                ...prev,
-                [questionId]: new File([fileData], fileData.name, { type: fileData.type }), // Buat objek File baru
-            }));
-        }
+      if (key.startsWith(`uploadedFile_${assessmentId}_`)) { // Menggunakan assessmentId
+        const fileData = JSON.parse(localStorage.getItem(key) || '{}');
+        const questionId = key.replace(`uploadedFile_${assessmentId}_`, ''); // Ambil questionId dari kunci
+        setUploadedFiles(prev => ({
+          ...prev,
+          [questionId]: new File([fileData], fileData.name, { type: fileData.type }), // Buat objek File baru
+        }));
+      }
     });
   }, [assessmentId]);
 
@@ -437,51 +405,51 @@ console.log("unanswered questions:", unanswered.length);
     event.preventDefault();
     setDragActive(false);
     const droppedFiles = Array.from(event.dataTransfer.files);
-    
+
     if (droppedFiles.length > 0) {
-        const file = droppedFiles[0];
-        
-        // Validate file size
-        if (file.size > MAX_FILE_SIZE) {
-            setExceededFileName(file.name); // Simpan nama file yang melebihi ukuran
-            setModalOpenFileSize(true); // Tampilkan modal
-            return;
-        }
+      const file = droppedFiles[0];
 
-        const formData = new FormData();
-        formData.append('file', file); // Hanya menyertakan file pertama
+      // Validate file size
+      if (file.size > MAX_FILE_SIZE) {
+        setExceededFileName(file.name); // Simpan nama file yang melebihi ukuran
+        setModalOpenFileSize(true); // Tampilkan modal
+        return;
+      }
 
-        // Pastikan assessmentId tidak null sebelum menambahkannya ke FormData
-        if (assessmentId) {
-            formData.append('assessmentId', assessmentId);
-        } else {
-            console.error("assessmentId is null");
-            return; // Atau tangani sesuai kebutuhan
-        }
+      const formData = new FormData();
+      formData.append('file', file); // Hanya menyertakan file pertama
 
-        // Tambahkan questionId ke FormData
-        if (question.questionId) {
-            formData.append('questionId', question.questionId);
-        } else {
-            console.error("questionId is null");
-            return; // Atau tangani sesuai kebutuhan
-        }
+      // Pastikan assessmentId tidak null sebelum menambahkannya ke FormData
+      if (assessmentId) {
+        formData.append('assessmentId', assessmentId);
+      } else {
+        console.error("assessmentId is null");
+        return; // Atau tangani sesuai kebutuhan
+      }
 
-        uploadFileMutation.mutate(formData); // Unggah file
+      // Tambahkan questionId ke FormData
+      if (question.questionId) {
+        formData.append('questionId', question.questionId);
+      } else {
+        console.error("questionId is null");
+        return; // Atau tangani sesuai kebutuhan
+      }
 
-        // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci
-        setUploadedFiles(prev => ({
-            ...prev,
-            [question.questionId]: file, // Simpan file berdasarkan questionId
-        }));
-        
-        localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({
-            name: file.name,
-            type: file.type,
-            lastModified: file.lastModified,
-        }));
+      uploadFileMutation.mutate(formData); // Unggah file
+
+      // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci
+      setUploadedFiles(prev => ({
+        ...prev,
+        [question.questionId]: file, // Simpan file berdasarkan questionId
+      }));
+
+      localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({
+        name: file.name,
+        type: file.type,
+        lastModified: file.lastModified,
+      }));
     }
-  };  
+  };
 
   const handleClick = () => {
     if (fileInputRef.current) {
@@ -491,57 +459,57 @@ console.log("unanswered questions:", unanswered.length);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, question: { questionId: string }) => {
     if (event.target.files) {
-        const fileArray = Array.from(event.target.files);
-        if (fileArray.length > 0) {
-            const file = fileArray[0];
+      const fileArray = Array.from(event.target.files);
+      if (fileArray.length > 0) {
+        const file = fileArray[0];
 
-            // Validate file size
-            if (file.size > MAX_FILE_SIZE) {
-                setExceededFileName(file.name); // Simpan nama file yang melebihi ukuran
-                setModalOpenFileSize(true); // Tampilkan modal
-                return; // Hentikan eksekusi fungsi jika ukuran file melebihi batas
-            }
-
-            const formData = new FormData();
-            formData.append('file', file); // Hanya menyertakan file pertama
-
-            // Tambahkan assessmentId ke FormData
-            if (assessmentId) {
-                formData.append('assessmentId', assessmentId);
-            } else {
-                console.error("assessmentId is null");
-                return; // Atau tangani sesuai kebutuhan
-            }
-
-            // Tambahkan questionId ke FormData
-            if (question.questionId) {
-                formData.append('questionId', question.questionId);
-            } else {
-                console.error("questionId is null");
-                return; // Atau tangani sesuai kebutuhan
-            }
-
-            uploadFileMutation.mutate(formData); // Unggah file
-
-            // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci
-            setUploadedFiles(prev => ({
-                ...prev,
-                [question.questionId]: file, // Simpan file berdasarkan questionId
-            }));
-
-            localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({
-                name: file.name,
-                type: file.type,
-                lastModified: file.lastModified,
-            }));
+        // Validate file size
+        if (file.size > MAX_FILE_SIZE) {
+          setExceededFileName(file.name); // Simpan nama file yang melebihi ukuran
+          setModalOpenFileSize(true); // Tampilkan modal
+          return; // Hentikan eksekusi fungsi jika ukuran file melebihi batas
         }
+
+        const formData = new FormData();
+        formData.append('file', file); // Hanya menyertakan file pertama
+
+        // Tambahkan assessmentId ke FormData
+        if (assessmentId) {
+          formData.append('assessmentId', assessmentId);
+        } else {
+          console.error("assessmentId is null");
+          return; // Atau tangani sesuai kebutuhan
+        }
+
+        // Tambahkan questionId ke FormData
+        if (question.questionId) {
+          formData.append('questionId', question.questionId);
+        } else {
+          console.error("questionId is null");
+          return; // Atau tangani sesuai kebutuhan
+        }
+
+        uploadFileMutation.mutate(formData); // Unggah file
+
+        // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci
+        setUploadedFiles(prev => ({
+          ...prev,
+          [question.questionId]: file, // Simpan file berdasarkan questionId
+        }));
+
+        localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({
+          name: file.name,
+          type: file.type,
+          lastModified: file.lastModified,
+        }));
+      }
     }
-  };  
+  };
 
   const handleRemoveFile = (question: { questionId: string }) => {
     setUploadedFiles(prev => ({
-        ...prev,
-        [question.questionId]: null, // Hapus file yang diunggah untuk pertanyaan ini
+      ...prev,
+      [question.questionId]: null, // Hapus file yang diunggah untuk pertanyaan ini
     }));
     localStorage.removeItem(`uploadedFile_${assessmentId}_${question.questionId}`); // Hapus info file dari local storage
   };
@@ -561,9 +529,9 @@ console.log("unanswered questions:", unanswered.length);
 
   if (isError) {
     return (
-      <Text color="red">
+      <p color="red">
         Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
-      </Text>
+      </p>
     );
   }
 
@@ -571,9 +539,9 @@ console.log("unanswered questions:", unanswered.length);
     return (
       <Card>
         <CardContent>
-          <Text color="red" className="text-center">
+          <p color="red" className="text-center">
             Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
-          </Text>
+          </p>
         </CardContent>
       </Card>
     );
@@ -602,20 +570,20 @@ console.log("unanswered questions:", unanswered.length);
   const totalQuestionsInSubAspect = data?.data?.filter(
     (question) => question.subAspectId === selectedSubAspectId
   )?.length || 0;
-  
+
   const totalPages = Math.ceil(totalQuestionsInSubAspect / questionsPerPage);
 
   return (
     <div>
-      <Stack gap="md">
-        <Flex justify="space-between" align="flex-start" mt="lg">
+      <div className="space-y-4">
+        <div className="flex justify-between items-start">
 
           {/* LEFT-SIDE */}
           {/* Aspek dan Sub-Aspek */}
           <AppHeader
-              openNavbar={isLeftSidebarOpen}
-              toggle={toggleLeftSidebar}
-              toggleLeftSidebar={toggleLeftSidebar}
+            openNavbar={isLeftSidebarOpen}
+            toggle={toggleLeftSidebar}
+            toggleLeftSidebar={toggleLeftSidebar}
           />
 
           {/* Sidebar for Mobile */}
@@ -623,7 +591,7 @@ console.log("unanswered questions:", unanswered.length);
             <LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
               <LeftSheetContent className="h-full w-75 overflow-auto">
                 <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
-                <Flex direction="column" gap="xs" className="w-64">
+                <div className="w-64">
                   <div className="space-y-2">
                     {/* Aspek */}
                     {aspectsQuery.data?.data
@@ -658,7 +626,7 @@ console.log("unanswered questions:", unanswered.length);
                                 .map((subAspect) => (
                                   <div
                                     key={subAspect.id}
-                                    className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
+                                    className={`cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
                                     onClick={() => setSelectedSubAspectId(subAspect.id)}
                                   >
                                     <div className="text-xs">{subAspect.name}</div>
@@ -669,75 +637,75 @@ console.log("unanswered questions:", unanswered.length);
                         </div>
                       ))}
                   </div>
-                </Flex>
+                </div>
               </LeftSheetContent>
             </LeftSheet>
           )}
 
           {/* Sidebar for Desktop (Always Visible) */}
-            <div className="hidden md:block fixed h-screen w-64 overflow-auto">
-              <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
-              <Flex direction="column" gap="xs" className="w-64">
-                <div className="space-y-2">
-                  {/* Aspek */}
-                  {aspectsQuery.data?.data
-                    .filter((aspect) =>
-                      aspect.subAspects.some((subAspect) =>
-                        data?.data.some((question) => question.subAspectId === subAspect.id)
-                      )
+          <div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
+            <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
+            <div className="w-64">
+              <div className="space-y-2">
+                {/* Aspek */}
+                {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-2 ">
-                        <div
-                          className="flex justify-between cursor-pointer"
-                          onClick={() => toggleAspect(aspect.id)}
-                        >
-                          <div className="text-sm font-bold px-3">{aspect.name}</div>
-                          <div>
-                            {openAspects[aspect.id] ? (
-                              <TbChevronDown size={25} />
-                            ) : (
-                              <TbChevronRight size={25} />
-                            )}
-                          </div>
+                  )
+                  .map((aspect) => (
+                    <div key={aspect.id} className="p-2 ">
+                      <div
+                        className="flex justify-between cursor-pointer"
+                        onClick={() => toggleAspect(aspect.id)}
+                      >
+                        <div className="text-sm font-bold px-3">{aspect.name}</div>
+                        <div>
+                          {openAspects[aspect.id] ? (
+                            <TbChevronDown size={25} />
+                          ) : (
+                            <TbChevronRight size={25} />
+                          )}
                         </div>
-
-                        {/* Sub-Aspek */}
-                        {openAspects[aspect.id] && (
-                          <div className="mt-2 space-y-2">
-                            {aspect.subAspects
-                              .filter((subAspect) =>
-                                data?.data.some((question) => question.subAspectId === subAspect.id)
-                              )
-                              .map((subAspect) => (
-                                <div
-                                  key={subAspect.id}
-                                  className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
-                                  onClick={() => setSelectedSubAspectId(subAspect.id)}
-                                >
-                                  <div className="text-xs">{subAspect.name}</div>
-                                </div>
-                              ))}
-                          </div>
-                        )}
                       </div>
-                    ))}
-                </div>
-              </Flex>
+
+                      {/* Sub-Aspek */}
+                      {openAspects[aspect.id] && (
+                        <div className="mt-2 space-y-2">
+                          {aspect.subAspects
+                            .filter((subAspect) =>
+                              data?.data.some((question) => question.subAspectId === subAspect.id)
+                            )
+                            .map((subAspect) => (
+                              <div
+                                key={subAspect.id}
+                                className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
+                                onClick={() => setSelectedSubAspectId(subAspect.id)}
+                              >
+                                <div className="text-xs">{subAspect.name}</div>
+                              </div>
+                            ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+              </div>
             </div>
-          
+          </div>
+
           {/* MIDDLE */}
           {/* Pertanyaan */}
           <div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full">
-            <Stack gap="sm" style={{ flex: 1 }}>
-              <Text className="text-2xl font-bold ml-6">
+            <div className="space-y-6 flex flex-col">
+              <Label className="text-2xl font-bold ml-6 mt-4">
                 Harap menjawab semua pertanyaan yang tersedia
-              </Text>
-              <Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text>
+              </Label>
+              <Label className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Label>
               {filteredQuestions.length === 0 ? (
-                <Text className="text-center p-3">
+                <Label className="text-center p-3">
                   Pertanyaan tidak ada untuk sub-aspek yang dipilih.
-                </Text>
+                </Label>
               ) : (
                 filteredQuestions.map((question: any, index: number) => {
                   const questionId = question.questionId;
@@ -749,71 +717,69 @@ console.log("unanswered questions:", unanswered.length);
                       ref={(el) => (questionRefs.current[questionId] = el)}
                       className="space-y-4"
                     >
-                      <Stack gap="sm">
-                        <div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
-                          {/* Question Number */}
-                          <Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text>
+                      <div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
+                        {/* Question Number */}
+                        <Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
 
-                          {/* Question Text */}
-                          <Text className="font-bold break-words text-sm p-2">{question.questionText}</Text>
-                        </div>
+                        {/* Question Text */}
+                        <Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
+                      </div>
 
-                        {/* Radio Button Options */}
-                        {question.options?.length > 0 ? (
-                          <div className="mx-11">
-                            <RadioGroup
-                              value={answers[questionId] || ""}
-                              onValueChange={(value) => handleAnswerChange(questionId, value)}
-                              className="flex flex-col gap-2"
-                            >
-                              {question.options.map((option: any) => (
-                                <div
-                                  key={option.optionId}
-                                  className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${answers[question.questionId] === option.optionId
-                                    ? "bg-[--primary-color] text-white border-[--primary-color]"
-                                    : "bg-gray-200 text-black border-gray-200"
-                                    }`}
-                                    onClick={() => handleAnswerChange(questionId, option.optionId)}
-                                >
-                                  <RadioGroupItem
-                                    value={option.optionId}
-                                    id={option.optionId}
-                                    checked={answers[questionId] === option.optionId}
-                                    className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
-                                  />
-                                  <Label
-                                    htmlFor={option.optionId}
-                                    className="ml-2 font-bold cursor-pointer flex-1"
-                                  >
-                                    {option.optionText}
-                                  </Label>
-                                </div>
-                              ))}
-                            </RadioGroup>
-                          </div>
-                        ) : (
-                          <Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
-                        )}
-
-                        {/* Textarea for additional information */}
+                      {/* Radio Button Options */}
+                      {question.options?.length > 0 ? (
                         <div className="mx-11">
-                          <Textarea
-                            placeholder="Berikan keterangan terkait jawaban di atas"
-                            value={validationInformation[question.questionId] || ""}
-                            onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
-                          />
+                          <RadioGroup
+                            value={answers[questionId] || ""}
+                            onValueChange={(value) => handleAnswerChange(questionId, value)}
+                            className="flex flex-col gap-2"
+                          >
+                            {question.options.map((option: any) => (
+                              <div
+                                key={option.optionId}
+                                className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${answers[question.questionId] === option.optionId
+                                  ? "bg-[--primary-color] text-white border-[--primary-color]"
+                                  : "bg-gray-200 text-black border-gray-200"
+                                  }`}
+                                onClick={() => handleAnswerChange(questionId, option.optionId)}
+                              >
+                                <RadioGroupItem
+                                  value={option.optionId}
+                                  id={option.optionId}
+                                  checked={answers[questionId] === option.optionId}
+                                  className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
+                                />
+                                <Label
+                                  htmlFor={option.optionId}
+                                  className="ml-2 font-bold cursor-pointer flex-1"
+                                >
+                                  {option.optionText}
+                                </Label>
+                              </div>
+                            ))}
+                          </RadioGroup>
                         </div>
+                      ) : (
+                        <Label color="red">Tidak ada opsi untuk pertanyaan ini.</Label>
+                      )}
 
-                        {/* Divider between questions */}
-                        <div>
-                          <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
-                        </div>
-                      </Stack>
+                      {/* Textarea for additional information */}
+                      <div className="mx-11">
+                        <Textarea
+                          placeholder="Berikan keterangan terkait jawaban di atas"
+                          value={validationInformation[question.questionId] || ""}
+                          onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
+                        />
+                      </div>
+
+                      {/* Divider between questions */}
+                      <div>
+                        <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
+                      </div>
                     </div>
                   );
                 })
               )}
-            </Stack>
+            </div>
             {/* Pagination for mobile */}
             <div className="md:hidden mb-4 flex justify-center">
               <Pagination
@@ -825,7 +791,7 @@ console.log("unanswered questions:", unanswered.length);
                   }
                 }}
               >
-                <Text className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Text>
+                <Label className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Label>
               </Pagination>
             </div>
           </div>
@@ -884,73 +850,71 @@ console.log("unanswered questions:", unanswered.length);
                 <div className="mt-4">
                   <h2 className="text-lg font-extrabold mt-4 mb-2">Nilai Sementara</h2>
                   <div className="max-h-full overflow-hidden">
-                      <div>
-                        {filteredAspects.length > 0 ? (
-                          filteredAspects.map((aspect) => {
-                            const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
-                            const aspectScoreValue = parseFloat(aspectScore);
+                    <div>
+                      {filteredAspects.length > 0 ? (
+                        filteredAspects.map((aspect) => {
+                          const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
+                          const aspectScoreValue = parseFloat(aspectScore);
 
-                            return (
-                              <div key={aspect.aspectId} className="flex justify-between items-center">
-                                <Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text>
-                                <Text
-                                  className={`text-xl font-bold ${
-                                    aspectScoreValue >= 4.5
-                                      ? "text-green-700"
-                                      : aspectScoreValue >= 3.5
-                                      ? "text-green-400"
-                                      : aspectScoreValue >= 2.5
+                          return (
+                            <div key={aspect.aspectId} className="flex justify-between items-center">
+                              <Label className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Label>
+                              <Label
+                                className={`text-xl font-bold ${aspectScoreValue >= 4.5
+                                  ? "text-green-700"
+                                  : aspectScoreValue >= 3.5
+                                    ? "text-green-400"
+                                    : aspectScoreValue >= 2.5
                                       ? "text-yellow-400"
                                       : aspectScoreValue >= 1.5
-                                      ? "text-orange-500"
-                                      : "text-red-500"
+                                        ? "text-orange-500"
+                                        : "text-red-500"
                                   }`}
-                                >
-                                  {aspectScore}
-                                </Text>
-                              </div>
-                            );
-                          })
-                        ) : (
-                          <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
-                        )}
-                      </div>
+                              >
+                                {aspectScore}
+                              </Label>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
+                      )}
+                    </div>
 
-                      {/* Divider */}
-                      <div className="border-t-2 border-gray-300 my-4" />
+                    {/* Divider */}
+                    <div className="border-t-2 border-gray-300 my-4" />
 
-                      {/* Skor Sub-Aspek */}
-                      <div>
-                        {filteredSubAspects.length > 0 ? (
-                          filteredSubAspects.map((subAspect) => {
-                            const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
-                            const subAspectScoreValue = parseFloat(subAspectScore);
+                    {/* Skor Sub-Aspek */}
+                    <div>
+                      {filteredSubAspects.length > 0 ? (
+                        filteredSubAspects.map((subAspect) => {
+                          const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
+                          const subAspectScoreValue = parseFloat(subAspectScore);
 
-                            return (
-                              <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
-                                <Text className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Text>
-                                <Text
-                                  className={`text-sm font-bold ${
-                                    subAspectScoreValue >= 4.5
-                                      ? "text-green-700"
-                                      : subAspectScoreValue >= 3.5
-                                      ? "text-green-400"
-                                      : subAspectScoreValue >= 2.5
+                          return (
+                            <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
+                              <Label className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Label>
+                              <Label
+                                className={`text-sm font-bold ${subAspectScoreValue >= 4.5
+                                  ? "text-green-700"
+                                  : subAspectScoreValue >= 3.5
+                                    ? "text-green-400"
+                                    : subAspectScoreValue >= 2.5
                                       ? "text-yellow-400"
                                       : subAspectScoreValue >= 1.5
-                                      ? "text-orange-500"
-                                      : "text-red-500"
+                                        ? "text-orange-500"
+                                        : "text-red-500"
                                   }`}
-                                >
-                                  {subAspectScore}
-                                </Text>
-                              </div>
-                            );
-                          })
-                        ) : (
-                          <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
-                        )}
-                      </div>
+                              >
+                                {subAspectScore}
+                              </Label>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
+                      )}
+                    </div>
 
                     {/* Finish Button */}
                     <div className="mt-4">
@@ -982,11 +946,11 @@ console.log("unanswered questions:", unanswered.length);
             </Sheet>
           </div>
           {/* Sidebar for desktop (always visible) */}
-          <div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4">
-            <Flex direction="column" gap="xs" className="mx-4">
-              <Text className="font-medium text-lg text-gray-800 mb-2">
-                  Nomor Soal
-              </Text>
+          <div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4 border-x">
+            <div className="mx-4 space-y-2">
+              <Label className="font-medium text-lg text-gray-800 mb-2">
+                Nomor Soal
+              </Label>
 
               {/* Navigasi (Number of Questions) */}
               <div className="grid grid-cols-5 gap-2">
@@ -1013,126 +977,128 @@ console.log("unanswered questions:", unanswered.length);
                   ) : null;
                 })}
               </div>
+            </div>
 
-              <div className="mt-4 flex justify-center">
-                <Pagination 
-                  page={currentPage} 
-                  totalPages={totalPages} 
-                  onPageChange={(newPage) => {
-                    if (selectedSubAspectId) {
-                      handlePageChange(selectedSubAspectId, newPage);
-                    }
-                  }}
-                >
-                  <Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
-                </Pagination>
-              </div>
+            {/* Pagination */}
+            <div className="mt-6 py-2 flex justify-center border-y">
+              <Pagination
+                page={currentPage}
+                totalPages={totalPages}
+                onPageChange={(newPage) => {
+                  if (selectedSubAspectId) {
+                    handlePageChange(selectedSubAspectId, newPage);
+                  }
+                }}
+              >
+                <Label className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Label>
+              </Pagination>
+            </div>
 
+            <div className="mx-4 space-y-2">
               {/* Skor Aspek dan Sub-Aspek */}
               <div className="mt-4">
                 <Card>
-                  <Text className="text-lg font-extrabold text-center mt-4 mb-2">
+                  <p className="text-lg font-extrabold text-center mt-4 mb-2">
                     Nilai Sementara
-                  </Text>
-                    <CardContent className="max-h-full overflow-hidden">
-                      <ScrollArea className="h-[200px] w-full rounded-md p-2">
-                        <CardDescription>
-                          {filteredAspects.length > 0 ? (
-                            filteredAspects.map((aspect) => {
-                              const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
-                              const aspectScoreValue = parseFloat(aspectScore);
-
-                              return (
-                                <div key={aspect.aspectId} className="flex justify-between items-center">
-                                  <Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
-                                  <Text
-                                    className={`text-xl font-bold ${
-                                      aspectScoreValue >= 4.5
-                                        ? "text-green-700"
-                                        : aspectScoreValue >= 3.5
-                                        ? "text-green-400"
-                                        : aspectScoreValue >= 2.5
-                                        ? "text-yellow-400"
-                                        : aspectScoreValue >= 1.5
-                                        ? "text-orange-500"
-                                        : "text-red-500"
-                                    }`}
-                                  >
-                                    {aspectScore}
-                                  </Text>
-                                </div>
-                              );
-                            })
-                          ) : (
-                            <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
-                          )}
-                        </CardDescription>
-
-                        {/* Garis pembatas */}
-                        <div className="border-t-2 border-gray-300 my-4" />
-
-                        {/* Skor Sub-Aspek */}
-                        {filteredSubAspects.length > 0 ? (
-                          filteredSubAspects.map((subAspect) => {
-                            const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
-                            const subAspectScoreValue = parseFloat(subAspectScore);
+                  </p>
+                  <CardContent className="max-h-full overflow-hidden">
+                    <ScrollArea className="h-[200px] w-full rounded-md p-2">
+                      <CardDescription>
+                        {filteredAspects.length > 0 ? (
+                          filteredAspects.map((aspect) => {
+                            const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
+                            const aspectScoreValue = parseFloat(aspectScore);
 
                             return (
-                              <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
-                                <Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
-                                <Text
-                                  className={`text-sm font-bold ${
-                                    subAspectScoreValue >= 4.5
-                                      ? "text-green-700"
-                                      : subAspectScoreValue >= 3.5
+                              <div key={aspect.aspectId} className="flex justify-between items-center">
+                                <Label className="text-lg text-gray-700">{aspect.aspectName}</Label>
+                                <Label
+                                  className={`text-xl font-bold ${aspectScoreValue >= 4.5
+                                    ? "text-green-700"
+                                    : aspectScoreValue >= 3.5
                                       ? "text-green-400"
-                                      : subAspectScoreValue >= 2.5
-                                      ? "text-yellow-400"
-                                      : subAspectScoreValue >= 1.5
-                                      ? "text-orange-500"
-                                      : "text-red-500"
-                                  }`}
+                                      : aspectScoreValue >= 2.5
+                                        ? "text-yellow-400"
+                                        : aspectScoreValue >= 1.5
+                                          ? "text-orange-500"
+                                          : "text-red-500"
+                                    }`}
                                 >
-                                  {subAspectScore}
-                                </Text>
+                                  {aspectScore}
+                                </Label>
                               </div>
                             );
                           })
                         ) : (
-                          <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
+                          <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
                         )}
-                      </ScrollArea>
-                      {/* Tombol Selesai */}
-                      <div>
-                          <Button
-                            onClick={handleFinishClick}
-                            className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
-                          >
-                            Selesai
-                          </Button>
-                      </div>
-                    </CardContent>
+                      </CardDescription>
 
-                    {/* Modal untuk konfirmasi selesai asesmen */}
-                    <FinishAssessmentModal
-                      opened={modalOpen}
-                      onClose={() => setModalOpen(false)}
-                      onConfirm={handleConfirmFinish}
-                      assessmentId={assessmentId}
-                    />
+                      {/* Garis pembatas */}
+                      <div className="border-t-2 border-gray-300 my-4" />
 
-                    {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
-                    <ValidationModal
-                      opened={validationModalOpen}
-                      onClose={() => setValidationModalOpen(false)}
-                      unansweredQuestions={unansweredQuestions}
-                    />
+                      {/* Skor Sub-Aspek */}
+                      {filteredSubAspects.length > 0 ? (
+                        filteredSubAspects.map((subAspect) => {
+                          const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
+                          const subAspectScoreValue = parseFloat(subAspectScore);
+
+                          return (
+                            <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
+                              <Label className="text-sm text-gray-700">{subAspect.subAspectName}</Label>
+                              <Label
+                                className={`text-sm font-bold ${subAspectScoreValue >= 4.5
+                                  ? "text-green-700"
+                                  : subAspectScoreValue >= 3.5
+                                    ? "text-green-400"
+                                    : subAspectScoreValue >= 2.5
+                                      ? "text-yellow-400"
+                                      : subAspectScoreValue >= 1.5
+                                        ? "text-orange-500"
+                                        : "text-red-500"
+                                  }`}
+                              >
+                                {subAspectScore}
+                              </Label>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
+                      )}
+                    </ScrollArea>
+
+                    {/* Tombol Selesai */}
+                    <div>
+                      <Button
+                        onClick={handleFinishClick}
+                        className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
+                      >
+                        Selesai
+                      </Button>
+                    </div>
+                  </CardContent>
+
+                  {/* Modal untuk konfirmasi selesai asesmen */}
+                  <FinishAssessmentModal
+                    opened={modalOpen}
+                    onClose={() => setModalOpen(false)}
+                    onConfirm={handleConfirmFinish}
+                    assessmentId={assessmentId}
+                  />
+
+                  {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
+                  <ValidationModal
+                    opened={validationModalOpen}
+                    onClose={() => setValidationModalOpen(false)}
+                    unansweredQuestions={unansweredQuestions}
+                  />
                 </Card>
               </div>
-            </Flex>
+            </div>
           </div>
-        </Flex>
-      </Stack>
-    </div>
+        </div>
+      </div>
+    </div >
   );
 }
\ No newline at end of file