[#391] Initial layout for EnterIncomeData visual

frontend/src/pages/cases/Case.js

@@ -57,6 +57,7 @@ const renderPage = (key, navigate) => {
 
 const SegmentTabsWrapper = ({ children, setbackfunction, setnextfunction }) => {
   const currentCase = CurrentCaseState.useState((s) => s);
+  const { activeSegmentId } = CaseUIState.useState((s) => s.general);
   const childrenCount = React.Children.count(children);
 
   const segmentTabItems = useMemo(() => {
@@ -96,6 +97,16 @@ const SegmentTabsWrapper = ({ children, setbackfunction, setnextfunction }) => {
           type="card"
           items={segmentTabItems}
           tabBarGutter={5}
+          activeKey={activeSegmentId || currentCase?.segments?.[0]?.id || null}
+          onChange={(val) => {
+            CaseUIState.update((s) => ({
+              ...s,
+              general: {
+                ...s.general,
+                activeSegmentId: val,
+              },
+            }));
+          }}
         />
       </Col>
       {childrenCount > 1 &&

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

@@ -1,7 +1,35 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { Card, Row, Col } from "antd";
+import { CaseUIState, CurrentCaseState } from "../store";
 
 const EnterIncomeDataVisual = () => {
-  return <div>EnterIncomeDataVisual</div>;
+  const { activeSegmentId } = CaseUIState.useState((s) => s.general);
+  const currentCase = CurrentCaseState.useState((s) => s);
+
+  const currentSegment = useMemo(
+    () =>
+      currentCase.segments.find((segment) => segment.id === activeSegmentId) ||
+      null,
+    [currentCase.segments, activeSegmentId]
+  );
+
+  if (!currentSegment) {
+    return <div>Failed to load current segment data</div>;
+  }
+
+  return (
+    <Row gutter={[20, 20]}>
+      <Col span={24}>
+        <Card>{currentSegment.target}</Card>
+      </Col>
+      <Col span={24}>
+        <Card>Household Income Bar Chart</Card>
+      </Col>
+      <Col span={24}>
+        <Card>Household Income Table</Card>
+      </Col>
+    </Row>
+  );
 };
 
 export default EnterIncomeDataVisual;

frontend/src/pages/cases/store/case_ui.js

@@ -3,6 +3,7 @@ import { Store } from "pullstate";
 const defaultCaseUIState = {
   general: {
     enableEditCase: true,
+    activeSegmentId: null,
   },
   caseButton: {
     loading: false,