Feature/wsdev 3525 field layout

package.json

@@ -12,6 +12,7 @@
     "react-datepicker": "^4.20.0",
     "react-dom": "^18.2.0",
     "react-image-crop": "^10.1.8",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.7",
     "web-vitals": "^2.1.4",

src/App.tsx

@@ -1,10 +1,29 @@
 import FormExample from "./forms/FormExample";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import JobForm from "./forms/JobForm";
+import Home from "./Home/Home";
+import Nav from "./Home/Nav";
+import JobAction from "./forms/JobAction";
+import EmployeeApproval from "./forms/EmployeeApproval";
+import PayrollServices from "./forms/PayrollServices";
+import ResearchFinancial from "./forms/ResearchFinancial";
+import CasualJobs from "./forms/CasualJobs";
 
 function App() {
   return (
-    <div className="p-8">
-      <FormExample />
-    </div>
+    <Router>
+      <Nav />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/jobForm" element={<JobForm />} />
+        <Route path="/casualJobs" element={<CasualJobs />} />
+        <Route path="/formExample" element={<FormExample />} />
+        <Route path="/jobAction" element={<JobAction />} />
+        <Route path="/employeeApproval" element={<EmployeeApproval />} />
+        <Route path="/payrollServices" element={<PayrollServices />} />
+        <Route path="/researchFinancial" element={<ResearchFinancial />} />
+      </Routes>
+    </Router>
   );
 }
 

src/Home/Home.js

@@ -0,0 +1,42 @@
+// src/components/Home.js
+import React from "react";
+import Page from "./Page";
+import { Link } from "react-router-dom";
+
+function Home() {
+  return (
+    <Page>
+      <div>
+        <h1 className="text-2xl font-bold leading-7">
+          Welcome to the RDS Forms project{" "}
+        </h1>
+
+        <ul className="justify-center font-medium mb-10 ">
+          <li className="hover:text-red-500">
+            <Link to="/formExample">Form Example</Link>
+          </li>
+        </ul>
+        <h2 className="text-xl font-bold leading-7">Job Forms example forms</h2>
+        <ul className="justify-center font-medium ">
+          <li className="hover:text-red-500">
+            <Link to="/casualJobs">Casual Jobs</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/jobAction">Job Action</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/employeeApproval">Employee Approval</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/payrollServices">Payroll Services</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/researchFinancial">Research Financial</Link>
+          </li>
+        </ul>
+      </div>
+    </Page>
+  );
+}
+
+export default Home;

src/Home/Nav.js

@@ -0,0 +1,72 @@
+// src/components/Home.js
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+
+function Nav() {
+  const [activePage, setActivePage] = useState("home");
+  const location = useLocation();
+
+  React.useEffect(() => {
+    const path = location.pathname;
+    if (path === "/") setActivePage("home");
+    else if (path === "/formExample") setActivePage("formExample");
+    else if (path === "/casualJobs") setActivePage("casualJobs");
+    else if (path === "/jobAction") setActivePage("jobAction");
+    else if (path === "/employeeApproval") setActivePage("employeeApproval");
+    else if (path === "/payrollServices") setActivePage("payrollServices");
+    else if (path === "/researchFinancial") setActivePage("researchFinancial");
+  }, [location.pathname]);
+
+  return (
+    <nav className=" p-4 mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+      <ul className="flex justify-center font-medium ">
+        <li className={` mx-2 ${activePage === "home" ? "text-red-500" : ""}`}>
+          <Link to="/">Home</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "formExample" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/formExample">Form Example</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "casualJobs" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/casualJobs">Casual Jobs</Link>
+        </li>
+        <li
+          className={`mx-2 ${activePage === "jobAction" ? "text-red-500" : ""}`}
+        >
+          <Link to="/jobAction">Job Action</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "employeeApproval" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/employeeApproval">Employee Approval</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "payrollServices" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/payrollServices">Payroll Services</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "researchFinancial" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/researchFinancial">Research Financial</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Nav;

src/Home/Page.js

@@ -0,0 +1,12 @@
+// src/components/Home.js
+import React from "react";
+
+function Page({ children }) {
+  return (
+    <div className=" mx-auto p-6 mb-4 max-w-7xl px-6 py-8 md:mx-auto md:w-full md:py-10 md:px-14">
+      {children}
+    </div>
+  );
+}
+
+export default Page;

src/components/AutoSuggest/AutoSuggest.js

@@ -1,17 +1,28 @@
 import { useField, ErrorMessage } from "formik";
 import Select from "react-select";
-import { primaryStyles, textStyles } from "../../styles/styles";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
 import { getMaxWidthClass } from "../../helpers/optionClasses";
 import TextError from "../TextError/TextError";
 
 const AutoSuggest = (props) => {
-  const { label, name, options, maxWidth, helper, required, ...rest } = props;
+  const {
+    label,
+    name,
+    options,
+    maxWidth,
+    helper,
+    disabled = false,
+    required,
+    ...rest
+  } = props;
   const fieldMaxWidth = getMaxWidthClass(maxWidth);
   const requiredClass = required ? primaryStyles.required : "";
   const [field] = useField(name);
 
   return (
-    <div className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}>
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
       <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
@@ -28,7 +39,8 @@ const AutoSuggest = (props) => {
         onBlur={field.onBlur}
         isSearchable={true}
         isClearable={true}
-        className="[&>div]:border [&>div]:border-cu-black-200 [&>div]:rounded-md [&>div]:placeholder:text-cu-black-400 [&>div]:pr-0.5 [&>div]:py-0.5 [&>div]:pl-1.5"
+        isDisabled={disabled}
+        className={`[&>div]:border [&>div]:border-cu-black-200 [&>div]:rounded-md [&>div]:placeholder:text-cu-black-400 [&>div]:pr-0.5 [&>div]:py-0.5 [&>div]:pl-1.5 ${fieldStyles.disabled}`}
       />
 
       <ErrorMessage name={name} component={TextError} />

src/components/Checkbox/Checkbox.js

@@ -1,19 +1,18 @@
-import React from 'react'
-import { Field, ErrorMessage } from 'formik'
-import TextError from '../TextError/TextError'
-import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles'
+import React from "react";
+import { Field, ErrorMessage } from "formik";
+import TextError from "../TextError/TextError";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
 
 function Checkbox(props) {
-  const { label, name, options, isInline, helper, required, ...rest } = props
-  const requiredClass = required ? primaryStyles.required : ''
-  const displayInline = isInline ? fieldStyles.horizontalOptions : fieldStyles.verticalOptions
+  const { label, name, options, isInline, helper, required, ...rest } = props;
+  const requiredClass = required ? primaryStyles.required : "";
+  const displayInline = isInline
+    ? fieldStyles.horizontalOptions
+    : fieldStyles.verticalOptions;
 
   return (
     <div className={`${primaryStyles.wrapper} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
@@ -22,27 +21,32 @@ function Checkbox(props) {
       <fieldset className={displayInline}>
         <Field name={name} {...rest}>
           {({ field }) => {
-            return options.map(option => {
-              return (
-                <div key={option.value} className={fieldStyles.radioCheck}>
-                  <input
-                    type="checkbox"
-                    id={option.value}
-                    {...field}
-                    value={option.value}
-                    checked={field.value.includes(option.value)}
-                  />
-                  <label htmlFor={option.value}>{option.key}</label>
-                </div>
-              )
-            })
+            return (
+              options &&
+              options.map((option) => {
+                return (
+                  <div key={option.value} className={fieldStyles.radioCheck}>
+                    <input
+                      type="checkbox"
+                      id={option.value}
+                      {...field}
+                      {...rest}
+                      value={option.value}
+                      checked={field.value.includes(option.value)}
+                      className={fieldStyles.disabledCheckbox}
+                    />
+                    <label htmlFor={option.value}>{option.key}</label>
+                  </div>
+                );
+              })
+            );
           }}
         </Field>
       </fieldset>
 
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default Checkbox
+export default Checkbox;