[#391] Create visuals component

frontend/src/pages/cases/Case.js

@@ -16,7 +16,7 @@ import {
   AssessImpactMitigationStrategies,
   ClosingGap,
 } from "./steps";
-import { EnterIncomeDataVisual } from "./components";
+import { EnterIncomeDataVisual } from "./visuals";
 import "./steps/steps.scss";
 import { isEmpty } from "lodash";
 

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

@@ -4,6 +4,5 @@ export { default as CaseFilter } from "./CaseFilter";
 export { default as CaseSettings } from "./CaseSettings";
 export { default as SegmentForm } from "./SegmentForm";
 export { default as CaseForm } from "./CaseForm";
-export { default as EnterIncomeDataVisual } from "./EnterIncomeDataVisual";
 export { default as EnterIncomeDataForm } from "./EnterIncomeDataForm";
 export { default as VisualCardWrapper } from "./VisualCardWrapper";

frontend/src/pages/cases/steps/UnderstandIncomeGap.js

@@ -2,7 +2,11 @@ import React, { useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { stepPath, CurrentCaseState } from "../store";
 import { Row, Col, Card, Space } from "antd";
-import { VisualCardWrapper } from "../components";
+import {
+  ChartIncomeGap,
+  CompareIncomeGap,
+  ChartIncomeDriverAcrossSegments,
+} from "../visuals";
 
 /**
  * STEP 3
@@ -48,29 +52,13 @@ const UnderstandIncomeGap = ({ setbackfunction, setnextfunction }) => {
       </Col>
       {/* Chart */}
       <Col span={24}>
-        <Card className="card-visual-wrapper">
-          <Row gutter={[20, 20]} align="middle">
-            <Col span={16}>
-              <VisualCardWrapper title="Income gap" bordered>
-                Chart
-              </VisualCardWrapper>
-            </Col>
-            <Col span={8}>
-              <Space direction="vertical">
-                <div className="section-title">
-                  What is the current income of the farmers and their income
-                  gap?
-                </div>
-                <div className="section-description">
-                  This graph helps you explore the composition of household
-                  income and identify the gap between current income and the
-                  income target. Use it to uncover variations across segments
-                  and consider where tailored strategies might be needed.
-                </div>
-              </Space>
-            </Col>
-          </Row>
-        </Card>
+        <ChartIncomeGap />
+      </Col>
+      <Col span={24}>
+        <CompareIncomeGap />
+      </Col>
+      <Col span={24}>
+        <ChartIncomeDriverAcrossSegments />
       </Col>
       {/* EOL Chart */}
     </Row>

frontend/src/pages/cases/steps/steps.scss

@@ -220,6 +220,8 @@
 }
 
 #understand-income-gap {
+  margin-bottom: 100px;
+
   .header-wrapper {
     .title {
       color: #01625f;

frontend/src/pages/cases/visuals/ChartIncomeDriverAcrossSegments.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Card, Col, Row, Space } from "antd";
+import { VisualCardWrapper } from "../components";
+
+const ChartIncomeDriverAcrossSegments = () => {
+  return (
+    <Card className="card-visual-wrapper">
+      <Row gutter={[20, 20]} align="middle">
+        <Col span={16}>
+          <VisualCardWrapper title="Income drivers across segments" bordered>
+            Chart
+          </VisualCardWrapper>
+        </Col>
+        <Col span={8}>
+          <Space direction="vertical">
+            <div className="section-title">Explore your income drivers</div>
+            <div className="section-description">
+              This graph lets you explore and compare income drivers across
+              segments, showing their current values and the gaps to feasible
+              levels. It helps you spot differences and identify where progress
+              is possible.
+            </div>
+          </Space>
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default ChartIncomeDriverAcrossSegments;

frontend/src/pages/cases/visuals/ChartIncomeGap.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Card, Col, Row, Space } from "antd";
+import { VisualCardWrapper } from "../components";
+
+const ChartIncomeGap = () => {
+  return (
+    <Card className="card-visual-wrapper">
+      <Row gutter={[20, 20]} align="middle">
+        <Col span={16}>
+          <VisualCardWrapper title="Income gap" bordered>
+            Chart
+          </VisualCardWrapper>
+        </Col>
+        <Col span={8}>
+          <Space direction="vertical">
+            <div className="section-title">
+              What is the current income of the farmers and their income gap?
+            </div>
+            <div className="section-description">
+              This graph helps you explore the composition of household income
+              and identify the gap between current income and the income target.
+              Use it to uncover variations across segments and consider where
+              tailored strategies might be needed.
+            </div>
+          </Space>
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default ChartIncomeGap;

frontend/src/pages/cases/visuals/CompareIncomeGap.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Card, Col, Row, Space, Table } from "antd";
+
+const CompareIncomeGap = () => {
+  return (
+    <Card className="card-visual-wrapper">
+      <Row gutter={[20, 20]} align="middle">
+        <Col span={8}>
+          <Space direction="vertical">
+            <div className="section-title">
+              Compare the income gap per segment with the number of farmers each
+              segment represents.
+            </div>
+            <div className="section-description">
+              This table gives an overview of the number of farmers in each
+              segment, and the income gap at current and feasible levels. Use it
+              to determine focus segments.
+            </div>
+          </Space>
+        </Col>
+        <Col span={16}>
+          <Table columns={[]} dataSource={[]} />
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default CompareIncomeGap;

frontend/src/pages/cases/components/EnterIncomeDataVisual.js → frontend/src/pages/cases/visuals/EnterIncomeDataVisual.js

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { Card, Row, Col, Space, Tag } from "antd";
 import { CaseUIState, CurrentCaseState, CaseVisualState } from "../store";
 import { thousandFormatter } from "../../../components/chart/options/common";
-import { VisualCardWrapper } from ".";
+import { VisualCardWrapper } from "../components";
 import Chart from "../../../components/chart";
 
 const EnterIncomeDataVisual = () => {

frontend/src/pages/cases/visuals/index.js

@@ -0,0 +1,4 @@
+export { default as EnterIncomeDataVisual } from "./EnterIncomeDataVisual";
+export { default as ChartIncomeGap } from "./ChartIncomeGap";
+export { default as CompareIncomeGap } from "./CompareIncomeGap";
+export { default as ChartIncomeDriverAcrossSegments } from "./ChartIncomeDriverAcrossSegments";