added logic for preventing navigation on dirty form

src/components/Questionnaire/QuestionnaireForm.tsx

@@ -11,6 +11,8 @@ import { Button } from "@/components/ui/button";
 
 import Loading from "@/components/Common/Loading";
 
+import { usePreventNavigation } from "@/hooks/usePreventNavigation";
+
 import routes from "@/Utils/request/api";
 import useMutation from "@/Utils/request/useMutation";
 import useQuery from "@/Utils/request/useQuery";
@@ -61,6 +63,7 @@ export function QuestionnaireForm({
   onCancel,
   facilityId,
 }: QuestionnaireFormProps) {
+  const [isDirty, setIsDirty] = useState(false);
   const [questionnaireForms, setQuestionnaireForms] = useState<
     QuestionnaireFormState[]
   >([]);
@@ -82,6 +85,8 @@ export function QuestionnaireForm({
     { silent: true },
   );
 
+  usePreventNavigation({ isDirty });
+
   useEffect(() => {
     if (!isInitialized && questionnaireSlug) {
       const questionnaire =
@@ -100,6 +105,19 @@ export function QuestionnaireForm({
     }
   }, [questionnaireData, isInitialized, questionnaireSlug]);
 
+  useEffect(() => {
+    const hasEdits = questionnaireForms.some((form) =>
+      form.responses.some(
+        (response) =>
+          response.values.length > 0 ||
+          response.note ||
+          response.body_site ||
+          response.method,
+      ),
+    );
+    setIsDirty(hasEdits);
+  }, [questionnaireForms]);
+
   if (isQuestionnaireLoading) {
     return <Loading />;
   }

src/hooks/usePreventNavigation.ts

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+
+interface UsePreventNavigationOptions {
+  isDirty: boolean;
+  message?: string;
+}
+
+export function usePreventNavigation({
+  isDirty,
+  message = "You have unsaved changes. Are you sure you want to leave?",
+}: UsePreventNavigationOptions) {
+  useEffect(() => {
+    if (!isDirty) return;
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = "";
+      return "";
+    };
+
+    const preventNavigation = (e: Event) => {
+      const confirmLeave = window.confirm(message);
+
+      if (!confirmLeave) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.history.replaceState(null, "", window.location.pathname);
+        return false;
+      }
+    };
+
+    const handleLinkClick = (e: MouseEvent) => {
+      const link = (e.target as HTMLElement).closest("a");
+      if (link) preventNavigation(e);
+    };
+
+    // Common options for event listeners
+    const listenerOptions = { capture: true };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener("popstate", preventNavigation, listenerOptions);
+    document.addEventListener("click", handleLinkClick, listenerOptions);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener(
+        "popstate",
+        preventNavigation,
+        listenerOptions,
+      );
+      document.removeEventListener("click", handleLinkClick, listenerOptions);
+    };
+  }, [isDirty, message]);
+}