Finished with ticket FP-82.

package.json

@@ -5,17 +5,21 @@
   "license": "MIT",
   "repository": "github:BloomTech-Labs/labs-spa-starter",
   "dependencies": {
+    "@ant-design/icons": "^5.0.0",
     "@auth0/auth0-react": "^1.10.1",
     "@craco/craco": "^6.4.3",
+    "@reduxjs/toolkit": "^1.9.2",
     "antd": "^4.18.3",
     "aws-sdk": "^2.1142.0",
     "axios": "^0.21.4",
     "craco-less": "^1.20.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-plotly.js": "^2.4.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3"
+    "react-scripts": "4.0.3",
+    "redux-thunk": "^2.4.2"
   },
   "scripts": {
     "start": "node start.js",

src/components/common/ClientIntakeForm/ClientIntakeForm.js

@@ -6,8 +6,7 @@ import ContactPreferences from './IntakeForms/ContactPreferences';
 import Referrals from './IntakeForms/Referrals';
 import DocumentUpload from './IntakeForms/DocumentUpload';
 import EducationIntake from './IntakeForms/EducationIntake';
-import EmploymentIntake from './IntakeForms/EmploymentIntake';
-// import { submitForm } from '../../../api';
+import EmploymentIntake from './IntakeForms/Employment/EmploymentIntake';
 
 //NOTE: Inline Styles added temporarily.
 const sectionContainer = {

src/components/common/ClientIntakeForm/IntakeForms/Employment/EmploymentHistory.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Form, Typography } from 'antd';
+
+const EmploymentHistory = () => {
+  const { Text } = Typography;
+
+  return (
+    <>
+      <Form>
+        <div className="ant-form-title">
+          <h4>Employement History</h4>
+        </div>
+        <div className="ant-form-title">
+          <Text>Note: Need some clarification.</Text>
+        </div>
+        <br></br>
+      </Form>
+    </>
+  );
+};
+export default EmploymentHistory;

src/components/common/ClientIntakeForm/IntakeForms/Employment/EmploymentIntake.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Form } from 'antd';
+import EmploymentRadioEmployed from './EmploymentRadioEmployed';
+import EmploymentHistory from './EmploymentHistory';
+import EmploymentSkillCert from './EmploymentSkillCert';
+import EmploymentInterestdWork from './EmploymentInterestdWork';
+
+const EmploymentIntake = () => {
+  const [form] = Form.useForm();
+  const onFinish = values => {
+    console.log('Form Values: ', values);
+    Form.resetFields();
+  };
+
+  return (
+    <>
+      <div>
+        <div className="subsectionContainer">
+          <h2 className="subsectionHeader">Employment</h2>
+          <div className="hohContainer formStyles">
+            <Form
+              name="EmploymentIntake"
+              form={form}
+              onFinish={onFinish}
+              onSubmit={e => e.preventDefault()}
+              layout="vertical"
+            >
+              <EmploymentHistory />
+              <EmploymentRadioEmployed />
+              <EmploymentSkillCert />
+            </Form>
+            <Form
+              name="EmploymentIntakeTwo"
+              form={form}
+              onFinish={onFinish}
+              onSubmit={e => e.preventDefault()}
+              layout="vertical"
+            >
+              <EmploymentInterestdWork />
+            </Form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EmploymentIntake;

src/components/common/ClientIntakeForm/IntakeForms/Employment/EmploymentInterestdWork.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Form, Checkbox } from 'antd';
+import { useState } from 'react';
+
+const CheckboxGroup = Checkbox.Group;
+
+const options = [
+  'Sale/Retail',
+  'Fast Food',
+  'Hospitality',
+  'Warehouse',
+  'Truck Driving',
+];
+
+const EmploymentInterestdWork = () => {
+  const [checkedList, setCheckedList] = useState([]);
+
+  const handleChange = checkedList => {
+    setCheckedList(checkedList);
+  };
+  return (
+    <>
+      <Form>
+        <Form.Item label="Checkbox Group">
+          <CheckboxGroup
+            options={options}
+            value={checkedList}
+            onChange={handleChange}
+          />
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+export default EmploymentInterestdWork;

src/components/common/ClientIntakeForm/IntakeForms/Employment/EmploymentRadioEmployed.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Radio, Space } from 'antd';
+import { useState } from 'react';
+
+const EmploymentRadioEmployed = () => {
+  const [currentlyEmployedvalue, currentlyEmployedsetValue] = useState('');
+
+  return (
+    <Form>
+      <div className="ant-form-title">
+        <h4>Currently Employed ?</h4>
+      </div>
+      <Form.Item name="currentlyEmployed">
+        <Radio.Group value={currentlyEmployedvalue}>
+          <Space direction="vertical">
+            <Radio value="fulltime">Yes (Full Time)</Radio>
+            <Radio value="parttime">Yes (Part Time)</Radio>
+            <Radio value="seasonal/temp">Seasonal/Temporary Employment</Radio>
+            <Radio value={'noMentalPhysical'}>
+              No, due to physical / mental condition
+            </Radio>
+            <Radio value={'no'}>No</Radio>
+          </Space>
+        </Radio.Group>
+      </Form.Item>
+    </Form>
+  );
+};
+export default EmploymentRadioEmployed;

src/components/common/ClientIntakeForm/IntakeForms/Employment/EmploymentSkillCert.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Form, Input, Radio, Space } from 'antd';
+import { useState } from 'react';
+
+const EmploymentSkillCert = () => {
+  const [skillsCertificationsvalue, skillsCertificationssetValue] = useState(
+    ''
+  );
+
+  return (
+    <>
+      <Form>
+        <div className="ant-form-title">
+          <h4>Skills / Certifications</h4>
+        </div>
+        <Form.Item name="skillsCertifications">
+          <Radio.Group value={skillsCertificationsvalue}>
+            <Space direction="horizontal">
+              <Radio value="Yes">Yes </Radio>
+              <Radio value="No">No</Radio>
+            </Space>
+          </Radio.Group>
+        </Form.Item>
+        <div className="ant-form-title">
+          <h4>If yes, what are they?</h4>
+        </div>
+        <Form.Item>
+          <Input placeholder="List Skills Here" />
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+export default EmploymentSkillCert;

src/styles/css/styles.css

@@ -183,6 +183,11 @@
   background-color: #007fd4;
   border-color: #007fd4 !important;
 }
+.ant-checkbox-group {
+    display: flex;
+    flex-direction: column;
+    margin-right: 0;
+}
 .ant-radio-wrapper {
   color: #ffffff;
 }
@@ -424,10 +429,12 @@
 .formStyles {
   display: flex;
   justify-content: center;
+  margin-bottom: 50px;
 }
 
 .sectionLeft {
-  margin: 20px;
+  margin-left: 1.2rem;
+  color: #cdcdcd;
 }
 
 .sectionRight {
@@ -453,8 +460,19 @@
 .ant-form-item-label > label {
   color: #ffffff;
 }
-
-
+/* Employment Intake Forms styling */
+h4, .ant-form-title {
+  color: #ffffff;
+}
+#EmploymentIntake {
+  padding-right: 100px;
+}
+#EmploymentIntakeTwo {
+  padding-left: 100px;
+}
+.ant-typography {
+    color: #ffffff;
+}
 /* finances styling */
 
 .ant-form-item-control-input-content {
@@ -910,6 +928,9 @@ td.ant-table-column-sort {
   font-size: 1.2rem;
   font-family: 'Times New Roman', Times, serif;
 }
+.employmentSectionTitles{
+  color: red
+}
 
 #okta-sign-in.auth-container .o-form-head {
   color: #d2d2d7;