update: add sheet component on left side and right side

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

@@ -12,6 +12,7 @@ import {
   Card,
   CardContent,
   CardDescription,
+  CardTitle,
 } from "@/shadcn/components/ui/card";
 import { Button } from "@/shadcn/components/ui/button";
 import { Textarea } from "@/shadcn/components/ui/textarea";
@@ -33,12 +34,33 @@ import {
   getQuestionsAllQueryOptions,
   toggleFlagAnswer,
 } from "@/modules/assessmentManagement/queries/assessmentQueries";
-import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronDown } from "react-icons/tb";
+import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronDown, TbLayoutSidebarLeftCollapseFilled, TbMenu2 } from "react-icons/tb";
 import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
 import FileUpload from "@/modules/assessmentManagement/fileUpload/fileUpload";
 import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
 import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/shadcn/components/ui/sheet";
+import {
+  LeftSheet,
+  LeftSheetClose,
+  LeftSheetContent,
+  LeftSheetDescription,
+  LeftSheetFooter,
+  LeftSheetHeader,
+  LeftSheetTitle,
+  LeftSheetTrigger,
+} from "@/shadcn/components/ui/leftsheet";
 import { useState, useRef, useEffect } from "react";
+import AppHeader from "@/components/AppHeader";
 
 const getQueryParam = (param: string) => {
   const urlParams = new URLSearchParams(window.location.search);
@@ -95,6 +117,29 @@ export default function AssessmentPage() {
   const [currentPagePerSubAspect, setCurrentPagePerSubAspect] = useState<{ [subAspectId: string]: number }>({});
   const currentPage = currentPagePerSubAspect[selectedSubAspectId || ""] || 1;
   const questionsPerPage = 10;
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); // Check for mobile screen
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [openNavbar, setOpenNavbar] = useState(false);
+  const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
+
+  // Toggle the sidebar open/close on mobile
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+
+  const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
+
+  const toggleSidebarLeftSide = () => {
+    setIsSidebarOpen((prevState) => !prevState);
+  };
+
+  // Fungsi toggle untuk membuka/menutup navbar
+  const toggle = () => {
+    setOpenNavbar((prevState) => !prevState);
+  };
+
+  // Adjust layout on screen resize
+  window.addEventListener('resize', () => {
+    setIsMobile(window.innerWidth <= 768);
+  });
 
   // Fetch aspects and sub-aspects
   const aspectsQuery = useQuery({
@@ -178,8 +223,6 @@ export default function AssessmentPage() {
       {}
     );
 
-  } else {
-      console.error("No data found or data is undefined.");
   }
 
   // Effect untuk mengatur answers dari data yang diambil
@@ -202,8 +245,6 @@ export default function AssessmentPage() {
         {}
       );
       setAnswers(answersFromDatabase); // Set the transformed data directly to state
-    } else {
-        console.error("No data found or data is undefined.");
     }
   }, [answersData]);
 
@@ -601,7 +642,15 @@ export default function AssessmentPage() {
 
           {/* LEFT-SIDE */}
           {/* Aspek dan Sub-Aspek */}
-          <div className="fixed h-screen w-64 overflow-auto">
+            <TbMenu2
+              onClick={toggleLeftSidebar}
+              className="ml-4 w-6 h-fit pb-4 mb-4 cursor-pointer"
+            />
+
+          {/* Sidebar for Mobile */}
+          {isMobile && (
+            <LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
+              <LeftSheetContent className="h-full w-75 overflow-auto mt-8">
                 <Flex direction="column" gap="xs" className="w-64">
                   <div className="space-y-2">
                     {/* Aspek */}
@@ -612,10 +661,60 @@ export default function AssessmentPage() {
                         )
                       )
                       .map((aspect) => (
+                        <div key={aspect.id} className="p-2 ">
                           <div
-                      key={aspect.id}
+                            className="flex justify-between cursor-pointer"
-                      className="p-2 "
+                            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>
+                          </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>
+              </LeftSheetContent>
+            </LeftSheet>
+          )}
+
+          {/* Sidebar for Desktop (Always Visible) */}
+            <div className="hidden md:block fixed h-screen w-64 overflow-auto mt-8">
+              <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)
+                      )
+                    )
+                    .map((aspect) => (
+                      <div key={aspect.id} className="p-2 ">
                         <div
                           className="flex justify-between cursor-pointer"
                           onClick={() => toggleAspect(aspect.id)}
@@ -656,7 +755,7 @@ export default function AssessmentPage() {
 
           {/* MIDDLE */}
           {/* Pertanyaan */}
-          <div className="ml-64 mr-60 flex-1 overflow-y-auto h-full">
+          <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">
                 Harap menjawab semua pertanyaan yang tersedia
@@ -678,14 +777,12 @@ export default function AssessmentPage() {
                       className="space-y-4"
                     >
                       <Stack gap="sm">
-                        <Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
+                        <div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
-                          {/* Question */}
+                          {/* Question Number */}
-                          <Text className="font-bold mx-3 p-1 text-sm">{startIndex + index + 1}.</Text>
+                          <Text className="font-bold p-1 text-sm">{startIndex + index + 1}.</Text>
-                          <div className="flex-grow">
+
-                            <Text className="font-bold break-words text-sm p-1">
+                          {/* Question Text */}
-                              {question.questionText}
+                          <Text className="font-bold break-words text-sm p-1">{question.questionText}</Text>
-                            </Text>
-                          </div>
 
                           {/* Action Icon/Flag */}
                           <ActionIcon
@@ -695,14 +792,14 @@ export default function AssessmentPage() {
                           >
                             <TbFlagFilled
                               size={25}
-                              className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`} // Mengurangi padding untuk ikon
+                              className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
                             />
                           </ActionIcon>
-                        </Flex>
+                        </div>
 
-                        {/* Opsi Radio Button */}
+                        {/* Radio Button Options */}
                         {question.options?.length > 0 ? (
-                          <div className="mx-11">
+                          <div className="mx-8">
                             <RadioGroup
                               value={answers[question.questionId] || ""}
                               onValueChange={(value) => handleAnswerChange(question.questionId, value)}
@@ -711,8 +808,7 @@ export default function AssessmentPage() {
                               {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 ${
+                                  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
-                                    answers[question.questionId] === option.optionId
                                     ? "bg-[--primary-color] text-white border-[--primary-color]"
                                     : "bg-gray-200 text-black border-gray-200"
                                     }`}
@@ -738,7 +834,7 @@ export default function AssessmentPage() {
                           <Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
                         )}
 
-                        {/* Textarea */}
+                        {/* Textarea for additional information */}
                         <div className="mx-11">
                           <Textarea
                             placeholder="Berikan keterangan terkait jawaban di atas"
@@ -763,7 +859,7 @@ export default function AssessmentPage() {
                           handleClick={handleClick}
                         />
 
-                        {/* Garis pembatas setiap soal */}
+                        {/* Divider between questions */}
                         <div>
                           <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
                         </div>
@@ -777,7 +873,174 @@ export default function AssessmentPage() {
 
           {/* RIGHT-SIDE */}
           {/* Navigasi dan Pagination */}
-          <div className="fixed h-screen right-0 w-60 overflow-auto mr-4">
+          {isMobile && (
+            <button
+              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+              className="fixed bottom-4 right-4 bg-[--primary-color] text-white p-3 rounded-full shadow-md z-50"
+            >
+              <TbLayoutSidebarLeftCollapseFilled size={30} />
+            </button>
+          )}
+
+          {/* Sidebar for mobile (only when toggled) */}
+          <div className="hidden md:block">
+            <Sheet open={isSidebarOpen} onOpenChange={(open) => setIsSidebarOpen(open)}>
+              <SheetContent className="h-full w-70 overflow-auto mr-4">
+                <SheetTitle className="font-medium text-lg text-gray-800 mb-2">
+                  Nomor Soal
+                </SheetTitle>
+                {/* <Text className="font-medium text-lg text-gray-800 mb-2">Nomor Soal</Text> */}
+
+                {/* Navigasi (Number of Questions) */}
+                <div className="grid grid-cols-5 gap-2">
+                  {Array.from({ length: totalQuestionsInSubAspect }).map((_, i) => {
+                    const questionNumber = startIndex + i + 1;
+                    const questionId = filteredQuestions[i]?.questionId;
+
+                    return questionId ? (
+                      <div key={questionId} className="flex justify-center relative">
+                        <button
+                          className={`
+                            w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
+                            ${answers[questionId] && flaggedQuestions[questionId] ? "bg-white text-black" : ""}
+                            ${answers[questionId] && !flaggedQuestions[questionId] ? "bg-[--primary-color] text-white" : ""}
+                            ${!answers[questionId] && !flaggedQuestions[questionId] ? "bg-transparent text-black" : ""}
+                            ${flaggedQuestions[questionId] ? "border-gray-50" : ""}
+                          `}
+                          onClick={() => scrollToQuestion(questionId)}
+                        >
+                          {questionNumber}
+                        </button>
+                        {flaggedQuestions[questionId] && (
+                          <div className="absolute top-0 right-0 w-0 h-0 border-b-[20px] border-b-transparent border-r-[20px] border-r-red-600 rounded-tr-sm" />
+                        )}
+                      </div>
+                    ) : null;
+                  })}
+                </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>
+
+                {/* Skor Aspek dan Sub-Aspek */}
+                <div className="mt-4">
+                  <Card>
+                    <CardTitle className="text-lg font-extrabold text-center mt-4 mb-2">
+                      Nilai Sementara
+                    </CardTitle>
+                    <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>
+
+                        {/* Divider */}
+                        <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);
+
+                            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
+                                      ? "text-green-400"
+                                      : subAspectScoreValue >= 2.5
+                                      ? "text-yellow-400"
+                                      : subAspectScoreValue >= 1.5
+                                      ? "text-orange-500"
+                                      : "text-red-500"
+                                  }`}
+                                >
+                                  {subAspectScore}
+                                </Text>
+                              </div>
+                            );
+                          })
+                        ) : (
+                          <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
+                        )}
+                      </ScrollArea>
+
+                      {/* Finish Button */}
+                      <div>
+                        <Button
+                          onClick={handleFinishClick}
+                          className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
+                        >
+                          Selesai
+                        </Button>
+                      </div>
+                    </CardContent>
+
+                    {/* Finish Assessment Modal */}
+                    <FinishAssessmentModal
+                      opened={modalOpen}
+                      onClose={() => setModalOpen(false)}
+                      onConfirm={handleConfirmFinish}
+                      assessmentId={assessmentId}
+                    />
+
+                    {/* Validation Modal */}
+                    <ValidationModal
+                      opened={validationModalOpen}
+                      onClose={() => setValidationModalOpen(false)}
+                      unansweredQuestions={unansweredQuestions}
+                    />
+                  </Card>
+                </div>
+              </SheetContent>
+            </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