update: add confirmation for button finish

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

@@ -23,6 +23,7 @@ import {
   toggleFlagAnswer,
 } from "@/modules/assessmentManagement/queries/assessmentQueries";
 import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb";
+import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
 import { useState, useRef, useEffect } from "react";
 
 const getQueryParam = (param: string) => {
@@ -58,7 +59,7 @@ export default function AssessmentPage() {
     [key: string]: boolean;
   }>({});
   const fileInputRef = useRef<HTMLInputElement>(null);
-
+  const [modalOpen, setModalOpen] = useState(false);
   const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
   const [assessmentId, setAssessmentId] = useState<string | null>(null);
   const [answers, setAnswers] = useState<{ [key: string]: string }>({});
@@ -74,6 +75,10 @@ export default function AssessmentPage() {
     getQuestionsAllQueryOptions(page, limit)
   );
 
+  const handleFinishClick = () => {
+    setModalOpen(true);
+  };
+
   useEffect(() => {
     const id = getQueryParam("id");
 
@@ -99,7 +104,7 @@ export default function AssessmentPage() {
     }
   }, [aspectsQuery.data, selectedSubAspectId, data?.data]);
 
-  const handleFinishClick = () => {
+  const handleConfirmFinish = () => {
     if (assessmentId) {
       // Menggunakan history.pushState untuk mengubah URL tanpa reload
       const newUrl = `/assessmentResult?id=${assessmentId}`;
@@ -558,6 +563,14 @@ export default function AssessmentPage() {
                     Selesai
                   </button>
                 </div>
+
+                {/* Modal untuk konfirmasi selesai asesmen */}
+                <FinishAssessmentModal
+                  opened={modalOpen}
+                  onClose={() => setModalOpen(false)}
+                  onConfirm={handleConfirmFinish}
+                  assessmentId={assessmentId}
+                />
               </Card>
             </div>
           </Flex>