Further UI Updates.

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.component.jsx

@@ -1,20 +1,56 @@
-import { Col, Row, Typography } from "antd";
-import React from "react";
-import { useTranslation } from "react-i18next";
+import { Checkbox, Col, Row } from "antd";
+import React, { useContext } from "react";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import JobsCreateVehicleInfoNewComponent from "./jobs-create-vehicle-info.new.component";
 import JobsCreateVehicleInfoSearchComponent from "./jobs-create-vehicle-info.search.component";
-
+import { useTranslation } from "react-i18next";
 const colSpan = {
   sm: { span: 24 },
   lg: { span: 12 },
 };
 
 export default function JobsCreateVehicleInfoComponent({ loading, vehicles }) {
+  const [state, setState] = useContext(JobCreateContext);
   const { t } = useTranslation();
   return (
     <div>
-      <Typography.Title>{t("jobs.labels.create.vehicleinfo")}</Typography.Title>
-      <Row gutter={[32, 32]}>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Checkbox
+            defaultChecked={state.vehicle.new}
+            checked={state.vehicle.new}
+            onChange={() => {
+              setState({
+                ...state,
+                vehicle: {
+                  ...state.vehicle,
+                  none: false,
+                  new: !state.vehicle.new,
+                  selectedid: null,
+                },
+              });
+            }}
+          >
+            {t("jobs.labels.create.newvehicle")}
+          </Checkbox>
+          <Checkbox
+            defaultChecked={state.vehicle.none}
+            checked={state.vehicle.none}
+            onChange={() => {
+              setState({
+                ...state,
+                vehicle: {
+                  ...state.vehicle,
+                  new: false,
+                  none: !state.vehicle.none,
+                  selectedid: null,
+                },
+              });
+            }}
+          >
+            {t("jobs.labels.create.novehicle")}
+          </Checkbox>
+        </Col>
         <Col {...colSpan}>
           <JobsCreateVehicleInfoSearchComponent
             loading={loading}