Merge branch 'develop' into feature/44-handle-onfinish-save-case-profile

akvo · Oct 23, 2023 · b3dba5a · b3dba5a
2 parents e75eff7 + 11fdd8b
commit b3dba5a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/frontend/src/pages/cases/cases.scss b/frontend/src/pages/cases/cases.scss
@@ -41,6 +41,12 @@
               }
             }
           }
+          .ceret-up {
+            color: green;
+          }
+          .ceret-down {
+            color: red;
+          }
         }
       }
     }

diff --git a/frontend/src/pages/cases/components/IncomeDriverDataEntry.js b/frontend/src/pages/cases/components/IncomeDriverDataEntry.js
@@ -16,6 +16,8 @@ import {
   InfoCircleFilled,
   CaretRightOutlined,
   CaretDownOutlined,
+  CaretUpFilled,
+  CaretDownFilled,
 } from "@ant-design/icons";
 import { api } from "../../../lib";
 
@@ -28,6 +30,9 @@ const Questions = ({
   childrens,
   indent = 0,
 }) => {
+  const [currentValue, setCurrentValue] = useState(0);
+  const [feasibleValue, setFeasibleValue] = useState(0);
+  const [percentage, setPercentage] = useState(0);
   const [collapsed, setCollapsed] = useState(question_type !== "aggregator");
   const [disabled, setDisabled] = useState(childrens.length > 0);
   const unitName = unit
@@ -36,6 +41,13 @@ const Questions = ({
     .map((u) => units?.[u])
     .join(" / ");
 
+  useEffect(() => {
+    if (currentValue && feasibleValue) {
+      const percent = (feasibleValue / currentValue - 1) * 100;
+      setPercentage(percent);
+    }
+  }, [currentValue, feasibleValue, setPercentage]);
+
   return (
     <>
       <Row
@@ -72,16 +84,39 @@ const Questions = ({
             <Switch size="small" onChange={() => setDisabled(!disabled)} />
           ) : null}
         </Col>
-        <Col span={5}>
+        <Col span={4}>
           <Form.Item name={`current-${id}`} className="current-feasible-field">
-            <InputNumber style={{ width: "100%" }} disabled={disabled} />
+            <InputNumber
+              style={{ width: "100%" }}
+              disabled={disabled}
+              onChange={setCurrentValue}
+            />
           </Form.Item>
         </Col>
-        <Col span={5}>
+        <Col span={4}>
           <Form.Item name={`feasible-${id}`} className="current-feasible-field">
-            <InputNumber style={{ width: "100%" }} disabled={disabled} />
+            <InputNumber
+              style={{ width: "100%" }}
+              disabled={disabled}
+              onChange={setFeasibleValue}
+            />
           </Form.Item>
         </Col>
+        <Col span={2}>
+          <Space>
+            {percentage > 0 ? (
+              <CaretUpFilled className="ceret-up" />
+            ) : (
+              <CaretDownFilled className="ceret-down" />
+            )}
+            <div className={percentage > 0 ? "ceret-up" : "ceret-down"}>
+              {feasibleValue < currentValue
+                ? -percentage.toFixed(0)
+                : percentage.toFixed(0)}
+              %
+            </div>
+          </Space>
+        </Col>
       </Row>
       {!collapsed
         ? childrens.map((child) => (