Minor fixes throughout the system.

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

@@ -23,6 +23,7 @@ import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.com
 import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import "./jobs-detail-header.styles.scss";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -48,7 +49,8 @@ export function JobsDetailHeader({
     <Menu
       onClick={(e) => {
         updateJobStatus(e.key);
-      }}>
+      }}
+    >
       {bodyshop.md_ro_statuses.statuses.map((item) => (
         <Menu.Item key={item}>{item}</Menu.Item>
       ))}
@@ -56,19 +58,20 @@ export function JobsDetailHeader({
   );
 
   const menuExtra = (
-    <div className='imex-flex-row'>
+    <div className="imex-flex-row">
       <Dropdown
-        className='imex-flex-row__margin'
+        className="imex-flex-row__margin"
         overlay={statusmenu}
         trigger={["click"]}
-        key='changestatus'>
+        key="changestatus"
+      >
         <Button>
           {t("jobs.actions.changestatus")} <DownCircleFilled />
         </Button>
       </Dropdown>
 
       <Button
-        className='imex-flex-row__margin'
+        className="imex-flex-row__margin"
         onClick={() => {
           setPrintCenterContext({
             actions: { refetch: refetch },
@@ -78,14 +81,15 @@ export function JobsDetailHeader({
             },
           });
         }}
-        key='printing'>
+        key="printing"
+      >
         <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
       <Button
-        key='convert'
-        className='imex-flex-row__margin'
-        type='danger'
+        key="convert"
+        className="imex-flex-row__margin"
+        type="danger"
         style={{ display: job.converted ? "none" : "" }}
         disabled={job.converted}
         onClick={() => {
@@ -98,15 +102,17 @@ export function JobsDetailHeader({
               message: t("jobs.successes.converted"),
             });
           });
-        }}>
+        }}
+      >
         {t("jobs.actions.convert")}
       </Button>
-      <JobsDetailHeaderActions key='actions' job={job} refetch={refetch} />
+      <JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />
       <Button
-        type='primary'
-        className='imex-flex-row__margin'
-        key='submit'
-        htmlType='submit'>
+        type="primary"
+        className="imex-flex-row__margin"
+        key="submit"
+        htmlType="submit"
+      >
         {t("general.actions.save")}
       </Button>
     </div>
@@ -121,56 +127,73 @@ export function JobsDetailHeader({
       }
       subTitle={job.status}
       tags={[
-        <OwnerTagPopoverComponent key='owner' job={job} />,
-        <VehicleTagPopoverComponent key='vehicle' job={job} />,
+        <OwnerTagPopoverComponent key="owner" job={job} />,
+        <VehicleTagPopoverComponent key="vehicle" job={job} />,
         <Tag
-          color='#f50'
-          key='production'
-          style={{ display: job.inproduction ? "" : "none" }}>
+          color="#f50"
+          key="production"
+          style={{ display: job.inproduction ? "" : "none" }}
+        >
           {t("jobs.labels.inproduction")}
         </Tag>,
       ]}
-      extra={menuExtra}>
+      extra={menuExtra}
+    >
       <Descriptions
-        size='small'
-        column={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 6 }}>
-        <Descriptions.Item key='total' label={t("jobs.fields.repairtotal")}>
+        size="small"
+        column={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 6 }}
+      >
+        <Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}>
           <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
         </Descriptions.Item>
 
         <Descriptions.Item
-          key='custowing'
-          label={t("jobs.fields.customerowing")}>
+          key="custowing"
+          label={t("jobs.fields.customerowing")}
+        >
           <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
         </Descriptions.Item>
 
         <Descriptions.Item
-          key='scp'
-          label={t("jobs.fields.specialcoveragepolicy")}>
+          key="scp"
+          label={t("jobs.fields.specialcoveragepolicy")}
+        >
           <Checkbox checked={job.special_coverage_policy} />
         </Descriptions.Item>
 
         <Descriptions.Item
-          key='sched_comp'
-          label={t("jobs.fields.scheduled_completion")}>
+          key="sched_comp"
+          label={t("jobs.fields.scheduled_completion")}
+        >
           {job.scheduled_completion ? (
-            <Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment>
+            <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
           ) : null}
         </Descriptions.Item>
 
-        <Descriptions.Item key='servicecar' label={t("jobs.fields.servicecar")}>
+        <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
           {job.cccontracts &&
             job.cccontracts.map((item) => (
               <Link
                 key={item.id}
-                to={`/manage/courtesycars/contracts/${item.id}`}>
-                <div>{`${item.agreementnumber} - ${item.start} - ${item.scheduledreturn}`}</div>
+                to={`/manage/courtesycars/contracts/${item.id}`}
+              >
+                <div>
+                  <div>{`${item.courtesycar.year} ${item.courtesycar.make} ${item.courtesycar.model} (${item.courtesycar.plate})`}</div>
+                  <div style={{ display: "inline-block" }}>
+                    <DateTimeFormatter>{item.start}</DateTimeFormatter>
+                    <span> -- </span>
+                    <DateTimeFormatter>
+                      {item.scheduledreturn}
+                    </DateTimeFormatter>
+                  </div>
+                </div>
               </Link>
             ))}
         </Descriptions.Item>
         <Descriptions.Item
-          key='assignments'
-          label={t("jobs.labels.employeeassignments")}>
+          key="assignments"
+          label={t("jobs.labels.employeeassignments")}
+        >
           <JobEmployeeAssignments job={job} />
         </Descriptions.Item>
       </Descriptions>