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

@@ -2,7 +2,7 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 import {
   Card,
   Flex,
-  Pagination,
+  // Pagination,
   Stack,
   Text,
   Loader,
@@ -13,6 +13,9 @@ import {
 import { Textarea } from "@/shadcn/components/ui/textarea";
 import { Label } from "@/shadcn/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group";
+import {
+  Pagination,
+} from "@/shadcn/components/ui/pagination-assessment";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import {
   submitAssessmentMutationOptions,
@@ -527,6 +530,7 @@ export default function AssessmentPage() {
   }
 
   const totalQuestions = data?.data?.length || 0;
+  const totalPages = Math.ceil(totalQuestions / limit);
 
   if (!assessmentId) {
     return (
@@ -803,6 +807,9 @@ export default function AssessmentPage() {
           {/* Navigasi dan Pagination */}
           <div className="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>
 
               {/* Navigasi (Number of Questions) */}
               <div className="grid grid-cols-5 gap-2">
@@ -833,11 +840,9 @@ export default function AssessmentPage() {
               </div>
 
               <div className="mt-4 flex justify-center">
-                <Pagination
-                  value={page}
-                  total={Math.ceil(totalQuestions / limit)}
-                  onChange={handlePageChange}
-                />
+                <Pagination page={page} totalPages={totalPages} onPageChange={handlePageChange}>
+                  <Text className="text-xs m-0">Halaman {page} dari {totalPages}</Text>
+                </Pagination>
               </div>
 
               {/* Skor Aspek dan Sub-Aspek */}