update: index lazy for save flagged question on local storage

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

@@ -221,16 +221,36 @@ export default function AssessmentPage() {
   const currentAspect = aspects.find(aspect => aspect.aspectId === selectedAspectId);
   const filteredSubAspects = currentAspect ? currentAspect.subAspects : [];
 
+  // Inisialisasi flaggedQuestions dari localStorage saat komponen dimuat
+  useEffect(() => {
+    const savedFlags = localStorage.getItem("flaggedQuestions");
+    if (savedFlags) {
+      setFlaggedQuestions(JSON.parse(savedFlags));
+    }
+  }, []);
+
+  // Simpan perubahan flag ke localStorage setiap kali flaggedQuestions berubah
+  useEffect(() => {
+    if (Object.keys(flaggedQuestions).length > 0) {
+      localStorage.setItem("flaggedQuestions", JSON.stringify(flaggedQuestions));
+    }
+  }, [flaggedQuestions]);
+
   // Mutation function to toggle flag
   const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
     mutationFn: toggleFlagAnswer,
     onSuccess: (response) => {
       if (response && response.answer) {
         const { answer } = response;
-        setFlaggedQuestions((prevFlags) => ({
+        setFlaggedQuestions((prevFlags) => {
-          ...prevFlags,
+          const newFlags = {
-          [answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
+            ...prevFlags,
-        }));
+            [answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
+          };
+          // Simpan perubahan ke localStorage
+          localStorage.setItem("flaggedQuestions", JSON.stringify(newFlags));
+          return newFlags;
+        });
       }
     },
 
@@ -594,10 +614,15 @@ export default function AssessmentPage() {
                           {/* Action Icon/Flag */}
                           <ActionIcon
                             onClick={() => {
-                              setFlaggedQuestions((prevFlags) => ({
+                              setFlaggedQuestions((prevFlags) => {
-                                ...prevFlags,
+                                const newFlags = {
-                                [questionId]: !prevFlags[questionId],
+                                  ...prevFlags,
-                              }));
+                                  [questionId]: !prevFlags[questionId],
+                                };
+                                // Simpan perubahan ke localStorage
+                                localStorage.setItem("flaggedQuestions", JSON.stringify(newFlags));
+                                return newFlags;
+                              });
                               toggleFlagMutation.mutate(questionId);
                             }}
                             title={
@@ -608,7 +633,6 @@ export default function AssessmentPage() {
                             color={flaggedQuestions[questionId] ? "red" : "white"}
                             style={{
                               margin: "2px 10px",
-                              border: "1px gray solid",
                               borderRadius: "4px",
                               backgroundColor: flaggedQuestions[questionId] ? "red" : "white",
                             }}
@@ -753,14 +777,14 @@ export default function AssessmentPage() {
                       <button
                         className={`w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
                           ${answers[questionId] ? "bg-blue-500 text-white" : "bg-transparent text-black"}
-                          ${flaggedQuestions[questionId] ? "border-black" : ""}`}
+                          ${flaggedQuestions[questionId] ? "border-gray-50" : ""}`}
                         onClick={() => scrollToQuestion(questionId)}
                       >
                         {questionNumber}
                       </button>
 
                       {flaggedQuestions[questionId] && (
-                        <div className="absolute top-0 right-0 w-0 h-0 border-b-[20px] border-b-transparent border-r-[20px] border-r-black rounded-e-md" />
+                        <div className="absolute top-0 right-0 w-0 h-0 border-b-[20px] border-b-transparent border-r-[20px] border-r-red-600 rounded-e-md" />
                       )}
                     </div>
                   );