Develop

frontend/src/pages/cases/layout/CaseWrapper.js

@@ -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>
   );
 };
 

frontend/src/pages/cases/layout/case-wrapper.scss

@@ -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;
+              }
             }
           }
         }

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

@@ -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,
@@ -36,6 +42,7 @@ import {
   determineDecimalRound,
 } from "../../../lib";
 import { thousandFormatter } from "../../../components/chart/options/common";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 
 /**
  * STEP 4
@@ -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
@@ -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>

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

@@ -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 {