BOD-10 BOD-12 BOD-11 WIP for Manual Job Creation.

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -0,0 +1,76 @@
+import { Button, message, Steps } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
+
+export default function JobsCreateComponent({ form }) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const { t } = useTranslation();
+  const steps = [
+    {
+      title: t("jobs.labels.create.vehicleinfo"),
+      content: <JobsCreateVehicleInfoContainer form={form} />
+    },
+    {
+      title: t("jobs.labels.create.ownerinfo"),
+      content: "Second-content"
+    },
+    {
+      title: t("jobs.labels.create.jobinfo"),
+      content: "Last-content"
+    }
+  ];
+
+  const next = () => {
+    setPageIndex(pageIndex + 1);
+  };
+  const prev = () => {
+    setPageIndex(pageIndex - 1);
+  };
+
+  const { Step } = Steps;
+  return (
+    <div>
+      <Steps current={pageIndex}>
+        {steps.map((item, idx) => (
+          <Step
+            key={item.title}
+            title={item.title}
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              setPageIndex(idx);
+            }}
+          />
+        ))}
+      </Steps>
+
+      {steps.map((item, idx) => (
+        <div key={idx} style={{ display: idx === pageIndex ? "" : "none" }}>
+          {item.content}
+        </div>
+      ))}
+
+      <div className="steps-action">
+        {pageIndex > 0 && (
+          <Button style={{ margin: 8 }} onClick={() => prev()}>
+            Previous
+          </Button>
+        )}
+        {pageIndex < steps.length - 1 && (
+          <Button type="primary" onClick={() => next()}>
+            Next
+          </Button>
+        )}
+        {pageIndex === steps.length - 1 && (
+          <Button
+            type="primary"
+            htmlType="submit"
+            onClick={() => message.success("Processing complete!")}
+          >
+            Done
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import JobsCreateComponent from "./jobs-create.component";
+import { Form } from "antd";
+import JobCreateContext from "./jobs-create.context";
+export default function JobsCreateContainer() {
+  const [form] = Form.useForm();
+
+  const contextState = useState({
+    vehicle: { new: false, search: "", selectedid: null },
+    owner: { new: false },
+    job: null
+  });
+
+  const [state, setState] = contextState;
+
+  const handleFinish = values => {
+    console.log("Form Values", values);
+    //const vehicleSpread = state.vehicle.selectedid ? {vehicleid: state.vehicle.selectedid} : {vehicle: {data: { ...values.vehicle} }
+    const job = Object.assign(
+      {},
+      {
+        vehicle: state.vehicle.selectedid ? null : values.vehicle,
+        vehicleid: state.vehicle.selectedid || null
+      }
+    );
+    console.log("Job To Save", job);
+  };
+
+  return (
+    <JobCreateContext.Provider value={contextState}>
+      <Form form={form} onFinish={handleFinish} autoComplete={"off"}>
+        <JobsCreateComponent form={form} />
+      </Form>
+    </JobCreateContext.Provider>
+  );
+}

client/src/pages/jobs-create/jobs-create.context.js

@@ -0,0 +1,3 @@
+import React from "react";
+const JobCreateContext = React.createContext(null);
+export default JobCreateContext;

client/src/pages/manage/manage.page.component.jsx

@@ -1,7 +1,7 @@
 import { BackTop, Layout } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Route } from "react-router";
+import { Route, Switch } from "react-router-dom";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
@@ -40,14 +40,15 @@ const ShopPage = lazy(() => import("../shop/shop.page.component"));
 const ShopVendorPageContainer = lazy(() =>
   import("../shop-vendor/shop-vendor.page.container")
 );
-
 const EmailOverlayContainer = lazy(() =>
   import("../../components/email-overlay/email-overlay.container.jsx")
 );
-
 const GlobalLoadingBar = lazy(() =>
   import("../../components/global-loading-bar/global-loading-bar.component")
 );
+const JobsCreateContainerPage = lazy(() =>
+  import("../jobs-create/jobs-create.container")
+);
 
 const { Header, Content, Footer } = Layout;
 
@@ -78,11 +79,19 @@ export default function Manage({ match }) {
               <EmailOverlayContainer />
               <Route exact path={`${match.path}`} component={ManageRootPage} />
               <Route exact path={`${match.path}/jobs`} component={JobsPage} />
-              <Route
-                exact
-                path={`${match.path}/jobs/:jobId`}
-                component={JobsDetailPage}
-              />
+              <Switch>
+                <Route
+                  exact
+                  path={`${match.path}/jobs/create`}
+                  component={JobsCreateContainerPage}
+                />
+                <Route
+                  exact
+                  path={`${match.path}/jobs/:jobId`}
+                  component={JobsDetailPage}
+                />
+              </Switch>
+
               <Route
                 exact
                 path={`${match.path}/profile`}