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