From 5a1eb37544537d6d732da317eefaaa0bf602d048 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Tue, 19 Jan 2021 09:34:43 -0800
Subject: [PATCH] Admin vehicle/owner reassociation IO-157

---
 bodyshop_translations.babel                   | 149 +++++++++++++++++-
 ...jobs-admin-owner-reassociate.component.jsx |  64 ++++++++
 ...bs-admin-vehicle-reassociate.component.jsx |  64 ++++++++
 .../jobs-detail-header-actions.component.jsx  |  17 +-
 .../labor-allocations-table.component.jsx     |   2 +-
 .../labor-allocations-table.utility.js        |   1 -
 .../owner-search-select.component.jsx         |  96 +++++++++++
 .../components/rbac-wrapper/rbac-defaults.js  |   1 +
 .../shop-info/shop-info.rbac.component.jsx    |  12 ++
 .../vehicle-search-select.component.jsx       |  96 +++++++++++
 client/src/graphql/jobs.queries.js            |   2 +
 client/src/graphql/owners.queries.js          |  27 ++++
 client/src/graphql/vehicles.queries.js        |  23 +++
 .../src/pages/jobs-admin/jobs-admin.page.jsx  |  78 +++++++++
 .../pages/manage/manage.page.component.jsx    |   7 +
 client/src/translations/en_us/common.json     |   7 +
 client/src/translations/es/common.json        |   7 +
 client/src/translations/fr/common.json        |   7 +
 18 files changed, 655 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx
 create mode 100644 client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx
 create mode 100644 client/src/components/owner-search-select/owner-search-select.component.jsx
 create mode 100644 client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
 create mode 100644 client/src/pages/jobs-admin/jobs-admin.page.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 4e78825ea..f0a48e614 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -3585,6 +3585,27 @@
                                             <folder_node>
                                                 <name>jobs</name>
                                                 <children>
+                                                    <concept_node>
+                                                        <name>admin</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description></description>
+                                                        <comment></comment>
+                                                        <default_text></default_text>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>es-MX</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>fr-CA</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
                                                     <concept_node>
                                                         <name>available-list</name>
                                                         <definition_loaded>false</definition_loaded>
@@ -16733,6 +16754,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>associationwarning</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>audit</name>
                                         <definition_loaded>false</definition_loaded>
@@ -17924,6 +17966,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>ownerassociation</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>parts</name>
                                         <definition_loaded>false</definition_loaded>
@@ -18496,6 +18559,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>vehicleassociation</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>viewallocations</name>
                                         <definition_loaded>false</definition_loaded>
@@ -19723,6 +19807,27 @@
                             <folder_node>
                                 <name>jobsactions</name>
                                 <children>
+                                    <concept_node>
+                                        <name>admin</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>closejob</name>
                                         <definition_loaded>false</definition_loaded>
@@ -25204,6 +25309,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>jobs-admin</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>jobs-all</name>
                                         <definition_loaded>false</definition_loaded>
@@ -25836,6 +25962,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>jobs-admin</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description></description>
+                                <comment></comment>
+                                <default_text></default_text>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>es-MX</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>fr-CA</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>jobs-all</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx b/client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx
new file mode 100644
index 000000000..a50d60e13
--- /dev/null
+++ b/client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx
@@ -0,0 +1,64 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, Form, notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import OwnerSearchSelect from "../owner-search-select/owner-search-select.component";
+export default function JobAdminOwnerReassociate({ job }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [updateJob] = useMutation(UPDATE_JOB);
+  const handleFinish = async (values) => {
+    console.log(values);
+    setLoading(true);
+    const result = await updateJob({
+      variables: { jobId: job.id, job: { ownerid: values.ownerid } },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("jobs.successes.save") });
+    } else {
+      notification["error"]({
+        message: t("jobs.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+    //Get the owner details, populate it all back into the job.
+  };
+
+  useEffect(() => {
+    //form.resetFields();
+  }, [form, job]);
+
+  return (
+    <div>
+      <div>{t("jobs.labels.ownerassociation")}</div>
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        form={form}
+        initialValues={{ ownerid: job.ownerid }}
+      >
+        <Form.Item
+          name="ownerid"
+          label={t("jobs.fields.owner")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <OwnerSearchSelect />
+        </Form.Item>
+      </Form>
+      <div>{t("jobs.labels.associationwarning")}</div>
+      <Button loading={loading} onClick={() => form.submit()}>
+        {t("general.actions.save")}
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx b/client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx
new file mode 100644
index 000000000..e90256b88
--- /dev/null
+++ b/client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx
@@ -0,0 +1,64 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, Form, notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import VehicleSearchSelect from "../vehicle-search-select/vehicle-search-select.component";
+export default function JobAdminOwnerReassociate({ job }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [updateJob] = useMutation(UPDATE_JOB);
+  const handleFinish = async (values) => {
+    console.log(values);
+    setLoading(true);
+    const result = await updateJob({
+      variables: { jobId: job.id, job: { vehicleid: values.vehicleid } },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("jobs.successes.save") });
+    } else {
+      notification["error"]({
+        message: t("jobs.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+    //Get the owner details, populate it all back into the job.
+  };
+
+  useEffect(() => {
+    //form.resetFields();
+  }, [form, job]);
+
+  return (
+    <div>
+      <div>{t("jobs.labels.vehicleassociation")}</div>
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        form={form}
+        initialValues={{ vehicleid: job.vehicleid }}
+      >
+        <Form.Item
+          name="vehicleid"
+          label={t("jobs.fields.vehicle")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <VehicleSearchSelect />
+        </Form.Item>
+      </Form>
+      <div>{t("jobs.labels.associationwarning")}</div>
+      <Button loading={loading} onClick={() => form.submit()}>
+        {t("general.actions.save")}
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index ae4522639..c90794005 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -6,13 +6,13 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { selectJobReadOnly } from "../../redux/application/application.selectors";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -199,6 +199,19 @@ export function JobsDetailHeaderActions({
           </Link>
         )}
       </Menu.Item>
+      <Menu.Item disabled={!!job.date_invoiced || jobRO} key="admin">
+        {!!job.date_invoiced || jobRO ? (
+          t("menus.jobsactions.admin")
+        ) : (
+          <Link
+            to={{
+              pathname: `/manage/jobs/${job.id}/admin`,
+            }}
+          >
+            {t("menus.jobsactions.admin")}
+          </Link>
+        )}
+      </Menu.Item>
       <JobsDetaiLheaderCsi job={job} />
       <Menu.Item
         key="jobcosting"
diff --git a/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
index f5e5747b2..127ad163a 100644
--- a/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
@@ -34,7 +34,7 @@ export function LaborAllocationsTable({
       )
     );
   }, [joblines, timetickets, bodyshop, adjustments]);
-  console.log("Rerender on the allocations table.");
+
   return (
     <div>
       <div className="imex-flex-row" style={{ margin: ".5rem" }}>
diff --git a/client/src/components/labor-allocations-table/labor-allocations-table.utility.js b/client/src/components/labor-allocations-table/labor-allocations-table.utility.js
index afe5b32e3..feb65c50c 100644
--- a/client/src/components/labor-allocations-table/labor-allocations-table.utility.js
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.utility.js
@@ -30,6 +30,5 @@ export const CalculateAllocationsTotals = (
     return acc;
   }, []);
 
-  console.log("r", r);
   return r;
 };
diff --git a/client/src/components/owner-search-select/owner-search-select.component.jsx b/client/src/components/owner-search-select/owner-search-select.component.jsx
new file mode 100644
index 000000000..5070bbb09
--- /dev/null
+++ b/client/src/components/owner-search-select/owner-search-select.component.jsx
@@ -0,0 +1,96 @@
+import { LoadingOutlined } from "@ant-design/icons";
+import { useLazyQuery } from "@apollo/react-hooks";
+import { Empty, Select } from "antd";
+import _ from "lodash";
+import React, { forwardRef, useEffect, useState } from "react";
+import {
+  SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE,
+  SEARCH_OWNERS_FOR_AUTOCOMPLETE
+} from "../../graphql/owners.queries";
+import AlertComponent from "../alert/alert.component";
+
+const { Option } = Select;
+
+const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
+  const [callSearch, { loading, error, data }] = useLazyQuery(
+    SEARCH_OWNERS_FOR_AUTOCOMPLETE
+  );
+
+  const [
+    callIdSearch,
+    { loading: idLoading, error: idError, data: idData },
+  ] = useLazyQuery(SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE);
+
+  const executeSearch = (v) => {
+    callSearch(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 500);
+
+  const handleSearch = (value) => {
+    debouncedExecuteSearch({ variables: { search: value } });
+  };
+
+  const [option, setOption] = useState(value);
+
+  useEffect(() => {
+    if (value === option && value) {
+      callIdSearch({ variables: { id: value } });
+    }
+  }, [value, option, callIdSearch]);
+
+  // useEffect(() => {
+  //   if (value !== option && onChange) {
+  //     onChange(option);
+  //   }
+  // }, [value, option, onChange]);
+
+  const handleSelect = (value) => {
+    setOption(value);
+    if (value !== option && onChange) {
+      onChange(value);
+    }
+  };
+
+  const theOptions = [
+    ...(idData && idData.owners_by_pk ? [idData.owners_by_pk] : []),
+    ...(data && data.search_owners ? data.search_owners : []),
+  ];
+
+  return (
+    <div>
+      <Select
+        ref={ref}
+        disabled={disabled}
+        showSearch
+        autoFocus
+        value={option}
+        style={{
+          width: "100%",
+        }}
+        filterOption={false}
+        onSearch={handleSearch}
+        //     onChange={setOption}
+        onChange={handleSelect}
+        onSelect={handleSelect}
+        notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
+        onBlur={onBlur}
+      >
+        {theOptions
+          ? theOptions.map((o) => (
+              <Option key={o.id} value={o.id}>
+                {`${o.ownr_ln || ""} ${o.ownr_fn || ""} ${
+                  o.ownr_co_nm ? ` ${o.ownr_co_num}` : ""
+                }| ${o.ownr_addr1 || ""} `}
+              </Option>
+            ))
+          : null}
+      </Select>
+      {idLoading || loading ? <LoadingOutlined /> : null}
+      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {idError ? (
+        <AlertComponent message={idError.message} type="error" />
+      ) : null}
+    </div>
+  );
+};
+export default forwardRef(OwnerSearchSelect);
diff --git a/client/src/components/rbac-wrapper/rbac-defaults.js b/client/src/components/rbac-wrapper/rbac-defaults.js
index 4c9a41f22..6a229a4f8 100644
--- a/client/src/components/rbac-wrapper/rbac-defaults.js
+++ b/client/src/components/rbac-wrapper/rbac-defaults.js
@@ -14,6 +14,7 @@ const ret = {
   "courtesycar:detail": 2,
   "courtesycar:list": 2,
 
+  "jobs:admin": 5,
   "jobs:list-active": 1,
   "jobs:list-all": 2,
   "jobs:available-list": 2,
diff --git a/client/src/components/shop-info/shop-info.rbac.component.jsx b/client/src/components/shop-info/shop-info.rbac.component.jsx
index 70bd5be24..369c34dc9 100644
--- a/client/src/components/shop-info/shop-info.rbac.component.jsx
+++ b/client/src/components/shop-info/shop-info.rbac.component.jsx
@@ -152,6 +152,18 @@ export default function ShopInfoRbacComponent({ form }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.admin")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:admin"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.jobs.partsqueue")}
           rules={[
diff --git a/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
new file mode 100644
index 000000000..c16461e48
--- /dev/null
+++ b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
@@ -0,0 +1,96 @@
+import { LoadingOutlined } from "@ant-design/icons";
+import { useLazyQuery } from "@apollo/react-hooks";
+import { Empty, Select } from "antd";
+import _ from "lodash";
+import React, { forwardRef, useEffect, useState } from "react";
+import {
+    SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE,
+    SEARCH_VEHICLES_FOR_AUTOCOMPLETE
+} from "../../graphql/vehicles.queries";
+import AlertComponent from "../alert/alert.component";
+
+const { Option } = Select;
+
+const VehicleSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
+  const [callSearch, { loading, error, data }] = useLazyQuery(
+    SEARCH_VEHICLES_FOR_AUTOCOMPLETE
+  );
+
+  const [
+    callIdSearch,
+    { loading: idLoading, error: idError, data: idData },
+  ] = useLazyQuery(SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE);
+
+  const executeSearch = (v) => {
+    callSearch(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 500);
+
+  const handleSearch = (value) => {
+    debouncedExecuteSearch({ variables: { search: value } });
+  };
+
+  const [option, setOption] = useState(value);
+
+  useEffect(() => {
+    if (value === option && value) {
+      callIdSearch({ variables: { id: value } });
+    }
+  }, [value, option, callIdSearch]);
+
+  // useEffect(() => {
+  //   if (value !== option && onChange) {
+  //     onChange(option);
+  //   }
+  // }, [value, option, onChange]);
+
+  const handleSelect = (value) => {
+    setOption(value);
+    if (value !== option && onChange) {
+      onChange(value);
+    }
+  };
+
+  const theOptions = [
+    ...(idData && idData.vehicles_by_pk ? [idData.vehicles_by_pk] : []),
+    ...(data && data.search_vehicles ? data.search_vehicles : []),
+  ];
+
+  return (
+    <div>
+      <Select
+        ref={ref}
+        disabled={disabled}
+        showSearch
+        autoFocus
+        value={option}
+        style={{
+          width: "100%",
+        }}
+        filterOption={false}
+        onSearch={handleSearch}
+        //     onChange={setOption}
+        onChange={handleSelect}
+        onSelect={handleSelect}
+        notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
+        onBlur={onBlur}
+      >
+        {theOptions
+          ? theOptions.map((o) => (
+              <Option key={o.id} value={o.id}>
+                {`${o.v_vin || ""} ${o.v_model_yr || ""} ${
+                  o.v_make_desc || ""
+                } ${o.v_model_desc || ""} `}
+              </Option>
+            ))
+          : null}
+      </Select>
+      {idLoading || loading ? <LoadingOutlined /> : null}
+      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {idError ? (
+        <AlertComponent message={idError.message} type="error" />
+      ) : null}
+    </div>
+  );
+};
+export default forwardRef(VehicleSearchSelect);
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index 6cf006df6..e50718bd9 100644
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -348,6 +348,7 @@ export const GET_JOB_BY_PK = gql`
       v_model_desc
       v_make_desc
       v_color
+      vehicleid
       vehicle {
         id
         plate_no
@@ -413,6 +414,7 @@ export const GET_JOB_BY_PK = gql`
       ownr_ph1
       production_vars
       ca_gst_registrant
+      ownerid
       owner {
         id
         ownr_fn
diff --git a/client/src/graphql/owners.queries.js b/client/src/graphql/owners.queries.js
index 225247c14..6014e6b82 100644
--- a/client/src/graphql/owners.queries.js
+++ b/client/src/graphql/owners.queries.js
@@ -19,6 +19,33 @@ export const QUERY_SEARCH_OWNER_BY_IDX = gql`
   }
 `;
 
+export const SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE = gql`
+  query SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE($id: uuid!) {
+    owners_by_pk(id: $id) {
+      id
+      ownr_fn
+      ownr_ln
+      ownr_co_nm
+      ownr_addr1
+    }
+  }
+`;
+export const SEARCH_OWNERS_FOR_AUTOCOMPLETE = gql`
+  query SEARCH_OWNERS_FOR_AUTOCOMPLETE($search: String) {
+    search_owners(
+      args: { search: $search }
+      limit: 50
+      order_by: { ownr_ln: desc_nulls_last }
+    ) {
+      id
+      ownr_fn
+      ownr_ln
+      ownr_co_nm
+      ownr_addr1
+    }
+  }
+`;
+
 export const QUERY_OWNER_BY_ID = gql`
   query QUERY_OWNER_BY_ID($id: uuid!) {
     owners_by_pk(id: $id) {
diff --git a/client/src/graphql/vehicles.queries.js b/client/src/graphql/vehicles.queries.js
index fbec2f522..a2578e18c 100644
--- a/client/src/graphql/vehicles.queries.js
+++ b/client/src/graphql/vehicles.queries.js
@@ -132,3 +132,26 @@ export const SEARCH_VEHICLE_BY_VIN = gql`
     }
   }
 `;
+
+export const SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE = gql`
+  query SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE($id: uuid!) {
+    vehicles_by_pk(id: $id) {
+      id
+      v_vin
+      v_model_yr
+      v_make_desc
+      v_model_desc
+    }
+  }
+`;
+export const SEARCH_VEHICLES_FOR_AUTOCOMPLETE = gql`
+  query SEARCH_VEHICLES_FOR_AUTOCOMPLETE($search: String) {
+    search_vehicles(args: { search: $search }, limit: 50) {
+      id
+      v_vin
+      v_model_yr
+      v_make_desc
+      v_model_desc
+    }
+  }
+`;
diff --git a/client/src/pages/jobs-admin/jobs-admin.page.jsx b/client/src/pages/jobs-admin/jobs-admin.page.jsx
new file mode 100644
index 000000000..0fabeeaf3
--- /dev/null
+++ b/client/src/pages/jobs-admin/jobs-admin.page.jsx
@@ -0,0 +1,78 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Result } from "antd";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
+import AlertComponent from "../../components/alert/alert.component";
+import JobAdminOwnerReassociate from "../../components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component";
+import JobCalculateTotals from "../../components/job-calculate-totals/job-calculate-totals.component";
+import JobAdminVehicleReassociate from "../../components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component";
+import LayoutFormRow from "../../components/layout-form-row/layout-form-row.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import NotFound from "../../components/not-found/not-found.component";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import {
+    setBreadcrumbs,
+    setSelectedHeader
+} from "../../redux/application/application.actions";
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
+  const { jobId } = useParams();
+  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
+    variables: { id: jobId },
+  });
+  const { t } = useTranslation();
+  useEffect(() => {
+    setSelectedHeader("activejobs");
+    document.title = t("titles.jobs-admin", {
+      ro_number: data ? data.jobs_by_pk && data.jobs_by_pk.ro_number : null,
+    });
+
+    setBreadcrumbs([
+      {
+        link: `/manage/jobs/${jobId}/`,
+        label: t("titles.bc.jobs"),
+      },
+      {
+        link: `/manage/jobs/${jobId}/`,
+        label: t("titles.bc.jobs-detail", {
+          number: data ? data.jobs_by_pk && data.jobs_by_pk.ro_number : null,
+        }),
+      },
+      {
+        link: `/manage/jobs/${jobId}/admin`,
+        label: t("titles.bc.jobs-admin"),
+      },
+    ]);
+  }, [setBreadcrumbs, t, jobId, data, setSelectedHeader]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (!!!data.jobs_by_pk) return <NotFound />;
+  if (!data.jobs_by_pk.job_totals)
+    return (
+      <Result
+        title={t("jobs.errors.nofinancial")}
+        extra={<JobCalculateTotals job={data.jobs_by_pk} />}
+      />
+    );
+
+  return (
+    <RbacWrapper action="jobs:admin">
+      <div>
+        <LayoutFormRow grow>
+          <JobAdminOwnerReassociate job={data ? data.jobs_by_pk : {}} />
+          <JobAdminVehicleReassociate job={data ? data.jobs_by_pk : {}} />
+        </LayoutFormRow>
+      </div>
+    </RbacWrapper>
+  );
+}
+export default connect(null, mapDispatchToProps)(JobsCloseContainer);
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index 5f1dec5a1..1af0e7b80 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -115,6 +115,8 @@ const AccountingPayments = lazy(() =>
 );
 const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
 const JobsClose = lazy(() => import("../jobs-close/jobs-close.container"));
+const JobsAdmin = lazy(() => import("../jobs-admin/jobs-admin.page"));
+
 const ShopCsiPageContainer = lazy(() =>
   import("../shop-csi/shop-csi.container.page")
 );
@@ -208,6 +210,11 @@ export function Manage({ match, conflict }) {
                   path={`${match.path}/jobs/:jobId/close`}
                   component={JobsClose}
                 />
+                <Route
+                  exact
+                  path={`${match.path}/jobs/:jobId/admin`}
+                  component={JobsAdmin}
+                />
                 <Route
                   exact
                   path={`${match.path}/jobs/all`}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index a92db8ebf..3eaa7005e 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -242,6 +242,7 @@
 						"page": "Employees -> List"
 					},
 					"jobs": {
+						"admin": "Jobs -> Admin",
 						"available-list": "Jobs -> Available List",
 						"close": "Jobs -> Close",
 						"create": "Jobs -> Create",
@@ -1032,6 +1033,7 @@
 				"adjustments": "Adjustments",
 				"allocations": "Allocations",
 				"appointmentconfirmation": "Send confirmation to customer?",
+				"associationwarning": "Any changes to associations will require updating the data from the new parent record to the job.",
 				"audit": "Audit Trail",
 				"available": "Available",
 				"availablenew": "Available New Jobs",
@@ -1094,6 +1096,7 @@
 				"notes": "Notes",
 				"othertotal": "Other Totals",
 				"override_header": "Override estimate header on import?",
+				"ownerassociation": "Owner Association",
 				"parts": "Parts",
 				"partsfilter": "Parts Only",
 				"partssubletstotal": "Parts & Sublets Total",
@@ -1123,6 +1126,7 @@
 				"total_sales": "Total Sales",
 				"totals": "Totals",
 				"vehicle_info": "Vehicle",
+				"vehicleassociation": "Vehicle Association",
 				"viewallocations": "View Allocations"
 			},
 			"successes": {
@@ -1192,6 +1196,7 @@
 				"vehicles": "Vehicles"
 			},
 			"jobsactions": {
+				"admin": "Admin",
 				"closejob": "Close Job",
 				"duplicate": "Duplicate this Job",
 				"newcccontract": "Create Courtesy Car Contract"
@@ -1564,6 +1569,7 @@
 				"courtesycars-new": "New Courtesy Car",
 				"jobs": "Jobs",
 				"jobs-active": "Active Jobs",
+				"jobs-admin": "Admin",
 				"jobs-all": "All Jobs",
 				"jobs-close": "Close Job",
 				"jobs-deliver": "Deliver Job",
@@ -1595,6 +1601,7 @@
 			"courtesycars-create": "New Courtesy Car | $t(titles.app)",
 			"courtesycars-detail": "Courtesy Car {{id}} | $t(titles.app)",
 			"jobs": "Active Jobs | $t(titles.app)",
+			"jobs-admin": "Job {{ro_number}} - Admin | $t(titles.app)",
 			"jobs-all": "All Jobs | $t(titles.app)",
 			"jobs-close": "Close Job {{number}} | $t(titles.app)",
 			"jobs-create": "Create a New Job | $t(titles.app)",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index baaaaf95b..30326ac58 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -242,6 +242,7 @@
 						"page": ""
 					},
 					"jobs": {
+						"admin": "",
 						"available-list": "",
 						"close": "",
 						"create": "",
@@ -1032,6 +1033,7 @@
 				"adjustments": "",
 				"allocations": "",
 				"appointmentconfirmation": "¿Enviar confirmación al cliente?",
+				"associationwarning": "",
 				"audit": "",
 				"available": "",
 				"availablenew": "",
@@ -1094,6 +1096,7 @@
 				"notes": "Notas",
 				"othertotal": "",
 				"override_header": "¿Anular encabezado estimado al importar?",
+				"ownerassociation": "",
 				"parts": "Partes",
 				"partsfilter": "",
 				"partssubletstotal": "",
@@ -1123,6 +1126,7 @@
 				"total_sales": "",
 				"totals": "",
 				"vehicle_info": "Vehículo",
+				"vehicleassociation": "",
 				"viewallocations": ""
 			},
 			"successes": {
@@ -1192,6 +1196,7 @@
 				"vehicles": "Vehículos"
 			},
 			"jobsactions": {
+				"admin": "",
 				"closejob": "",
 				"duplicate": "",
 				"newcccontract": ""
@@ -1564,6 +1569,7 @@
 				"courtesycars-new": "",
 				"jobs": "",
 				"jobs-active": "",
+				"jobs-admin": "",
 				"jobs-all": "",
 				"jobs-close": "",
 				"jobs-deliver": "",
@@ -1595,6 +1601,7 @@
 			"courtesycars-create": "",
 			"courtesycars-detail": "",
 			"jobs": "Todos los trabajos | $t(titles.app)",
+			"jobs-admin": "",
 			"jobs-all": "",
 			"jobs-close": "",
 			"jobs-create": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index f7066a808..cc8bad61c 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -242,6 +242,7 @@
 						"page": ""
 					},
 					"jobs": {
+						"admin": "",
 						"available-list": "",
 						"close": "",
 						"create": "",
@@ -1032,6 +1033,7 @@
 				"adjustments": "",
 				"allocations": "",
 				"appointmentconfirmation": "Envoyer une confirmation au client?",
+				"associationwarning": "",
 				"audit": "",
 				"available": "",
 				"availablenew": "",
@@ -1094,6 +1096,7 @@
 				"notes": "Remarques",
 				"othertotal": "",
 				"override_header": "Remplacer l'en-tête d'estimation à l'importation?",
+				"ownerassociation": "",
 				"parts": "les pièces",
 				"partsfilter": "",
 				"partssubletstotal": "",
@@ -1123,6 +1126,7 @@
 				"total_sales": "",
 				"totals": "",
 				"vehicle_info": "Véhicule",
+				"vehicleassociation": "",
 				"viewallocations": ""
 			},
 			"successes": {
@@ -1192,6 +1196,7 @@
 				"vehicles": "Véhicules"
 			},
 			"jobsactions": {
+				"admin": "",
 				"closejob": "",
 				"duplicate": "",
 				"newcccontract": ""
@@ -1564,6 +1569,7 @@
 				"courtesycars-new": "",
 				"jobs": "",
 				"jobs-active": "",
+				"jobs-admin": "",
 				"jobs-all": "",
 				"jobs-close": "",
 				"jobs-deliver": "",
@@ -1595,6 +1601,7 @@
 			"courtesycars-create": "",
 			"courtesycars-detail": "",
 			"jobs": "Tous les emplois | $t(titles.app)",
+			"jobs-admin": "",
 			"jobs-all": "",
 			"jobs-close": "",
 			"jobs-create": "",