70 disable navigation to next page if not filled in fully

src/components/mobile/progression-bar.tsx

@@ -31,21 +31,39 @@ const MobileProgressionBar = ({ roles }: { roles: Section[] }) => {
         <DropdownMenuSeparator />
         <ScrollArea className="w-50 h-72 rounded-md border">
           {roles.map((section) => (
-            <Link href={section.href} key={section.id}>
-              <DropdownMenuCheckboxItem checked={section.current}>
-                {section.completed && (
-                  <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                    <CheckIcon className="h-4 w-4 text-green-500" />{" "}
-                  </div>
-                )}
-                {section.started && !section.completed ? (
-                  <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                    <DotFilledIcon className="h-4 w-4 text-orange-500" />{" "}
-                  </div>
-                ) : null}
-                {section.label}
-              </DropdownMenuCheckboxItem>
-            </Link>
+            <div key={section.id}>
+              {section.currentCompleted ? (
+                <Link href={section.href}>
+                  <DropdownMenuCheckboxItem checked={section.current}>
+                    {section.completed && (
+                      <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                        <CheckIcon className="h-4 w-4 text-green-500" />{" "}
+                      </div>
+                    )}
+                    {section.started && !section.completed ? (
+                      <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                        <DotFilledIcon className="h-4 w-4 text-orange-500" />{" "}
+                      </div>
+                    ) : null}
+                    {section.label}
+                  </DropdownMenuCheckboxItem>
+                </Link>
+              ) : (
+                <DropdownMenuCheckboxItem disabled>
+                  {section.completed && (
+                    <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                      <CheckIcon className="h-4 w-4 text-green-500" />{" "}
+                    </div>
+                  )}
+                  {section.started && !section.completed ? (
+                    <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                      <DotFilledIcon className="h-4 w-4 text-orange-500" />{" "}
+                    </div>
+                  ) : null}
+                  {section.label}
+                </DropdownMenuCheckboxItem>
+              )}
+            </div>
           ))}
         </ScrollArea>
       </DropdownMenuContent>

src/components/progression-bar.tsx

@@ -18,33 +18,62 @@ const ProgressionBar = ({ roles }: { roles: Section[] }) => {
           {roles.map((section, index) => (
             <Fragment key={section.id}>
               {/* Circle with clickable area */}
-              <Link
-                type="submit"
-                href={section.href}
-                className="relative flex items-center justify-center"
-              >
-                <div
-                  className={`mb-1 h-6 w-6 rounded-full border-2 ${
-                    section.current
-                      ? "border-custom-secondary bg-custom-primary dark:border-custom-primary dark:bg-custom-secondary"
-                      : section.completed
-                        ? "border-green-500 bg-green-500"
-                        : section.started
-                          ? "border-orange-500 bg-orange-500"
-                          : "border-gray-300"
-                  }`}
-                ></div>
-                <div
-                  className="absolute -rotate-45 whitespace-nowrap text-xs font-semibold"
-                  style={{
-                    transformOrigin: "bottom left",
-                    top: "-22px",
-                    left: "calc(100% - 0px)",
-                  }}
-                >
-                  {section.label}
-                </div>
-              </Link>
+              <div className="relative flex items-center justify-center">
+                {section.currentCompleted ? (
+                  <Link
+                    type="submit"
+                    href={section.href}
+                    className="flex items-center justify-center"
+                  >
+                    <div
+                      className={`mb-1 h-6 w-6 rounded-full border-2 ${
+                        section.current
+                          ? "border-custom-secondary bg-custom-primary dark:border-custom-primary dark:bg-custom-secondary"
+                          : section.completed
+                            ? "border-green-500 bg-green-500"
+                            : section.started
+                              ? "border-orange-500 bg-orange-500"
+                              : "border-gray-300"
+                      }`}
+                    ></div>
+                    <div
+                      className="absolute -rotate-45 whitespace-nowrap text-xs font-semibold"
+                      style={{
+                        transformOrigin: "bottom left",
+                        top: "-22px",
+                        left: "calc(100% - 0px)",
+                      }}
+                    >
+                      {section.label}
+                    </div>
+                  </Link>
+                ) : (
+                  <div>
+                    <div
+                      className={`mb-1 h-6 w-6 rounded-full border-2 ${
+                        section.current
+                          ? "border-custom-secondary bg-custom-primary dark:border-custom-primary dark:bg-custom-secondary"
+                          : section.completed
+                            ? "border-green-500 bg-green-500"
+                            : section.started
+                              ? "border-orange-500 bg-orange-500"
+                              : "border-gray-300"
+                      }`}
+                    ></div>
+                    <div
+                      className="absolute -rotate-45 whitespace-nowrap text-xs font-semibold"
+                      style={{
+                        transformOrigin: "bottom left",
+                        top: "-22px",
+                        left: "calc(100% - 0px)",
+                      }}
+                    >
+                      {section.label}
+                    </div>
+                  </div>
+                )}
+              </div>
+
               {/* Line (except for the last section) */}
               {index !== roles.length - 1 && (
                 <div

src/components/survey-questionnaire.tsx

@@ -110,23 +110,42 @@ export function SurveyQuestionnaire({
 
   // function that check if a user already has more than 1 response for a question
   function hasAnsweredAllQuestionsForRole(
-    userAnswersForRole: QuestionResult[],
+    currentAnswers: QuestionResult[],
     roleId: string,
     questions: Question[],
   ) {
-    const questionsForRole = userAnswersForRole.filter((answer) =>
-      answer.question.roles?.some((role) => role.id === roleId),
+    const totalQuestionsForRole = questions
+      .filter((question) => question.roleIds?.includes(roleId))
+      .map((question) => question.id);
+
+    // Get unique question IDs from totalQuestionsForRole
+    const uniqueQuestionIds = new Set(totalQuestionsForRole);
+
+    // Filter currentAnswersForRole to remove duplicates
+    const currentAnswersForRole = currentAnswers.filter(
+      (answer, index, self) =>
+        self.findIndex((a) => a.question.id === answer.question.id) === index &&
+        uniqueQuestionIds.has(answer.question.id),
     );
 
-    const totalQuestionsForRole = questions.filter((question) =>
-      question.roleIds?.some((role) => role === roleId),
-    ).length;
-
-    const answeredQuestionsForRole = questionsForRole.filter(
+    const answeredQuestionsForRole = currentAnswersForRole.filter(
       (answer) => answer.answerId !== undefined,
     );
 
-    return answeredQuestionsForRole.length >= totalQuestionsForRole;
+    return answeredQuestionsForRole.length >= totalQuestionsForRole.length;
+  }
+
+  function hasAnsweredAllQuestionsForCurrentRole(
+    form: ReturnType<typeof useGenerateFormAndSchema>["form"],
+  ) {
+    const formValues = form.getValues();
+
+    // count the number of undefined values in the form
+    const unansweredQuestions = Object.values(formValues).filter(
+      (value) => value === undefined,
+    );
+
+    return unansweredQuestions.length === 0;
   }
 
   const selectedRolesForProgressBar = userSelectedRoles
@@ -152,6 +171,7 @@ export function SurveyQuestionnaire({
       started: userAnswersForRole.some((answer) =>
         answer.question.roles?.some((role) => role.id === role.id),
       ),
+      currentCompleted: hasAnsweredAllQuestionsForCurrentRole(form),
     }));
 
   const ProgressionBarComponent =
@@ -171,6 +191,8 @@ export function SurveyQuestionnaire({
     }
   }
 
+  console.log(selectedRolesForProgressBar);
+
   return (
     <div>
       <Form {...form}>

src/components/survey-questions.tsx

@@ -100,7 +100,7 @@ export function SurveyQuestions({
                     : "bg-slate-100 hover:bg-slate-300 dark:bg-slate-900 dark:hover:bg-slate-700"
                 }`}
               >
-                <TableCell>
+                <TableCell className="pl-2">
                   {question.questionText}
                   <FormMessage />
                 </TableCell>

src/components/ui/button.tsx

@@ -3,7 +3,6 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "~/lib/utils";
-import type { ReactNode } from "react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",

src/models/types.ts

@@ -56,6 +56,7 @@ export interface Section {
   current: boolean;
   completed: boolean;
   started: boolean;
+  currentCompleted: boolean;
 }
 
 export type TransformedData = Record<

src/utils/role-utils.ts

@@ -25,6 +25,7 @@ export function generateRolesWithHref(
         current: false,
         completed: false,
         started: false,
+        currentCompleted: false,
       }));
 
     return availableRoles;