From fe53a127e97a320803c9feb0e64297525ece1f56 Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Thu, 21 Nov 2024 11:48:00 +0700
Subject: [PATCH] fix: add responsive feature to assessment result page

---
 apps/frontend/src/components/AppHeader.tsx    |   2 +-
 .../assessmentResult/index.lazy.tsx           | 214 ++++++++++++------
 2 files changed, 148 insertions(+), 68 deletions(-)

diff --git a/apps/frontend/src/components/AppHeader.tsx b/apps/frontend/src/components/AppHeader.tsx
index f54b02e..38e9000 100644
--- a/apps/frontend/src/components/AppHeader.tsx
+++ b/apps/frontend/src/components/AppHeader.tsx
@@ -77,7 +77,7 @@ export default function AppHeader({ toggle, toggleLeftSidebar }: Props) {
 						</Button>
 					)}
 
-					{(showAssessmentLinks || showVerifyingAssessmentLinks) && (
+					{(showAssessmentLinks || showVerifyingAssessmentLinks || showAssessmentResultLinks) && (
 						<TbMenu2 onClick={toggleLeftSidebar} className="md:ml-0 ml-6 mt-8 w-6 h-fit pb-4 mb-4 cursor-pointer lg:hidden" />
 					)}
 					
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx
index a5b02c0..f4f2b59 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx
@@ -19,10 +19,14 @@ import {
   ChartTooltipContent,
 } from "@/shadcn/components/ui/chart"
 import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries";
-import { TbChevronDown, TbChevronLeft, TbChevronUp, TbFileTypePdf } from "react-icons/tb";
+import { TbChevronDown, TbChevronLeft, TbChevronRight, TbChevronUp, TbFileTypePdf } from "react-icons/tb";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
 import clsx from "clsx";
 import React from "react";
+import AppHeader from "@/components/AppHeader";
+import { LeftSheet, LeftSheetContent } from "@/shadcn/components/ui/leftsheet";
+import { ScrollArea } from "@mantine/core";
+import data from "node_modules/backend/src/appEnv";
 
 const getQueryParam = (param: string) => {
   const urlParams = new URLSearchParams(window.location.search);
@@ -37,6 +41,21 @@ export default function AssessmentResultPage() {
   const { user } = useAuth();
   const isSuperAdmin = user?.role === "super-admin";
 
+  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);
+  const toggle = () => {
+    setOpenNavbar((prevState) => !prevState);
+  };
+
+  // Adjust layout on screen resize
+  window.addEventListener('resize', () => {
+    setIsMobile(window.innerWidth <= 768);
+  });
+
+  const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
+
   const [assessmentId, setAssessmentId] = useState<string | undefined>(undefined);
 
   useEffect(() => {
@@ -168,26 +187,6 @@ export default function AssessmentResultPage() {
     return config;
   }, {} as ChartConfig) || {};
 
-  // Mengatur tampilan label sumbu X
-  const customizedAxisTick = (props: any) => {
-    const { x, y, payload } = props;
-    return (
-      <g transform={`translate(${x},${y})`}>
-        <text
-          x={0}
-          y={0}
-          dy={3}
-          textAnchor="end"
-          fill="#666"
-          transform="rotate(-90)"
-          fontSize={10}
-        >
-          {payload.value}
-        </text>
-      </g>
-    );
-  };
-
   // Dropdown State
   const [isOpen, setIsOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState('Hasil Assessment');
@@ -206,11 +205,11 @@ export default function AssessmentResultPage() {
   // Pie Chart Component
   function PieChartComponent({ chartData, totalScore, chartConfig }: { chartData: { aspectName: string, score: number, fill: string }[], totalScore: number, chartConfig: ChartConfig }) {
     return (
-      <div className="flex flex-col w-full border-none">
+      <div className="flex lg:flex-col w-full border-none">
         <div className="flex-1 pb-0 w-72">
           <ChartContainer
             config={chartConfig}
-            className="-ml-6 aspect-square max-h-64"
+            className="-ml-6 -mb-6 lg:mb-6 aspect-square max-h-60 lg:max-h-64"
           >
             <PieChart>
               <ChartTooltip
@@ -234,7 +233,7 @@ export default function AssessmentResultPage() {
                       fill="black"
                       textAnchor="middle"
                       dominantBaseline="middle"
-                      fontSize={14}
+                      className="text-xs lg:text-md"
                     >
                       {chartData[index]?.score || ""}
                     </text>
@@ -255,7 +254,7 @@ export default function AssessmentResultPage() {
                           <tspan
                             x={viewBox.cx}
                             y={viewBox.cy}
-                            className="fill-foreground text-3xl font-bold"
+                            className="fill-foreground text-2xl lg:text-3xl font-bold"
                           >
                             {totalScore.toLocaleString()}
                           </tspan>
@@ -270,7 +269,7 @@ export default function AssessmentResultPage() {
         </div>
 
         {/* Legend */}
-        <div className="grid grid-cols-2 gap-x-4 text-xs">
+        <div className="flex flex-col lg:grid lg:grid-cols-2 gap-x-4 text-xs justify-center gap-2 lg:gap-0">
           <div className="flex flex-col gap-2">
             {chartData.slice(0, 3).map((entry, index) => (
               <div key={index} className="flex items-center gap-2">
@@ -297,13 +296,32 @@ export default function AssessmentResultPage() {
       </div>
     );
   }
+  // Mengatur tampilan label sumbu X
+  const customizedAxisTick = (props: any) => {
+    const { x, y, payload } = props;
+    return (
+      <g transform={`translate(${x},${y})`}>
+        <text
+          x={0}
+          y={0}
+          dy={3}
+          textAnchor="end"
+          fill="#666"
+          transform="rotate(-90)"
+          className="lg:text-[0.6rem] text-[0.3rem]"
+        >
+          {payload.value.slice(0, 3)}
+        </text>
+      </g>
+    );
+  };
 
   // Bar Chart Component
   function BarChartComponent({ barChartData, barChartConfig }: { barChartData: { subAspectName: string, score: number, fill: string, aspectId: string, aspectName: string }[], barChartConfig: ChartConfig }) {
     return (
       <div className="w-full h-full">
         <ChartContainer config={barChartConfig}>
-          <BarChart accessibilityLayer data={barChartData} margin={{ top: 5, bottom: 128, left: -20 }}>
+          <BarChart accessibilityLayer data={barChartData} margin={{ top: 5, left: -40 }}>
             <CartesianGrid vertical={false} horizontal={true} />
             <XAxis
               dataKey="subAspectName"
@@ -313,11 +331,10 @@ export default function AssessmentResultPage() {
               interval={0}
               tick={customizedAxisTick}
             />
-            <YAxis 
-            domain={[0, 5]} 
-            tickFormatter={(value) => value.toFixed(1)}
-            ticks={[0, 0,5, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]} 
-          />
+            <YAxis
+              domain={[0, 5]}
+              tickCount={6}
+            />
             <ChartTooltip
               cursor={false}
               content={({ active, payload }) => {
@@ -355,7 +372,7 @@ export default function AssessmentResultPage() {
         html2canvas: {
           scale: 2,
           width: 1510,
-          height: pdfContainer.scrollHeight, 
+          height: pdfContainer.scrollHeight,
         },
         jsPDF: {
           unit: 'pt',
@@ -391,9 +408,78 @@ export default function AssessmentResultPage() {
 
   return (
     <Card className="flex flex-row w-full h-full border-none shadow-none" id="pdfContainer">
-      <div className="flex flex-col w-fit h-fit border-r shadow-none -mt-6 pt-6">
-        <p className="font-bold mb-4 text-lg">Tingkatan Level Maturitas</p>
+      <AppHeader
+        openNavbar={isLeftSidebarOpen}
+        toggle={toggleLeftSidebar}
+        toggleLeftSidebar={toggleLeftSidebar}
+      />
+      {isMobile && (
+        <LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
+          <LeftSheetContent className="h-full w-75 overflow-auto">
+            <ScrollArea className="h-full w-75 rounded-md p-2">
+              <Label className="text-gray-800 p-5 text-sm font-normal">Tingkatan Level Maturitas</Label>
+              <div className="flex flex-col w-64 h-fit border-none shadow-none -mt-6 pt-6">
+                <div className="flex flex-col mr-2 h-full">
+                  <p className="font-bold mb-4 text-lg">Tingkatan Level Maturitas</p>
+                  {[
+                    { level: 5, colorVar: '--levelFive-color', title: 'Implementasi Optimal', details: ['Otomatisasi', 'Terintegrasi', 'Membudaya'], textColor: 'white' },
+                    { level: 4, colorVar: '--levelFour-color', title: 'Implementasi Terkelola', details: ['Terorganisir', 'Review Berkala', 'Berkelanjutan'], textColor: 'white' },
+                    { level: 3, colorVar: '--levelThree-color', title: 'Implementasi Terdefinisi', details: ['Terorganisir', 'Konsisten', 'Review Berkala'], textColor: 'white' },
+                    { level: 2, colorVar: '--levelTwo-color', title: 'Implementasi Berulang', details: ['Terorganisir', 'Tidak Konsisten', 'Berulang'], textColor: 'white' },
+                    { level: 1, colorVar: '--levelOne-color', title: 'Implementasi Awal', details: ['Tidak Terukur', 'Tidak Konsisten', 'Risiko Tinggi'], textColor: 'white' }
+                  ].map(({ level, colorVar, title, details }) => (
+                    <div key={level} className="flex flex-row h-full border-none">
+                      <div
+                        className="w-20 h-20 text-white font-medium text-lg flex justify-center items-center"
+                        style={{ background: `var(${colorVar})` }}
+                      >
+                        <p className="text-center">Level {level}</p>
+                      </div>
+                      <div className="flex flex-col items-start justify-center p-2">
+                        <p className="text-xs font-bold whitespace-nowrap">{title}</p>
+                        {details.map((detail) => (
+                          <p key={detail} className="text-xs">{detail}</p>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Total verified score */}
+                <div className="pt-14">
+                  {selectedItem === 'Hasil Assessment' ? (
+                    <>
+                      <div className="flex flex-row h-16 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
+                        <p className="text-lg">Nilai Maturitas</p>
+                        <span className="text-xl">{totalScore}</span>
+                      </div>
+                      <div className="flex flex-row h-16 font-semibold justify-between items-center gap-2 pl-8 pr-6 text-white -ml-6" style={getScoreStyleClass(Number(totalScore), true)}>
+                        <p className="text-lg">Level Maturitas</p>
+                        <span className="ml-2 text-xl">{getScoreStyleClass(Number(totalScore), true).descLevel}</span>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="flex flex-row h-16 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
+                        <p className="text-lg">Nilai Maturitas</p>
+                        <span className="text-xl">{totalVerifiedScore}</span>
+                      </div>
+                      <div className="flex flex-row h-16 font-semibold justify-between items-center gap-2 pl-8 pr-6 text-white -ml-6" style={getScoreStyleClass(Number(totalVerifiedScore), true)}>
+                        <p className="text-lg">Level Maturitas</p>
+                        <span className="ml-2 text-xl">{getScoreStyleClass(Number(totalVerifiedScore), true).descLevel}</span>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+            </ScrollArea>
+          </LeftSheetContent>
+        </LeftSheet>
+      )}
+
+      <div className="hidden md:block lg:flex flex-col w-fit h-fit border-r shadow-none -mt-6 pt-6">
         <div className="flex flex-col mr-2 h-full">
+          <p className="font-bold mb-4 text-lg">Tingkatan Level Maturitas</p>
           {[
             { level: 5, colorVar: '--levelFive-color', title: 'Implementasi Optimal', details: ['Otomatisasi', 'Terintegrasi', 'Membudaya'], textColor: 'white' },
             { level: 4, colorVar: '--levelFour-color', title: 'Implementasi Terkelola', details: ['Terorganisir', 'Review Berkala', 'Berkelanjutan'], textColor: 'white' },
@@ -433,7 +519,7 @@ export default function AssessmentResultPage() {
             </>
           ) : (
             <>
-              <div className="flex flex-row h-16 mt-12 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
+              <div className="flex flex-row h-16 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
                 <p className="text-lg">Nilai Maturitas</p>
                 <span className="text-xl">{totalVerifiedScore}</span>
               </div>
@@ -446,8 +532,8 @@ export default function AssessmentResultPage() {
         </div>
       </div>
 
-      <Card className="flex flex-col w-full h-fit border-none shadow-none -mt-6 -mr-5 bg-stone-50 overflow-hidden">
-        <div className="flex flex-col w-full h-fit mb-6 justify-center items-start bg-white p-4 border-b">
+      <Card className="flex flex-col w-screen h-fit border-none shadow-none -mt-6 lg:-mr-5 lg:-ml-0 -mx-3 bg-stone-50 overflow-hidden">
+        <div className="flex flex-col w-full h-fit mb-4 justify-center items-start bg-white p-4 border-b">
           {/* Konten Header */}
           <div className="flex justify-between items-center w-full">
             {isSuperAdmin ? (
@@ -459,17 +545,17 @@ export default function AssessmentResultPage() {
                   <TbChevronLeft size={20} className="mr-1" />
                   Kembali
                 </button>
-                <p className="text-2xl font-bold">Detail Hasil Asesmen</p>
+                <p className="text-md lg:text-2xl font-bold">Detail Hasil Asesmen</p>
                 <p className="text-xs text-muted-foreground">Kelola dan Pantau Semua Permohonan Asesmen Dengan Mudah</p>
               </div>
             ) : (
               <div className="flex flex-col">
-                <p className="text-2xl font-bold">Dasboard Hasil Tingkat Kematangan Keamanan Cyber</p>
+                <p className="text-md lg:text-2xl font-bold">Dasboard Hasil Tingkat Kematangan Keamanan Cyber</p>
                 <p className="text-xs text-muted-foreground">Kelola dan Pantau Semua Permohonan Asesmen Dengan Mudah</p>
               </div>
             )}
 
-            <div className="flex flex-row gap-2" id="button-print">
+            <div className="hidden lg:flex flex-row gap-2" id="button-print">
               <div className="flex">
                 <DropdownMenu>
                   <DropdownMenuTrigger
@@ -505,7 +591,7 @@ export default function AssessmentResultPage() {
 
         {isSuperAdmin &&
           <Card className="flex flex-col h-full mb-6 justify-center items-start mx-4">
-            <div className="flex lg:flex-row flex-col text-xs h-full w-full justify-between p-6">
+            <div className="flex lg:flex-row flex-col text-xs h-full w-full justify-between p-6 gap-4 lg:gap-0">
               <div className="flex flex-col gap-4">
                 <div>
                   <p className="text-muted-foreground">Nama Responden</p>
@@ -578,8 +664,8 @@ export default function AssessmentResultPage() {
         {selectedItem === 'Hasil Assessment' ? (
           <>
             {/* Score Table */}
-            <p className="text-lg font-bold px-4">Tabel Nilai Hasil Assessment</p>
-            <Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden text-center mx-4">
+            <Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden lg:mx-4">
+              <p className="text-sm lg:text-lg font-bold p-2 border-b">Tabel Nilai Hasil Assessment</p>
               <table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
                 <thead>
                   <tr>
@@ -587,13 +673,13 @@ export default function AssessmentResultPage() {
                       <th
                         key={aspect.id}
                         colSpan={2}
-                        className="text-center font-normal bg-white border border-gray-200 p-4 w-1/5"
+                        className="text-start font-normal bg-white border border-gray-200 p-2 lg:p-4 w-1/5 whitespace-nowrap"
                       >
                         <div className="flex flex-col items-start">
-                          <p className="text-sm text-black">{aspect.name}</p>
+                          <p className="text-[0.6rem] lg:text-sm text-black">{aspect.name}</p>
                           <span
                             className={clsx(
-                              "text-3xl font-bold",
+                              "text-sm lg:text-3xl font-bold",
                             )}
                             style={getScoreStyleClass(getAspectScore(aspect.id))}
                           >
@@ -610,11 +696,11 @@ export default function AssessmentResultPage() {
                       {aspectsData?.data?.map((aspect) => (
                         <React.Fragment key={aspect.id}>
                           {/* Sub-aspect Name Column (No Right Border) */}
-                          <td className="text-xs text-black p-2 border-t border-l border-b border-gray-200 w-full text-left">
+                          <td className="text-[0.33rem] md:text-[0.5rem] lg:text-xs text-black p-1 py-0 lg:py-2 border-t border-l border-b border-gray-200 w-full text-left">
                             {aspect.subAspects[rowIndex]?.name || ""}
                           </td>
                           {/* Sub-aspect Score Column (No Left Border and w-fit for flexible width) */}
-                          <td className="text-sm font-bold text-right p-2 border-t border-b border-r border-gray-200 w-fit">
+                          <td className="text-[0.4rem] lg:text-sm font-bold text-right p-1 lg:p-2 border-t border-b border-r border-gray-200 w-fit">
                             {aspect.subAspects[rowIndex] ? formatScore(getSubAspectScore(aspect.subAspects[rowIndex].id)) : ""}
                           </td>
                         </React.Fragment>
@@ -628,8 +714,8 @@ export default function AssessmentResultPage() {
         ) : (
           <>
             {/* Verified Result Table */}
-            <p className="text-lg font-bold px-4">Tabel Nilai Hasil Assessment Terverifikasi</p>
-            <Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden border-y text-center mx-4">
+            <Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden border-y lg:mx-4">
+              <p className="text-sm lg:text-lg font-bold p-2 border-b">Tabel Nilai Hasil Assessment Terverifikasi</p>
               <table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
                 <thead>
                   <tr>
@@ -637,13 +723,13 @@ export default function AssessmentResultPage() {
                       <th
                         key={aspect.id}
                         colSpan={2}
-                        className="text-center font-normal bg-white border border-gray-200 p-4 w-1/5"
+                        className="text-start font-normal bg-white border border-gray-200 p-2 lg:p-4 w-1/5 whitespace-nowrap"
                       >
                         <div className="flex flex-col items-start">
-                          <p className="text-sm text-black">{aspect.name}</p>
+                          <p className="text-[0.6rem] lg:text-sm text-black">{aspect.name}</p>
                           <span
                             className={clsx(
-                              "text-3xl font-bold",
+                              "text-sm lg:text-3xl font-bold",
                             )}
                             style={getScoreStyleClass(getVerifiedAspectScore(aspect.id))}
                           >
@@ -660,11 +746,11 @@ export default function AssessmentResultPage() {
                       {aspectsData?.data?.map((aspect) => (
                         <React.Fragment key={aspect.id}>
                           {/* Sub-aspect Name Column (No Right Border) */}
-                          <td className="text-xs text-black p-2 border-t border-l border-b border-gray-200 w-full text-left">
+                          <td className="text-[0.33rem] md:text-[0.5rem] lg:text-xs text-black p-1 py-0 lg:py-2 border-t border-l border-b border-gray-200 w-full text-left">
                             {aspect.subAspects[rowIndex]?.name || ""}
                           </td>
                           {/* Sub-aspect Score Column (No Left Border and w-fit for flexible width) */}
-                          <td className="text-sm font-bold text-right p-2 border-t border-b border-r border-gray-200 w-fit">
+                          <td className="text-[0.4rem] lg:text-sm font-bold text-right p-1 lg:p-2 border-t border-b border-r border-gray-200 w-fit">
                             {aspect.subAspects[rowIndex] ? formatScore(getVerifiedSubAspectScore(aspect.subAspects[rowIndex].id)) : ""}
                           </td>
                         </React.Fragment>
@@ -677,13 +763,13 @@ export default function AssessmentResultPage() {
           </>
         )}
 
-        <Card className="flex flex-row lg:flex-row gap-4 border-none shadow-none mx-4 bg-transparent">
+        <Card className="flex flex-col lg:flex-row gap-4 border-none shadow-none lg:mx-4 bg-transparent">
           {/* Bar Chart */}
           {selectedItem === 'Hasil Assessment' ? (
             <>
               <Card className="w-full">
                 <CardHeader className="items-start">
-                  <CardTitle className="text-lg">Diagram Nilai Hasil Assessment</CardTitle>
+                  <CardTitle className="text-sm lg:text-lg">Diagram Nilai Hasil Assessment</CardTitle>
                 </CardHeader>
                 <CardContent>
                   <BarChartComponent barChartData={sortedBarChartData} barChartConfig={barChartConfig} />
@@ -694,7 +780,7 @@ export default function AssessmentResultPage() {
             <>
               <Card className="w-full">
                 <CardHeader className="items-start">
-                  <CardTitle className="text-lg">Diagram Nilai Hasil Assessment Terverifikasi</CardTitle>
+                  <CardTitle className="text-sm lg:text-lg">Diagram Nilai Hasil Assessment Terverifikasi</CardTitle>
                 </CardHeader>
                 <CardContent>
                   <BarChartComponent barChartData={sortedVerifiedBarChartData} barChartConfig={barChartConfig} />
@@ -705,10 +791,7 @@ export default function AssessmentResultPage() {
 
           {/* Pie Chart */}
           {selectedItem === 'Hasil Assessment' ? (
-            <Card className="flex flex-col w-64">
-              <CardHeader className="items-start pb-0">
-                <CardTitle className="text-lg">Diagram Lingkaran</CardTitle>
-              </CardHeader>
+            <Card className="flex flex-col w-full lg:w-64">
               <CardContent>
                 <PieChartComponent
                   chartData={chartData}
@@ -718,10 +801,7 @@ export default function AssessmentResultPage() {
               </CardContent>
             </Card>
           ) : (
-            <Card className="flex flex-col w-64">
-              <CardHeader className="items-start pb-0">
-                <CardTitle className="text-lg">Diagram Lingkaran Terverifikasi</CardTitle>
-              </CardHeader>
+            <Card className="flex flex-col w-full lg:w-64">
               <CardContent>
                 <PieChartComponent
                   chartData={verifiedChartData}