Develop (#402)

* New User Journey (#388)

* Feature/user journey step 1

* [#383] Move current case page into old-cases

* [#383] Init new case page

* [#383] Load cases data in new case page

* [#383] New cases page

* [#383] Implement new case filter

* [#383] Implement new case settings modal visual

* [#383] Handle case settings behaviour with new state management

* [#383] Handle save new case settings without segments value

* [#383] Support add segments when create case settings

* [#383] Support segments payload on update case endpoint

* [#383] Handle new case setting with segments correctly

* [#383] Breakdown case settings into components

* [#383] Initial new case detail page with sidebar

* [#383] Handle load case detail in edit case page

* [#383] Set step sidebar as fixed sidebar

* [#383] Render case title and case settings form in CaseWrapper

* [#383] Refactor the export function, static, & lib to correct place

* [#383] Load current case settings value correctly

* [#385] Refine step path and load related page

* [#385] Handle close case setting modal after saved success

* [#385] Init set income target page layout

* [#385] Refine segment tabs as a wrapper to be reused in another page

* [#385] Load region options in set an income target page

* [#385] Load income target value and source when select region

* [#385] Add segment id into form name for SetIncomeTarget

* [#385] Fix yarn lint

* [#385] Finalize set income target state update

* [#385] Load initial value for SetIncomeTarget

* [#385] Add Back/Next button on parent and send the props into children

* [#385] Handle change hh adult/child value

* [#385] Handle save SetIncomeTarget

* [#383] Handle number of farmers field on segment

* Feature/389 user journey breakdown step pages into different url (#390)

* [#389] Handle EnterIncomeData page button function

* [#389] Handle case button on UnderstandIncomeGap

* [#389] Handle case button on AssessImpactMitigationStrategies

* [#389] Handle case button on ClosingGap

* [#389] Handle EnterIncomeData right element (visuals) position in SegmentTabsWrapper

* [#389] Get commodity questions

* [#389] Add Total Income section

* [#389] Fetch and regroup driver questions to follow new design layout

* [#389] Move renderPercentageTag fn into lib file

* [#389] Initial render driver questions

* [#389] Render unit name and current/feasible value field

* [#389] Handle disable input/lock when questions breakdown

* [#389] Handle onValuesChange of income drivers

* [#389] Handle total value in section, parent, and general total income

* [#389] Handle income percentage value

* [#389] Init handle save EnterIncomeData

* [#389] Handle save EnterIncomeData value properly

* Feature/391 user journey segment page lib per page (#392)

* [#391] Move enableEditCase state into general CaseUIState

* [#391] Initial layout for EnterIncomeData visual

* [#391] Add income target card on EnterIncomeData page

* [#391] Create VisualCardWrapper component

* [#391] Render household income bar chart

* [#391] Init UnderstandIncomeGap page

* [#391] Create visuals component

* [#391] Fetch questions on wrapper

* [#391] Create dashboardData state

* [#391] Render ChartIncomeGap

* [#391] Create CompareIncomeGap visualization

* [#391] Handle new user journey when prev case doesn't have any segments yet

* [#391] Debugging with test full case data for current complete new user journey

* [#391] Fix EnterIncomeData page onLoad & onValuesChange

* [#391] Refine EnterIncomeData calculation

* [#391] Handle enableEditCase state

* [#391] Fix EnterIncomeData value & dashboardData calculation

* [#391] Add answers & benchmark into segment put endpoint obj

* [#391] Create ChartExploreIncomeDriversBreakdown

* [#393] Initial AssessImpactMitigationStrategies page

* [#391] Create biggest impact on income & monetary contribution chart

* [#393] Initial binning driver form

* [#393] Set sensitivity analysis value into state

* Feature/395 user journey update state management (#396)

* [#395] Create line chart for sensitivity analysis page

* [#395] Create sensitivity analysis heatmap chart

* [#395] Create adjust income target section

* [#395] Handle save sensitivity analysis config

* [#395] Handle initial load sensitivity analysis data

* [#395] Fix onLoad sensitivity analysis bugs

* [#395] Initial adjut income target modal

* [#395] Add style into adjust income target modal

* [#395] Handle save adjusted income target

* [#395] Move segment tabs wrapper into a layout component

* [#395] Initial scenario modeling page

* [#395] Initial render driver question for scenario modeling

* [#395] Add segment selector into scenario modeling page

* [#395] Refactor scenario modeling input

* [#395] Create tree select dropdown for scenario modeling

* [#395] Manage scenario form detail value & scenario driver

* [#395] Manage scenario income driver initial and on change value

* [#398] Fix react duplicate keys warning

* [#398] Update segment answer when scenario driver changed

* [#398] Create new dashboard data value

* [#398] Try to recalculate the income drivers on ScenarioModelingForm

* [#399] Update step1 wording

* [#399] Enable show label in ChartCalculatedHhIncome

* [#399] Enable export functionality

* [#399] Create ExploreDataFromOtherStudies table

* [#399] Rotate chart xAxis label

* [#399] Enable show label and export btn in Understand income gap page

* [#399] Create ExploreIncomeLevelsForDifferentCommodities chart

* [#399] Update assess impact page

* [#399] Update adjust income target modal step

* [#399] Fix case loading & default segment selected

* [#399] Don't sum parent value onLoad if have value

* [#399] Fix visual content on small screen

frontend/src/pages/cases/Case.js

@@ -180,6 +180,10 @@ const Case = () => {
             setLoading(false);
           }, 100);
         });
+    } else {
+      setTimeout(() => {
+        setLoading(false);
+      }, 100);
     }
   }, [caseId, currentCase.id, navigate]);
 

frontend/src/pages/cases/components/EnterIncomeDataForm.js

@@ -389,8 +389,17 @@ const EnterIncomeDataDriver = ({
           : allChildrensValues.reduce((acc, { value }) => acc + value, 0);
 
         const parentQuestionField = `${fieldKey}-${question?.parent}`;
+        const parentQuestionValue =
+          initialDriverValues?.[parentQuestionField] || 0;
+
         if (parentQuestion) {
-          form.setFieldValue(parentQuestionField, sumAllChildrensValues);
+          // use parent value if they already have value
+          const formValue =
+            parentQuestionValue || parentQuestionValue === 0
+              ? parentQuestionValue
+              : sumAllChildrensValues;
+          // EOL use parent value if they already have value
+          form.setFieldValue(parentQuestionField, formValue);
           updateSectionTotalValues(
             commodity.commodity_type,
             fieldName,

frontend/src/pages/cases/components/VisualCardWrapper.js

@@ -75,7 +75,7 @@ const VisualCardWrapper = ({
       className={`visual-card-wrapper ${bordered ? "bordered" : ""}`}
       title={
         <Row align="middle" gutter={[8, 8]} wrap>
-          <Col span={16}>
+          <Col span={14}>
             <Space align="center">
               <div className="title">{title}</div>
               {tooltipText ? (
@@ -87,7 +87,7 @@ const VisualCardWrapper = ({
               )}
             </Space>
           </Col>
-          <Col span={8} align="end">
+          <Col span={10} align="end">
             {setShowLabel ? (
               <Button
                 size="small"

frontend/src/pages/cases/layout/case-wrapper.scss

@@ -9,8 +9,12 @@
     height: 95vh;
     padding: 24px 32px;
     z-index: 2;
+    overflow: auto;
 
     .case-step-wrapper {
+      min-height: 100vh;
+      padding-bottom: 75px !important;
+
       .ant-steps-item {
         // not active
         .ant-steps-item-tail::after {
@@ -94,7 +98,7 @@
   .case-button-wrapper {
     background: #fff;
     border-top: 1px solid #e1e0da;
-    padding: 24px;
+    padding: 14px 24px;
     position: fixed;
     bottom: 0;
     right: 0;

frontend/src/pages/cases/visualizations/ChartCalculatedHouseholdIncome.js

@@ -57,7 +57,7 @@ const ChartCalculatedHouseholdIncome = () => {
         type="COLUMN-BAR"
         data={chartData}
         loading={!chartData.length}
-        height={window.innerHeight * 0.35}
+        height={window.innerHeight * 0.4}
         extra={{
           axisTitle: { y: `Income (${currentCase.currency})` },
           xAxisLabel: {