Skip to content

Commit

Permalink
Develop (#403)
Browse files Browse the repository at this point in the history 
* 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

* [#399] Add arrow into chart carousel

* [#399] Fix case sidebar overflow height
  • Loading branch information
@wayangalihpratama
wayangalihpratama authored Jan 27, 2025
1 parent 687bef4 commit 8d1fb38
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 60 deletions.
20 changes: 11 additions & 9 deletions frontend/src/pages/cases/layout/CaseWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,17 @@ const CaseSidebar = ({ step, caseId }) => {
)?.value;

return (
<Steps
direction="vertical"
items={sidebarItems}
className="case-step-wrapper"
onChange={(val) =>
navigate(`/case/${caseId}/${stepPath[`step${val + 1}`].label}`)
}
current={findStepPathValue ? findStepPathValue - 1 : 1}
/>
<div className="case-step-container">
<Steps
direction="vertical"
items={sidebarItems}
className="case-step-wrapper"
onChange={(val) =>
navigate(`/case/${caseId}/${stepPath[`step${val + 1}`].label}`)
}
current={findStepPathValue ? findStepPathValue - 1 : 1}
/>
</div>
);
};

Expand Down
98 changes: 50 additions & 48 deletions frontend/src/pages/cases/layout/case-wrapper.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,71 +11,73 @@
z-index: 2;
overflow: auto;

.case-step-wrapper {
.case-step-container {
min-height: 100vh;
padding-bottom: 75px !important;
padding-bottom: 75px;

.ant-steps-item {
// not active
.ant-steps-item-tail::after {
border: 1px solid #e1e0da;
}
.case-step-wrapper {
.ant-steps-item {
// not active
.ant-steps-item-tail::after {
border: 1px solid #e1e0da;
}

.ant-steps-item-icon {
border: 1px solid #e3e3e3;
.ant-steps-item-icon {
border: 1px solid #e3e3e3;

.ant-steps-icon {
color: #979797;
text-align: center;
font-family: "RocGrotesk";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
}

.ant-steps-icon {
color: #979797;
text-align: center;
.ant-steps-item-title {
font-family: "RocGrotesk";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
}

.ant-steps-item-title {
font-family: "RocGrotesk";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.ant-steps-item-description {
color: #475467;
font-family: "TabletGothic";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

// when active
&.ant-steps-item-active {
.ant-steps-item-tail::after {
border: 1px solid $primary-color;
.ant-steps-item-description {
color: #475467;
font-family: "TabletGothic";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.ant-steps-item-icon {
border: 1px solid $primary-color;
box-shadow: 0 0 2px 4px rgba(203, 244, 220, 1);
background: #eaf2f2;
// when active
&.ant-steps-item-active {
.ant-steps-item-tail::after {
border: 1px solid $primary-color;
}

.ant-steps-icon {
color: $primary-color;
.ant-steps-item-icon {
border: 1px solid $primary-color;
box-shadow: 0 0 2px 4px rgba(203, 244, 220, 1);
background: #eaf2f2;

.ant-steps-icon {
color: $primary-color;
}
}
}
}

// when finished
&.ant-steps-item-finish {
.ant-steps-item-icon {
border: 1px solid #48d985;
background: #48d985;
// when finished
&.ant-steps-item-finish {
.ant-steps-item-icon {
border: 1px solid #48d985;
background: #48d985;

.ant-steps-icon {
color: #fff;
.ant-steps-icon {
color: #fff;
}
}
}
}
Expand Down
33 changes: 30 additions & 3 deletions frontend/src/pages/cases/steps/AssessImpactMitigationStrategies.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import React, { useCallback, useEffect, useState, useMemo } from "react";
import React, {
useCallback,
useEffect,
useState,
useMemo,
useRef,
} from "react";
import { useNavigate } from "react-router-dom";
import {
stepPath,
Expand Down Expand Up @@ -36,6 +42,7 @@ import {
determineDecimalRound,
} from "../../../lib";
import { thousandFormatter } from "../../../components/chart/options/common";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";

/**
* STEP 4
Expand All @@ -57,6 +64,8 @@ const AssessImpactMitigationStrategies = ({
const [percentageSensitivity, setPercentageSensitivity] = useState(true);
const [adjustedValues, setAdjustedValues] = useState({});

const carouselChartRef = useRef(null);

const [messageApi, contextHolder] = message.useMessage();

// initial load adjusted income target
Expand Down Expand Up @@ -433,8 +442,26 @@ const AssessImpactMitigationStrategies = ({
</Card>
</Col>
{/* Carousel */}
<Col span={24}>
<Carousel autoplay>
<Col span={24} className="carousel-container">
<div className="carousel-arrows-wrapper">
<div className="arrow-left">
<Button
className="button-arrow-carousel"
type="link"
icon={<LeftOutlined />}
onClick={() => carouselChartRef?.current?.prev()}
/>
</div>
<div className="arrow-right">
<Button
className="button-arrow-carousel"
type="link"
icon={<RightOutlined />}
onClick={() => carouselChartRef?.current?.next()}
/>
</div>
</div>
<Carousel autoplay ref={carouselChartRef}>
<div>
<ChartBiggestImpactOnIncome />
</div>
Expand Down
21 changes: 21 additions & 0 deletions frontend/src/pages/cases/steps/steps.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,27 @@
}

#assess-impact-mitigation-strategies {
.carousel-container {
width: 100%;
position: relative;

.carousel-arrows-wrapper {
position: absolute;
z-index: 2;
height: 100%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: -12px;

.button-arrow-carousel {
border-radius: 22px;
background: #01625f;
color: #fff;
}
}
}
.ant-carousel {
.slick-dots {
li {
Expand Down

0 comments on commit 8d1fb38

Please sign in to comment.