From 82153591721b137d02a1d03d230e02fc70b5f080 Mon Sep 17 00:00:00 2001
From: Andrew Crowther <acrowthe3388@gmail.com>
Date: Thu, 4 Dec 2025 14:09:23 -0500
Subject: [PATCH 1/6] CARDS-2813: Improve progress bar progression - Remove
 buffer for current page - Add a half page pagging to the start and end to
 show some progress on the first page and when saving

---
 .../src/questionnaire/FormPagination.jsx      | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
index f7e73f7bff..f74691909e 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
@@ -77,7 +77,11 @@ function FormPagination (props) {
   let [ activePage, setActivePage ] = useState(0);
   let [ direction, setDirection ] = useState(1);
   let [ nextActivePage, setNextActivePage ] = useState();
+  let [ progress, setProgress ] = useState(0);
   const DIRECTION_NEXT = 1, DIRECTION_PREV = -1;
+  // The amount of the progress bar that should be complete on page 1 and incomplete on an unsaved last page
+  // Expressed as a multiple of a normal page size
+  const PROGRESS_BAR_PADDING = 0.5;
 
   let previousEntryType;
   let questionIndex = 0;
@@ -207,6 +211,19 @@ function FormPagination (props) {
     }
   }, [saveInProgress, pendingSubmission, disableProgress, nextActivePage, direction, activePage]);
 
+  useEffect(() => {
+    if (activePage != null && pages != null) {
+      // The pagination should be divided into multiple sections:
+      // - lastValidPage() sections for page by page progress
+      // - 1 padding section for the initial progress on the first page
+      // - 1 padding section for when the last page has been saved
+      // The MaterialUI progress bar expects progress to be out of 100
+      const pageSize = 100 / (lastValidPage() + (2 * PROGRESS_BAR_PADDING));
+      const paddingSize = pageSize * PROGRESS_BAR_PADDING;
+      setProgress(paddingSize + (pageSize * activePage) + (savedLastPage ? paddingSize : 0))
+    }
+  }, [activePage, pages, savedLastPage])
+
   let saveButton =
     <Button
       startIcon={activePage === lastValidPage() ? doneIcon : undefined}
@@ -246,8 +263,6 @@ function FormPagination (props) {
   }
   stepperClasses = stepperClasses.join(' ');
 
-  let progressAdjustment = (condition) => (condition && variant == "progress" ? 1 : 0);
-
   return (
     enabled
     ?
@@ -265,23 +280,16 @@ function FormPagination (props) {
       ?
         <MobileStepper
           variant={variant}
-          // Offset back bar 1 to create a "current page" region.
-          // If the final page has been saved, progress the front bar to complete
-          activeStep={activePage + progressAdjustment(lastSaveStatus && savedLastPage)}
-          // Change the color of the back bar
+          activeStep={activePage}
           slotProps={{
             progress: {
-              classes: {
-                bar2Buffer: classes.formStepperBufferBar,
-                dashed: classes.formStepperBackgroundBar,
-              },
-              variant: "buffer",
-              valueBuffer: (activePage + 1) / (lastValidPage() + 1) * 100,
+              // Manually control the progress bar value
+              value: progress
             }
           }}
           className={stepperClasses}
-          // base 0 to base 1, plus 1 for the "current page" region when variant is "progress"
-          steps={lastValidPage() + 1 + progressAdjustment(true)}
+
+          steps={lastValidPage() + 1}
           nextButton={saveButton}
           backButton={backButton}
         />

From df991553b1fa46f0fc992e24642ec7df3472216b Mon Sep 17 00:00:00 2001
From: Andrew Crowther <acrowthe3388@gmail.com>
Date: Thu, 4 Dec 2025 14:36:41 -0500
Subject: [PATCH 2/6] CARDS-2813: Improve progress bar progression - Remove
 unused styles - Adjust how stub size is defined

---
 .../src/questionnaire/FormPagination.jsx      | 19 +++++++++----------
 .../src/questionnaire/QuestionnaireStyle.jsx  | 10 ----------
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
index f74691909e..f901b3fc7d 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
@@ -79,9 +79,10 @@ function FormPagination (props) {
   let [ nextActivePage, setNextActivePage ] = useState();
   let [ progress, setProgress ] = useState(0);
   const DIRECTION_NEXT = 1, DIRECTION_PREV = -1;
-  // The amount of the progress bar that should be complete on page 1 and incomplete on an unsaved last page
-  // Expressed as a multiple of a normal page size
-  const PROGRESS_BAR_PADDING = 0.5;
+  // The amount of the progress bar that should be complete on page 1
+  // Expressed as a multiple of a normal page size.
+  // The remainder (1 - stub size) will be used as a completion buffer on the last page
+  const INITIAL_PROGRESS_STUB = 0.7;
 
   let previousEntryType;
   let questionIndex = 0;
@@ -213,14 +214,12 @@ function FormPagination (props) {
 
   useEffect(() => {
     if (activePage != null && pages != null) {
-      // The pagination should be divided into multiple sections:
-      // - lastValidPage() sections for page by page progress
-      // - 1 padding section for the initial progress on the first page
-      // - 1 padding section for when the last page has been saved
       // The MaterialUI progress bar expects progress to be out of 100
-      const pageSize = 100 / (lastValidPage() + (2 * PROGRESS_BAR_PADDING));
-      const paddingSize = pageSize * PROGRESS_BAR_PADDING;
-      setProgress(paddingSize + (pageSize * activePage) + (savedLastPage ? paddingSize : 0))
+      const pageSize = 100 / (lastValidPage() + 1);
+      // Use some of 1 "page" worth of progression for the initial stub on the first page
+      // The rest will be used for the completion buffer on the last page
+      const stubSize = pageSize * INITIAL_PROGRESS_STUB;
+      setProgress(stubSize + (pageSize * activePage) + (savedLastPage ? pageSize - stubSize : 0))
     }
   }, [activePage, pages, savedLastPage])
 
diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/QuestionnaireStyle.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/QuestionnaireStyle.jsx
index 49daf7e045..bf3a9fdb67 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/QuestionnaireStyle.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/QuestionnaireStyle.jsx
@@ -496,16 +496,6 @@ const questionnaireStyle = theme => ({
         margin: theme.spacing(1),
         minWidth: "fit-content",
     },
-    formStepperBufferBar: {
-        backgroundColor: theme.palette.primary.main,
-        opacity: "0.3",
-    },
-    formStepperBackgroundBar: {
-        backgroundColor: theme.palette.primary.light,
-        opacity: "0.2",
-        animation: "none",
-        backgroundImage: "none",
-    },
     actionsMenu: {
         border: "1px solid " + theme.palette.divider,
         borderRadius: theme.spacing(3),

From 222540a35e790a77d05bfd4cb6aeed7be94117de Mon Sep 17 00:00:00 2001
From: Andrew Crowther <acrowthe3388@gmail.com>
Date: Fri, 5 Dec 2025 12:52:38 -0500
Subject: [PATCH 3/6] CARDS-2813: Improve progress bar progression Fix divide
 by 0 error leading ot progress bar initializing at 100%

---
 .../src/main/frontend/src/questionnaire/FormPagination.jsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
index f901b3fc7d..2f6f594fc7 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
@@ -213,9 +213,10 @@ function FormPagination (props) {
   }, [saveInProgress, pendingSubmission, disableProgress, nextActivePage, direction, activePage]);
 
   useEffect(() => {
-    if (activePage != null && pages != null) {
+    let numPages = lastValidPage();
+    if (activePage != null && pages != null && numPages >= 0) {
       // The MaterialUI progress bar expects progress to be out of 100
-      const pageSize = 100 / (lastValidPage() + 1);
+      const pageSize = 100 / (numPages + 1);
       // Use some of 1 "page" worth of progression for the initial stub on the first page
       // The rest will be used for the completion buffer on the last page
       const stubSize = pageSize * INITIAL_PROGRESS_STUB;

From d8eecabde616cf4b6d26a35854e169574ffb2e6c Mon Sep 17 00:00:00 2001
From: Andrew Crowther <acrowthe3388@gmail.com>
Date: Mon, 8 Dec 2025 08:53:58 -0500
Subject: [PATCH 4/6] CARDS-2813: Improve progress bar progression Rename
 variable

---
 .../src/main/frontend/src/questionnaire/FormPagination.jsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
index 2f6f594fc7..ba778cd967 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
@@ -213,10 +213,10 @@ function FormPagination (props) {
   }, [saveInProgress, pendingSubmission, disableProgress, nextActivePage, direction, activePage]);
 
   useEffect(() => {
-    let numPages = lastValidPage();
-    if (activePage != null && pages != null && numPages >= 0) {
+    let lastPage = lastValidPage();
+    if (activePage != null && pages != null && lastPage >= 0) {
       // The MaterialUI progress bar expects progress to be out of 100
-      const pageSize = 100 / (numPages + 1);
+      const pageSize = 100 / (lastPage + 1);
       // Use some of 1 "page" worth of progression for the initial stub on the first page
       // The rest will be used for the completion buffer on the last page
       const stubSize = pageSize * INITIAL_PROGRESS_STUB;

From 67389d8f9b2149b78afa8aad21278d0a81b575e0 Mon Sep 17 00:00:00 2001
From: Andrew Crowther <acrowthe3388@gmail.com>
Date: Thu, 16 Oct 2025 15:33:58 -0400
Subject: [PATCH 5/6] CARDS-2785: Form pagination should hide non-satisfied
 conditional sections - When a fetch occurs, update the pagination to hide
 non-satisfied conditionals

---
 .../src/questionnaire/FormPagination.jsx      | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
index ba778cd967..18d9c38329 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
@@ -77,6 +77,8 @@ function FormPagination (props) {
   let [ activePage, setActivePage ] = useState(0);
   let [ direction, setDirection ] = useState(1);
   let [ nextActivePage, setNextActivePage ] = useState();
+  let [ numberOfSteps, setNumberOfSteps ] = useState();
+  let [ activeStep, setActiveStep ] = useState();
   let [ progress, setProgress ] = useState(0);
   const DIRECTION_NEXT = 1, DIRECTION_PREV = -1;
   // The amount of the progress bar that should be complete on page 1
@@ -89,6 +91,23 @@ function FormPagination (props) {
   let pagesResults = {};
   let pagesArray = [];
 
+  useEffect(() => {
+    let newNumberOfSteps = 0;
+    let newActiveStep = 0;
+    pages.forEach(page => {
+      if (page.canBeVisible) {
+        newNumberOfSteps++;
+      }
+    })
+    for (let i = 0; i < activePage; i++) {
+      if (pages[i].canBeVisible) {
+        newActiveStep++;
+      }
+    }
+    setNumberOfSteps(newNumberOfSteps);
+    setActiveStep(newActiveStep);
+  }, [activePage, pages])
+
   useEffect(() => {
     setPagesCallback(null);
     Object.entries(questionnaireData)
@@ -213,16 +232,15 @@ function FormPagination (props) {
   }, [saveInProgress, pendingSubmission, disableProgress, nextActivePage, direction, activePage]);
 
   useEffect(() => {
-    let lastPage = lastValidPage();
-    if (activePage != null && pages != null && lastPage >= 0) {
+    if (activeStep != null && numberOfSteps != null) {
       // The MaterialUI progress bar expects progress to be out of 100
-      const pageSize = 100 / (lastPage + 1);
+      const pageSize = 100 / (numberOfSteps);
       // Use some of 1 "page" worth of progression for the initial stub on the first page
       // The rest will be used for the completion buffer on the last page
       const stubSize = pageSize * INITIAL_PROGRESS_STUB;
-      setProgress(stubSize + (pageSize * activePage) + (savedLastPage ? pageSize - stubSize : 0))
+      setProgress(stubSize + (pageSize * activeStep) + (savedLastPage ? pageSize - stubSize : 0))
     }
-  }, [activePage, pages, savedLastPage])
+  }, [activeStep, numberOfSteps, savedLastPage])
 
   let saveButton =
     <Button
@@ -280,7 +298,7 @@ function FormPagination (props) {
       ?
         <MobileStepper
           variant={variant}
-          activeStep={activePage}
+          activeStep={activeStep}
           slotProps={{
             progress: {
               // Manually control the progress bar value
@@ -288,8 +306,7 @@ function FormPagination (props) {
             }
           }}
           className={stepperClasses}
-
-          steps={lastValidPage() + 1}
+          steps={numberOfSteps}
           nextButton={saveButton}
           backButton={backButton}
         />

From 509425bb4b873c47a5cf5acb6428e799d80d2acb Mon Sep 17 00:00:00 2001
From: Andrew Crowther <acrowthe3388@gmail.com>
Date: Fri, 5 Dec 2025 10:45:28 -0500
Subject: [PATCH 6/6] CARDS-2785: Form pagination should hide non-satisfied
 conditional sections - Clean up current and max step calculation

---
 .../src/questionnaire/FormPagination.jsx         | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
index 18d9c38329..e66c425496 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx
@@ -92,20 +92,8 @@ function FormPagination (props) {
   let pagesArray = [];
 
   useEffect(() => {
-    let newNumberOfSteps = 0;
-    let newActiveStep = 0;
-    pages.forEach(page => {
-      if (page.canBeVisible) {
-        newNumberOfSteps++;
-      }
-    })
-    for (let i = 0; i < activePage; i++) {
-      if (pages[i].canBeVisible) {
-        newActiveStep++;
-      }
-    }
-    setNumberOfSteps(newNumberOfSteps);
-    setActiveStep(newActiveStep);
+    setNumberOfSteps(pages.filter(page => page.canBeVisible).length);
+    setActiveStep(pages.slice(0, activePage).filter(page => page.canBeVisible).length);
   }, [activePage, pages])
 
   useEffect(() => {