update: pagination for assessment when choose aspect on sidebar, and update card using shadcn

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

@@ -1,8 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import {
-  Card,
   Flex,
-  // Pagination,
   Stack,
   Text,
   Loader,
@@ -10,6 +8,12 @@ import {
   CloseButton,
   Group,
 } from "@mantine/core";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from "@/shadcn/components/ui/card";
 import { Textarea } from "@/shadcn/components/ui/textarea";
 import { Label } from "@/shadcn/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group";
@@ -77,6 +81,9 @@ export default function AssessmentPage() {
   const [unansweredQuestions, setUnansweredQuestions] = useState(0);
   const [validationModalOpen, setValidationModalOpen] = useState(false);
   const [exceededFileName, setExceededFileName] = useState("");
+  const [currentPagePerSubAspect, setCurrentPagePerSubAspect] = useState<{ [subAspectId: string]: number }>({});
+  const currentPage = currentPagePerSubAspect[selectedSubAspectId || ""] || 1;
+  const questionsPerPage = 10;
 
   // Fetch aspects and sub-aspects
   const aspectsQuery = useQuery({
@@ -511,11 +518,6 @@ export default function AssessmentPage() {
     }
   };
 
-  // Handle pagination
-  const handlePageChange = (newPage: number) => {
-    setPage(newPage);
-  };
-
   // Render conditions
   if (isLoading) {
     return <Loader />;
@@ -529,26 +531,43 @@ export default function AssessmentPage() {
     );
   }
 
-  const totalQuestions = data?.data?.length || 0;
-  const totalPages = Math.ceil(totalQuestions / limit);
-
   if (!assessmentId) {
     return (
-      <Card shadow="sm" p="lg" radius="md" withBorder>
+      <Card>
+        <CardContent>
           <Text color="red" className="text-center">
             Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
           </Text>
+        </CardContent>
       </Card>
     );
   }
 
   const startIndex = (page - 1) * limit;
-  const endIndex = startIndex + limit;
-  const paginatedQuestions = data?.data.slice(startIndex, endIndex) || [];
 
-  const filteredQuestions = paginatedQuestions.filter((question) => {
-    return question.subAspectId === selectedSubAspectId; // Misalnya, jika `question` memiliki `subAspectId`
-  });
+  // Fungsi untuk mengubah halaman pada sub-aspek
+  const handlePageChange = (subAspectId: string, newPage: number) => {
+    setCurrentPagePerSubAspect((prev) => ({
+      ...prev,
+      [subAspectId]: newPage,
+    }));
+  };
+
+  // Filter pertanyaan berdasarkan halaman saat ini
+  const filteredQuestions = data?.data?.filter((question) => {
+    // Filter berdasarkan sub-aspek yang dipilih
+    return question.subAspectId === selectedSubAspectId;
+  })?.slice(
+    (currentPage - 1) * questionsPerPage,
+    currentPage * questionsPerPage
+  ) || [];
+
+  // Perbarui jumlah halaman untuk sub-aspek saat ini
+  const totalQuestionsInSubAspect = data?.data?.filter(
+    (question) => question.subAspectId === selectedSubAspectId
+  )?.length || 0;
+  
+  const totalPages = Math.ceil(totalQuestionsInSubAspect / questionsPerPage);
 
   return (
     <div>
@@ -828,17 +847,28 @@ export default function AssessmentPage() {
               </div>
 
               <div className="mt-4 flex justify-center">
-                <Pagination page={page} totalPages={totalPages} onPageChange={handlePageChange}>
-                  <Text className="text-xs m-0">Halaman {page} dari {totalPages}</Text>
+                <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 shadow="sm" p="md" radius="md" withBorder>
-                  <Stack>
-                    {/* Skor Aspek */}
-                    <div>
+                <Card>
+                  <CardHeader>
+                    <Text className="font-extrabold text-center">Nilai Sementara</Text>
+                  </CardHeader>
+
+                  <CardContent>
+                    <CardDescription>
                       {filteredAspects.length > 0 ? (
                         filteredAspects.map((aspect) => {
                           const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
@@ -868,15 +898,12 @@ export default function AssessmentPage() {
                       ) : (
                         <Text className="text-base text-gray-400">Data aspek ini kosong</Text>
                       )}
-                    </div>
+                    </CardDescription>
 
                     {/* Garis pembatas */}
-                    <div>
-                      <hr className="border-t-2 border-gray-300 w-full mx-auto" />
-                    </div>
+                    <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);
@@ -906,12 +933,14 @@ export default function AssessmentPage() {
                     ) : (
                       <Text className="text-sm text-gray-400">Data sub-aspek ini kosong</Text>
                     )}
-                    </div>
-                  </Stack>
+                  </CardContent>
 
                   {/* Tombol Selesai */}
-                  <div className="mt-6">
-                    <button onClick={handleFinishClick} className="bg-blue-500 text-white font-bold rounded-md py-2 w-full text-sm">
+                  <div className="mt-4 mb-4 ml-4 mr-4">
+                    <button
+                      onClick={handleFinishClick}
+                      className="bg-blue-500 text-white font-bold rounded-md py-2 w-full text-sm"
+                    >
                       Selesai
                     </button>
                   </div>