[#391] Add income target card on EnterIncomeData page

akvo · Jan 16, 2025 · b36db59 · b36db59
1 parent 636d436
commit b36db59
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/frontend/src/pages/cases/Case.js b/frontend/src/pages/cases/Case.js
@@ -18,6 +18,7 @@ import {
 } from "./steps";
 import { EnterIncomeDataVisual } from "./components";
 import "./steps/steps.scss";
+import { isEmpty } from "lodash";
 
 const Loading = () => (
   <div className="loading-container">
@@ -60,6 +61,19 @@ const SegmentTabsWrapper = ({ children, setbackfunction, setnextfunction }) => {
   const { activeSegmentId } = CaseUIState.useState((s) => s.general);
   const childrenCount = React.Children.count(children);
 
+  // set default active segmentId
+  useEffect(() => {
+    if (!activeSegmentId && !isEmpty(currentCase.segments)) {
+      CaseUIState.update((s) => ({
+        ...s,
+        general: {
+          ...s.general,
+          activeSegmentId: currentCase.segments?.[0]?.id || null,
+        },
+      }));
+    }
+  }, [activeSegmentId, currentCase.segments]);
+
   const segmentTabItems = useMemo(() => {
     return currentCase.segments.map((segment) => ({
       label: segment.name,

diff --git a/frontend/src/pages/cases/components/EnterIncomeDataVisual.js b/frontend/src/pages/cases/components/EnterIncomeDataVisual.js
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
-import { Card, Row, Col } from "antd";
+import { Card, Row, Col, Space } from "antd";
 import { CaseUIState, CurrentCaseState } from "../store";
+import { thousandFormatter } from "../../../components/chart/options/common";
 
 const EnterIncomeDataVisual = () => {
   const { activeSegmentId } = CaseUIState.useState((s) => s.general);
@@ -18,9 +19,19 @@ const EnterIncomeDataVisual = () => {
   }
 
   return (
-    <Row gutter={[20, 20]}>
+    <Row gutter={[20, 20]} className="income-data-visual-container">
       <Col span={24}>
-        <Card>{currentSegment.target}</Card>
+        <Card className="income-target-wrapper">
+          <Space direction="vertical">
+            <div className="label">Living income benchmark for a household</div>
+            <Space align="center">
+              <div className="value">
+                {thousandFormatter(currentSegment.target, 2)}
+              </div>
+              <div className="label"> / year</div>
+            </Space>
+          </Space>
+        </Card>
       </Col>
       <Col span={24}>
         <Card>Household Income Bar Chart</Card>

diff --git a/frontend/src/pages/cases/steps/steps.scss b/frontend/src/pages/cases/steps/steps.scss
@@ -187,3 +187,29 @@
     }
   }
 }
+
+.income-data-visual-container {
+  padding: 40px 0;
+
+  .income-target-wrapper {
+    border-radius: 20px;
+    background: #01625f;
+    color: #fff;
+
+    .label {
+      font-family: "TabletGothic";
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    .value {
+      font-family: "RocGrotesk";
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+    }
+  }
+}