[#391] Init UnderstandIncomeGap page

akvo · Jan 16, 2025 · 075992e · 075992e
1 parent 4486f47
commit 075992e
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 3 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -426,4 +426,14 @@
     border-radius: 0px 0px 20px 20px;
     background: #fff;
   }
+
+  &.bordered {
+    .ant-card-head {
+      border: 1px solid #dfdfdf;
+    }
+    .ant-card-body {
+      border: 1px solid #dfdfdf;
+      border-top: none;
+    }
+  }
 }
diff --git a/frontend/src/pages/cases/components/VisualCardWrapper.js b/frontend/src/pages/cases/components/VisualCardWrapper.js
@@ -2,10 +2,10 @@ import React from "react";
 import { Row, Col, Card, Space, Button } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 
-const VisualCardWrapper = ({ children, title }) => {
+const VisualCardWrapper = ({ children, title, bordered = false }) => {
   return (
     <Card
-      className="visual-card-wrapper"
+      className={`visual-card-wrapper ${bordered ? "bordered" : ""}`}
       title={
         <Row align="middle" gutter={[8, 8]}>
           <Col span={18}>

diff --git a/frontend/src/pages/cases/steps/UnderstandIncomeGap.js b/frontend/src/pages/cases/steps/UnderstandIncomeGap.js
@@ -1,6 +1,8 @@
 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";
 
 /**
  * STEP 3
@@ -26,7 +28,53 @@ const UnderstandIncomeGap = ({ setbackfunction, setnextfunction }) => {
     }
   }, [setbackfunction, setnextfunction, backFunction, nextFunction]);
 
-  return <div>UnderstandIncomeGap</div>;
+  return (
+    <Row id="understand-income-gap" gutter={[24, 24]}>
+      <Col span={24} className="header-wrapper">
+        <Space direction="vertical">
+          <div className="title">Explanatory text</div>
+          <div className="description">
+            This page enables you to explore various scenarios by adjusting your
+            income drivers in different ways across your segments. This allows
+            you to understand the potential paths towards improving farmer
+            household income
+          </div>
+        </Space>
+      </Col>
+      <Col span={24}>
+        <Card className="card-section-wrapper">
+          Understand current income and the income gap
+        </Card>
+      </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>
+      </Col>
+      {/* EOL Chart */}
+    </Row>
+  );
 };
 
 export default UnderstandIncomeGap;
diff --git a/frontend/src/pages/cases/steps/steps.scss b/frontend/src/pages/cases/steps/steps.scss
@@ -218,3 +218,58 @@
     }
   }
 }
+
+#understand-income-gap {
+  .header-wrapper {
+    .title {
+      color: #01625f;
+      font-family: "RocGrotesk";
+      font-size: 40px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 52px;
+    }
+
+    .description {
+      font-family: "TabletGothic";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 28px;
+      letter-spacing: -0.32px;
+    }
+  }
+
+  .card-section-wrapper {
+    border-radius: 20px;
+    background: #01625f;
+    color: #fff;
+    font-family: "RocGrotesk";
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 32px;
+  }
+
+  .card-visual-wrapper {
+    border-radius: 20px;
+
+    .section-title {
+      color: #01625f;
+      font-family: "RocGrotesk";
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+    }
+
+    .section-description {
+      // color: #454545;
+      font-family: "TabletGothic";
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 157.15%;
+    }
+  }
+}