From 9bfad134cb8e17f1da5b826b845fc65cf18e046a Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Mon, 18 Nov 2024 15:37:58 +0700
Subject: [PATCH] update: add scroll area using shadcn for left side bar

---
 .../assessment/index.lazy.tsx                 | 186 +++++++++---------
 .../_verifyingLayout/verifying/index.lazy.tsx | 184 ++++++++---------
 2 files changed, 189 insertions(+), 181 deletions(-)

diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
index 0b2c302..b6d2a33 100644
--- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
@@ -626,108 +626,112 @@ export default function AssessmentPage() {
           {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>
-                <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)
+                <ScrollArea className="h-full w-75 rounded-md p-2">
+                  <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 mt-4">
-                          <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} />
-                              )}
+                        .map((aspect) => (
+                          <div key={aspect.id} className="p-2 mt-4">
+                            <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>
                             </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={`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>
-                      ))}
+                            {/* 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={`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>
+                </ScrollArea>
               </LeftSheetContent>
             </LeftSheet>
           )}
 
           {/* Sidebar for Desktop (Always Visible) */}
-          <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)
+          <div className="hidden md:block fixed h-full w-62 overflow-auto border-x">
+            <ScrollArea className="h-full w-62 rounded-md p-2">
+              <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} />
-                          )}
+                    .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>
                         </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>
-                  ))}
+                        {/* 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>
+            </ScrollArea>
           </div>
 
           {/* MIDDLE */}
@@ -755,10 +759,10 @@ export default function AssessmentPage() {
                     >
                       <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>
+                        <Label className="font-bold pl-6 text-sm">{startIndex + index + 1}.</Label>
 
                         {/* Question Text */}
-                        <Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
+                        <Label className="font-bold break-words text-sm">{question.questionText}</Label>
 
                         {/* Action Button/Flag */}
                         <button
diff --git a/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx b/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
index fedceff..9ce9962 100644
--- a/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
+++ b/apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
@@ -590,108 +590,112 @@ export default function AssessmentPage() {
           {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>
-                <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)
+                <ScrollArea className="h-full w-75 rounded-md p-2">
+                  <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 mt-4">
-                          <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} />
-                              )}
+                        .map((aspect) => (
+                          <div key={aspect.id} className="p-2 mt-4">
+                            <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>
                             </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={`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>
-                      ))}
+                            {/* 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={`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>
+                </ScrollArea>
               </LeftSheetContent>
             </LeftSheet>
           )}
 
           {/* Sidebar for Desktop (Always Visible) */}
           <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)
+            <ScrollArea className="h-full w-62 rounded-md p-2">
+              <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} />
-                          )}
+                    .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>
                         </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>
-                  ))}
+                        {/* 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>
+            </ScrollArea>
           </div>
 
           {/* MIDDLE */}
@@ -719,10 +723,10 @@ export default function AssessmentPage() {
                     >
                       <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>
+                        <Label className="font-bold pl-6 text-sm">{startIndex + index + 1}.</Label>
 
                         {/* Question Text */}
-                        <Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
+                        <Label className="font-bold break-words text-sm">{question.questionText}</Label>
                       </div>
 
                       {/* Radio Button Options */}