Added ownr_co_nm to owner display fields. BOD-256

client/src/App/App.jsx

@@ -1,4 +1,3 @@
-import { Grid } from "antd";
 import "antd/dist/antd.css";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -40,7 +39,7 @@ export function App({ checkUserSession, currentUser }) {
     checkUserSession();
   }, [checkUserSession]);
 
-  const b = Grid.useBreakpoint();
+  //const b = Grid.useBreakpoint();
   // console.log("Breakpoints:", b);
 
   const { t } = useTranslation();

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -61,11 +61,13 @@ export default function AccountingPayablesTableComponent({
       render: (text, record) => {
         return record.job.owner ? (
           <Link to={"/manage/owners/" + record.job.owner.id}>
-            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
+            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
+              record.job.ownr_co_nm
+            }`}
           </Link>
         ) : (
-          <span>{`${record.job.ownr_fn || ""} ${
+          <span>{`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-            record.job.ownr_ln || ""
+            record.job.ownr_co_nm
           }`}</span>
         );
       },
@@ -168,10 +170,10 @@ export default function AccountingPayablesTableComponent({
           );
         }}
         dataSource={dataSource}
-        size='small'
+        size="small"
         pagination={{ position: "top", pageSize: 50 }}
         columns={columns}
-        rowKey='id'
+        rowKey="id"
         onChange={handleTableChange}
         rowSelection={{
           onSelectAll: (selected, selectedRows) =>

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -63,10 +63,14 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
-            {`${record.ownr_fn || ""} ${record.ownr_ln || ""}`}
+            {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+              record.ownr_co_nm || ""
+            }`}
           </Link>
         ) : (
-          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""}`}</span>
+          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+            record.ownr_co_nm || ""
+          }`}</span>
         );
       },
     },

client/src/components/chat-tag-ro/chat-tag-ro.component.jsx

@@ -31,12 +31,13 @@ export default function ChatTagRoComponent({
         onSearch={handleSearchQuery}
         onSelect={handleInsertTag}
         placeholder={t("general.labels.search")}
-        onKeyDown={handleKeyDown}>
+        onKeyDown={handleKeyDown}
+      >
         {roOptions.map((item, idx) => (
           <AutoComplete.Option key={item.id || idx}>
             {` ${item.ro_number || ""} | ${item.ownr_fn || ""} ${
               item.ownr_ln || ""
-            }`}
+            } ${item.ownr_co_nm || ""}`}
           </AutoComplete.Option>
         ))}
       </AutoComplete>

client/src/components/contract-jobs/contract-jobs.component.jsx

@@ -7,12 +7,12 @@ export default function ContractsJobsComponent({
   loading,
   data,
   selectedJob,
-  handleSelect
+  handleSelect,
 }) {
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
-    search: ""
+    search: "",
   });
 
   const { t } = useTranslation();
@@ -35,7 +35,7 @@ export default function ContractsJobsComponent({
         <span>
           {record.ro_number ? record.ro_number : "EST-" + record.est_number}
         </span>
-      )
+      ),
     },
     {
       title: t("jobs.fields.owner"),
@@ -49,12 +49,14 @@ export default function ContractsJobsComponent({
       render: (text, record) => {
         return record.owner ? (
           <span>
-            {record.ownr_fn} {record.ownr_ln}
+            {record.ownr_fn} {record.ownr_ln} {record.ownr_co_nm || ""}
           </span>
         ) : (
-          <span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
+          <span>{`${record.ownr_fn} ${record.ownr_ln} ${
+            record.ownr_co_nm || ""
+          }`}</span>
         );
-      }
+      },
     },
     {
       title: t("jobs.fields.status"),
@@ -67,7 +69,7 @@ export default function ContractsJobsComponent({
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => {
         return record.status || t("general.labels.na");
-      }
+      },
     },
 
     {
@@ -79,13 +81,14 @@ export default function ContractsJobsComponent({
       render: (text, record) => {
         return record.vehicleid ? (
           <span>
-            {`${record.v_model_yr || ""} ${record.v_make_desc ||
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-              ""} ${record.v_model_desc || ""}`}
+              record.v_model_desc || ""
+            }`}
           </span>
         ) : (
           t("jobs.errors.novehicle")
         );
-      }
+      },
     },
     {
       title: t("vehicles.fields.plate_no"),
@@ -102,7 +105,7 @@ export default function ContractsJobsComponent({
         ) : (
           t("general.labels.unknown")
         );
-      }
+      },
     },
     {
       title: t("jobs.fields.clm_no"),
@@ -119,8 +122,8 @@ export default function ContractsJobsComponent({
         ) : (
           t("general.labels.unknown")
         );
-      }
+      },
-    }
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -131,7 +134,7 @@ export default function ContractsJobsComponent({
     state.search === ""
       ? data
       : data.filter(
-          j =>
+          (j) =>
             (j.est_number || "")
               .toString()
               .toLowerCase()
@@ -140,6 +143,9 @@ export default function ContractsJobsComponent({
               .toString()
               .toLowerCase()
               .includes(state.search.toLowerCase()) ||
+            (j.ownr_co_nm || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
             (j.ownr_fn || "")
               .toLowerCase()
               .includes(state.search.toLowerCase()) ||
@@ -160,7 +166,6 @@ export default function ContractsJobsComponent({
               .includes(state.search.toLowerCase())
         );
 
-
   return (
     <Table
       loading={loading}
@@ -168,19 +173,19 @@ export default function ContractsJobsComponent({
         <Input.Search
           placeholder={t("general.labels.search")}
           value={state.search}
-          onChange={e => setState({ ...state, search: e.target.value })}
+          onChange={(e) => setState({ ...state, search: e.target.value })}
         />
       )}
       size="small"
       pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
+      columns={columns.map((item) => ({ ...item }))}
       rowKey="id"
       dataSource={filteredData}
       onChange={handleTableChange}
       rowSelection={{
         onSelect: handleSelect,
         type: "radio",
-        selectedRowKeys: [selectedJob]
+        selectedRowKeys: [selectedJob],
       }}
     />
   );

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -60,11 +60,13 @@ export default function CsiResponseListPaginated({
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
-            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
+            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
+              record.job.ownr_co_nm
+            }`}
           </Link>
         ) : (
-          <span>{`${record.job.ownr_fn || ""} ${
+          <span>{`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-            record.job.ownr_ln || ""
+            record.job.ownr_co_nm
           }`}</span>
         );
       },

client/src/components/job-search-select/job-search-select.component.jsx

@@ -36,9 +36,11 @@ const JobSearchSelect = (
             <Option key={o.id} value={o.id}>
               {`${o.ro_number ? o.ro_number : o.est_number} | ${
                 o.ownr_ln || ""
-              } ${o.ownr_fn || ""} | ${o.v_model_yr || ""} ${
+              } ${o.ownr_fn || ""} ${
-                o.v_make_desc || ""
+                o.ownr_co_nm ? ` ${o.ownr_co_num}` : ""
-              } ${o.v_model_desc || ""}`}
+              }| ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
+                o.v_model_desc || ""
+              }`}
             </Option>
           ))
         : null}

client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx

@@ -36,6 +36,15 @@ export default function JobsCreateOwnerInfoSearchComponent({
         tableState.sortedInfo.columnKey === "ownr_fn" &&
         tableState.sortedInfo.order,
     },
+    {
+      title: t("owners.fields.ownr_co_nm"),
+      dataIndex: "ownr_co_nm",
+      key: "ownr_co_nm",
+      sorter: (a, b) => alphaSort(a.ownr_co_nm, b.ownr_co_nm),
+      sortOrder:
+        tableState.sortedInfo.columnKey === "ownr_co_nm" &&
+        tableState.sortedInfo.order,
+    },
     {
       title: t("owners.fields.ownr_addr1"),
       dataIndex: "ownr_addr1",
@@ -86,9 +95,9 @@ export default function JobsCreateOwnerInfoSearchComponent({
       loading={loading}
       title={() => {
         return (
-          <div className='imex-table-header'>
+          <div className="imex-table-header">
             <Input.Search
-              className='imex-table-header__search'
+              className="imex-table-header__search"
               placeholder={t("general.labels.search")}
               onSearch={(value) => {
                 setState({
@@ -101,11 +110,11 @@ export default function JobsCreateOwnerInfoSearchComponent({
           </div>
         );
       }}
-      size='small'
+      size="small"
       scroll={{ x: true }}
       pagination={{ position: "top" }}
       columns={columns}
-      rowKey='id'
+      rowKey="id"
       dataSource={owners}
       onChange={handleTableChange}
       rowSelection={{

client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx

@@ -1,21 +1,16 @@
-import { Col, Divider, Form, Row, Select } from "antd";
+import { Form, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import JobTotalsTable from "../job-totals-table/job-totals-table.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
-const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");
-
 export function JobsDetailRates({ job, bodyshop }) {
   const { t } = useTranslation();
 

client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx

@@ -1,4 +1,4 @@
-import { Col, Divider, Form, Row, Select, Typography } from "antd";
+import { Divider, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -6,9 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobTotalsTable from "../job-totals-table/job-totals-table.component";
-import FormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -19,11 +17,6 @@ const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test
 export function JobsDetailTotals({ job, bodyshop }) {
   const { t } = useTranslation();
 
-  const colSpan = {
-    sm: { span: 24 },
-    lg: { span: 12 },
-  };
-
   return (
     <div>
       <Typography.Title level={4}>

client/src/components/jobs-find-modal/jobs-find-modal.component.jsx

@@ -43,11 +43,15 @@ export default function JobsFindModalComponent({
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
-            {record.ownr_fn} {record.ownr_ln}
+            {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+              record.ownr_co_nm || ""
+            }`}
           </Link>
         ) : (
           // t("jobs.errors.noowner")
-          <span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
+          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+            record.ownr_co_nm || ""
+          }`}</span>
         );
       },
     },
@@ -143,7 +147,8 @@ export default function JobsFindModalComponent({
             <Button
               onClick={() => {
                 jobsListRefetch();
-              }}>
+              }}
+            >
               <SyncOutlined />
             </Button>
             <Input
@@ -154,10 +159,10 @@ export default function JobsFindModalComponent({
             />
           </div>
         )}
-        size='small'
+        size="small"
         pagination={{ position: "bottom" }}
         columns={columns.map((item) => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         loading={jobsListLoading}
         dataSource={jobsList}
         rowSelection={{
@@ -183,7 +188,8 @@ export default function JobsFindModalComponent({
             ...importOptions,
             overrideHeaders: e.target.checked,
           })
-        }>
+        }
+      >
         {t("jobs.labels.override_header")}
       </Checkbox>
     </div>

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -55,10 +55,14 @@ export default function JobsList({ refetch, loading, jobs, total }) {
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
-            {`${record.ownr_fn || ""} ${record.ownr_ln || ""}`}
+            {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+              record.ownr_co_nm || ""
+            }`}
           </Link>
         ) : (
-          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""}`}</span>
+          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+            record.ownr_co_nm || ""
+          }`}</span>
         );
       },
     },
@@ -176,7 +180,7 @@ export default function JobsList({ refetch, loading, jobs, total }) {
     <div>
       <Table
         loading={loading}
-        size='small'
+        size="small"
         scroll={{ x: true }}
         pagination={{
           position: "top",
@@ -185,17 +189,17 @@ export default function JobsList({ refetch, loading, jobs, total }) {
           total: total,
         }}
         columns={columns}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         onChange={handleTableChange}
         title={() => {
           return (
-            <div className='imex-table-header'>
+            <div className="imex-table-header">
               <Button onClick={() => refetch()}>
                 <SyncOutlined />
               </Button>
               <Input.Search
-                className='imex-table-header__search'
+                className="imex-table-header__search"
                 placeholder={t("general.labels.search")}
                 onSearch={(value) => {
                   search.search = value;

client/src/components/jobs-list/jobs-list.component.jsx

@@ -39,7 +39,7 @@ export function JobsList({ bodyshop }) {
   const history = useHistory();
   const [searchText, setSearchText] = useState("");
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   const jobs = data
     ? searchText === ""
@@ -50,6 +50,9 @@ export function JobsList({ bodyshop }) {
               .toString()
               .toLowerCase()
               .includes(searchText.toLowerCase()) ||
+            (j.ownr_co_nm || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
             (j.ownr_fn || "")
               .toLowerCase()
               .includes(searchText.toLowerCase()) ||
@@ -122,10 +125,14 @@ export function JobsList({ bodyshop }) {
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
-            {`${record.ownr_fn || ""} ${record.ownr_ln || ""}`}
+            {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+              record.ownr_co_nm || ""
+            }`}
           </Link>
         ) : (
-          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""}`}</span>
+          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+            record.ownr_co_nm || ""
+          }`}</span>
         );
       },
     },
@@ -242,21 +249,21 @@ export function JobsList({ bodyshop }) {
   return (
     <Table
       loading={loading}
-      size='small'
+      size="small"
       pagination={false}
       columns={columns}
-      rowKey='id'
+      rowKey="id"
       dataSource={jobs}
       style={{ height: "100%" }}
       scroll={{ x: true }}
       title={() => {
         return (
-          <div className='imex-table-header'>
+          <div className="imex-table-header">
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
             <Input.Search
-              className='imex-table-header__search'
+              className="imex-table-header__search"
               placeholder={t("general.labels.search")}
               onChange={(e) => {
                 setSearchText(e.target.value);

client/src/components/owner-find-modal/owner-find-modal.component.jsx

@@ -7,7 +7,7 @@ export default function OwnerFindModalComponent({
   selectedOwner,
   setSelectedOwner,
   ownersListLoading,
-  ownersList
+  ownersList,
 }) {
   //setSelectedOwner is used to set the record id of the owner to use for adding the job.
   const { t } = useTranslation();
@@ -16,27 +16,32 @@ export default function OwnerFindModalComponent({
     {
       title: t("owners.fields.ownr_ln"),
       dataIndex: "ownr_ln",
-      key: "ownr_ln"
+      key: "ownr_ln",
     },
     {
       title: t("owners.fields.ownr_fn"),
       dataIndex: "ownr_fn",
-      key: "ownr_fn"
+      key: "ownr_fn",
+    },
+    {
+      title: t("owners.fields.ownr_co_nm"),
+      dataIndex: "ownr_co_nm",
+      key: "ownr_co_nm",
     },
     {
       title: t("owners.fields.ownr_addr1"),
       dataIndex: "ownr_addr1",
-      key: "ownr_addr1"
+      key: "ownr_addr1",
     },
     {
       title: t("owners.fields.ownr_city"),
       dataIndex: "ownr_city",
-      key: "ownr_city"
+      key: "ownr_city",
     },
     {
       title: t("owners.fields.ownr_ea"),
       dataIndex: "ownr_ea",
-      key: "ownr_ea"
+      key: "ownr_ea",
     },
     {
       title: t("owners.fields.ownr_ph1"),
@@ -44,11 +49,11 @@ export default function OwnerFindModalComponent({
       key: "ownr_ph1",
       render: (text, record) => (
         <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-      )
+      ),
-    }
+    },
   ];
 
-  const handleOnRowClick = record => {
+  const handleOnRowClick = (record) => {
     if (record) {
       if (record.id) {
         setSelectedOwner(record.id);
@@ -64,22 +69,22 @@ export default function OwnerFindModalComponent({
         title={() => t("owners.labels.existing_owners")}
         size="small"
         pagination={{ position: "bottom" }}
-        columns={columns.map(item => ({ ...item }))}
+        columns={columns.map((item) => ({ ...item }))}
         rowKey="id"
         loading={ownersListLoading}
         dataSource={ownersList}
         rowSelection={{
-          onSelect: props => {
+          onSelect: (props) => {
             setSelectedOwner(props.id);
           },
           type: "radio",
-          selectedRowKeys: [selectedOwner]
+          selectedRowKeys: [selectedOwner],
         }}
         onRow={(record, rowIndex) => {
           return {
-            onClick: event => {
+            onClick: (event) => {
               handleOnRowClick(record);
-            }
+            },
           };
         }}
       />

client/src/components/owners-list/owners-list.component.jsx

@@ -33,7 +33,9 @@ export default function OwnersListComponent({
       key: "name",
       render: (text, record) => (
         <Link to={"/manage/owners/" + record.id}>
-          {`${record.ownr_fn} ${record.ownr_ln}`}
+          {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+            record.ownr_co_nm || ""
+          }`}
         </Link>
       ),
     },

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -56,11 +56,13 @@ export default function PaymentsListPaginated({
       render: (text, record) => {
         return record.job.owner ? (
           <Link to={"/manage/owners/" + record.job.owner.id}>
-            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
+            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
+              record.job.ownr_co_nm
+            }`}
           </Link>
         ) : (
-          <span>{`${record.job.ownr_fn || ""} ${
+          <span>{`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-            record.job.ownr_ln || ""
+            record.job.ownr_co_nm
           }`}</span>
         );
       },

client/src/components/production-board-kanban/production-board-kanban.utils.js

@@ -92,6 +92,7 @@ const CheckSearch = (search, job) => {
       .toLowerCase()
       .includes(search.toLowerCase()) ||
     (job.ownr_fn || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.ownr_co_nm || "").toLowerCase().includes(search.toLowerCase()) ||
     (job.ownr_ln || "").toLowerCase().includes(search.toLowerCase()) ||
     (job.status || "").toLowerCase().includes(search.toLowerCase()) ||
     (job.v_make_desc || "").toLowerCase().includes(search.toLowerCase()) ||

client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx

@@ -24,10 +24,10 @@ export function ProductionListSaveConfigButton({
   const [updateShop] = useMutation(UPDATE_SHOP);
   const { t } = useTranslation();
 
-  const handleSaveConfig = () => {
+  const handleSaveConfig = async () => {
     logImEXEvent("production_save_config");
 
-    updateShop({
+    await updateShop({
       variables: {
         id: bodyshop.id,
         shop: {
@@ -39,8 +39,6 @@ export function ProductionListSaveConfigButton({
           },
         },
       },
-    }).then((response) => {
-      const shopDetails = response.data.update_bodyshops.returning[0];
     });
   };
 

client/src/components/production-list-table/production-list-table.component.jsx

@@ -89,6 +89,9 @@ export function ProductionListTable({
               .toString()
               .toLowerCase()
               .includes(searchText.toLowerCase()) ||
+            (j.ownr_co_nm || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
             (j.ownr_fn || "")
               .toLowerCase()
               .includes(searchText.toLowerCase()) ||

client/src/components/schedule-event/schedule-event.component.jsx

@@ -108,7 +108,7 @@ export function ScheduleEventComponent({
     <div>
       <strong>{`${(event.job && event.job.ownr_fn) || ""} ${
         (event.job && event.job.ownr_ln) || ""
-      }`}</strong>
+      } ${(event.job && event.job.ownr_co_nm) || ""}`}</strong>
       <div style={{ margin: 4 }}>
         {`${(event.job && event.job.v_model_yr) || ""} ${
           (event.job && event.job.v_make_desc) || ""

client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx

@@ -34,7 +34,9 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       key: "owner",
       render: (text, record) => (
         <Link to={`/manage/owners/${record.owner.id}`}>
-          {`${record.ownr_fn} ${record.ownr_ln}`}
+          {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
+            record.ownr_co_nm || ""
+          }`}
         </Link>
       ),
     },
@@ -72,7 +74,7 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       )}
       pagination={{ position: "bottom" }}
       columns={columns}
-      rowKey='id'
+      rowKey="id"
       scroll={{ x: true }}
       dataSource={vehicle.jobs}
       rowSelection={{

client/src/pages/csi/csi.container.page.jsx

@@ -94,7 +94,7 @@ export default function CsiContainerPage() {
           </div>
         </div>
         <Typography.Title>{t("csi.labels.title")}</Typography.Title>
-        <strong>{`Hi ${job.ownr_fn || ""}!`}</strong>
+        <strong>{`Hi ${job.ownr_co_nm || job.ownr_fn || ""}!`}</strong>
         <Typography.Paragraph>
           {`At ${
             bodyshop.shopname || ""