Merged in release/2024-08-23-LEGACY (pull request #1639)

IO-2887 Null out BillData if returnfrombill is not available

.circleci/config.yml

@@ -134,10 +134,6 @@ jobs:
 workflows:
   deploy_and_build:
     jobs:
-      - api-deploy:
-          filters:
-            branches:
-              only: master
       - app-build:
           filters:
             branches:

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Form, PageHeader, Popconfirm, Space } from "antd";
+import { Button, Divider, Form, PageHeader, Popconfirm, Space } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useState } from "react";
@@ -164,6 +164,7 @@ export function BillDetailEditcontainer({
   if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
   const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
+  const isinhouse = data && data.bills_by_pk && data.bills_by_pk.isinhouse;
 
   return (
     <>
@@ -207,8 +208,8 @@ export function BillDetailEditcontainer({
             initialValues={transformData(data)}
             layout="vertical"
           >
-            <BillFormContainer form={form} billEdit disabled={exported} />
-
+            <BillFormContainer form={form} billEdit disabled={exported} disableInHouse={isinhouse}/>
+            <Divider orientation="left">{t("general.labels.media")}</Divider>
             {bodyshop.uselocalmediaserver ? (
               <JobsDocumentsLocalGallery
                 job={{ id: data ? data.bills_by_pk.jobid : null }}

client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx

@@ -45,6 +45,7 @@ export function BillDetailEditReturn({
       actions: {},
       context: {
         jobId: data.bills_by_pk.jobid,
+        job: data.bills_by_pk.job,
         vendorId: data.bills_by_pk.vendorid,
         returnFromBill: data.bills_by_pk.id,
         invoiceNumber: data.bills_by_pk.invoice_number,
@@ -173,7 +174,11 @@ export function BillDetailEditReturn({
         </Form>
       </Modal>
       <Button
-        disabled={data.bills_by_pk.is_credit_memo || disabled}
+        disabled={
+          data.bills_by_pk.is_credit_memo ||
+          data.bills_by_pk.isinhouse ||
+          disabled
+        }
         onClick={() => {
           setVisible(true);
         }}

client/src/components/bill-form/bill-form.component.jsx

@@ -47,6 +47,7 @@ export function BillFormComponent({
   loadLines,
   billEdit,
   disableInvNumber,
+  disableInHouse,
   job,
   loadOutstandingReturns,
   loadInventory,
@@ -198,7 +199,7 @@ export function BillFormComponent({
           ]}
         >
           <VendorSearchSelect
-            disabled={disabled}
+            disabled={disabled || disableInHouse}
             options={vendorAutoCompleteOptions}
             preferredMake={preferredMake}
             onSelect={handleVendorSelect}
@@ -271,7 +272,7 @@ export function BillFormComponent({
             }),
           ]}
         >
-          <Input disabled={disabled || disableInvNumber} />
+          <Input disabled={disabled || disableInvNumber || disableInHouse} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.date")}
@@ -504,10 +505,11 @@ export function BillFormComponent({
           billEdit={billEdit}
         />
       )}
-
+      <Divider orientation="left" style={{ display: billEdit ? "none" : null }}>
+        {t("documents.labels.upload")}
+      </Divider>
       <Form.Item
         name="upload"
-        label="Upload"
         style={{ display: billEdit ? "none" : null }}
         valuePropName="fileList"
         getValueFromEvent={(e) => {

client/src/components/bill-form/bill-form.container.jsx

@@ -22,6 +22,7 @@ export function BillFormContainer({
   billEdit,
   disabled,
   disableInvNumber,
+  disableInHouse
 }) {
   const { Simple_Inventory } = useTreatments(
     ["Simple_Inventory"],
@@ -57,6 +58,7 @@ export function BillFormContainer({
         job={lineData ? lineData.jobs_by_pk : null}
         responsibilityCenters={bodyshop.md_responsibility_centers || null}
         disableInvNumber={disableInvNumber}
+        disableInHouse={disableInHouse}
         loadOutstandingReturns={loadOutstandingReturns}
         loadInventory={loadInventory}
         preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}

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

@@ -60,7 +60,7 @@ export function BillsListTableComponent({
       )}
       <BillDeleteButton bill={record} jobid={job.id} />
       <BillDetailEditReturnComponent
-        data={{ bills_by_pk: { ...record, jobid: job.id } }}
+        data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
         disabled={
           record.is_credit_memo ||
           record.vendorid === bodyshop.inhousevendorid ||

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import { Button, Form, InputNumber, Popover } from "antd";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { useTranslation } from "react-i18next";
 import { CalculatorFilled } from "@ant-design/icons";
+import { Button, Form, InputNumber, Popover, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 export default function CABCpvrtCalculator({ disabled, form }) {
   const [visibility, setVisibility] = useState(false);
 
@@ -26,10 +26,14 @@ export default function CABCpvrtCalculator({ disabled, form }) {
         <Form.Item name="days" label={t("jobs.labels.ca_bc_pvrt.days")}>
           <InputNumber precision={0} min={0} />
         </Form.Item>
-        <Button type="primary" htmlType="submit">
-          {t("general.actions.calculate")}
-        </Button>
-        <Button onClick={() => setVisibility(false)}>Close</Button>
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <Space>
+            <Button type="primary" htmlType="submit">
+              {t("general.actions.calculate")}
+            </Button>
+            <Button onClick={() => setVisibility(false)}>Close</Button>
+          </Space>
+        </div>
       </Form>
     </div>
   );

client/src/components/card-payment-modal/card-payment-modal.component..jsx

@@ -13,7 +13,6 @@ import {
   notification,
 } from "antd";
 import axios from "axios";
-import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -22,7 +21,6 @@ import {
   INSERT_PAYMENT_RESPONSE,
   QUERY_RO_AND_OWNER_BY_JOB_PKS,
 } from "../../graphql/payment_response.queries";
-import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCardPayment } from "../../redux/modals/modals.selectors";
@@ -48,12 +46,12 @@ const CardPaymentModalComponent = ({
   toggleModalVisible,
   insertAuditTrail,
 }) => {
-  const { context } = cardPaymentModal;
+  const { context, actions } = cardPaymentModal;
 
   const [form] = Form.useForm();
 
   const [loading, setLoading] = useState(false);
-  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
+  // const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
 
@@ -65,7 +63,6 @@ const CardPaymentModalComponent = ({
     }
   );
 
-  console.log("🚀 ~ file: card-payment-modal.component..jsx:61 ~ data:", data);
   //Initialize the intellipay window.
   const SetIntellipayCallbackFunctions = () => {
     console.log("*** Set IntelliPay callback functions.");
@@ -74,16 +71,20 @@ const CardPaymentModalComponent = ({
     });
 
     window.intellipay.runOnApproval(async function (response) {
-      console.warn("*** Running On Approval Script ***");
-      form.setFieldValue("paymentResponse", response);
-      form.submit();
+      //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
+      //Add a slight delay to allow the refetch to properly get the data.
+      setTimeout(() => {
+        if (actions && actions.refetch && typeof actions.refetch === "function")
+          actions.refetch();
+        setLoading(false);
+        toggleModalVisible();
+      }, 750);
     });
 
     window.intellipay.runOnNonApproval(async function (response) {
       // Mutate unsuccessful payment
 
       const { payments } = form.getFieldsValue();
-
       await insertPaymentResponse({
         variables: {
           paymentResponse: payments.map((payment) => ({
@@ -108,50 +109,9 @@ const CardPaymentModalComponent = ({
     });
   };
 
-  const handleFinish = async (values) => {
-    try {
-      await insertPayment({
-        variables: {
-          paymentInput: values.payments.map((payment) => ({
-            amount: payment.amount,
-            transactionid: (values.paymentResponse.paymentid || "").toString(),
-            payer: t("payments.labels.customer"),
-            type: values.paymentResponse.cardbrand,
-            jobid: payment.jobid,
-            date: moment(Date.now()),
-            payment_responses: {
-              data: [
-                {
-                  amount: payment.amount,
-                  bodyshopid: bodyshop.id,
-
-                  jobid: payment.jobid,
-                  declinereason: values.paymentResponse.declinereason,
-                  ext_paymentid: values.paymentResponse.paymentid.toString(),
-                  successful: true,
-                  response: values.paymentResponse,
-                },
-              ],
-            },
-          })),
-        },
-        refetchQueries: ["GET_JOB_BY_PK"],
-      });
-      toggleModalVisible();
-    } catch (error) {
-      console.error(error);
-      notification.open({
-        type: "error",
-        message: t("payments.errors.inserting", { error: error.message }),
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
 
   const handleIntelliPayCharge = async () => {
     setLoading(true);
-
     //Validate
     try {
       await form.validateFields();
@@ -164,6 +124,7 @@ const CardPaymentModalComponent = ({
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
+        paymentSplitMeta: form.getFieldsValue(),
       });
 
       if (window.intellipay) {
@@ -192,7 +153,6 @@ const CardPaymentModalComponent = ({
     <Card title="Card Payment">
       <Spin spinning={loading}>
         <Form
-          onFinish={handleFinish}
           form={form}
           layout="vertical"
           initialValues={{
@@ -273,23 +233,14 @@ const CardPaymentModalComponent = ({
             }
           >
             {() => {
-              console.log("Updating the owner info section.");
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
               if (
                 payments?.length > 0 &&
                 payments?.filter((p) => p?.jobid).length === payments?.length
               ) {
-                console.log("**Calling refetch.");
                 refetch({ jobids: payments.map((p) => p.jobid) });
               }
-              console.log(
-                "Acc info",
-                data,
-                payments && data && data.jobs.length > 0
-                  ? data.jobs.map((j) => j.ro_number).join(", ")
-                  : null
-              );
               return (
                 <>
                   <Input
@@ -344,6 +295,13 @@ const CardPaymentModalComponent = ({
                     value={totalAmountToCharge?.toFixed(2)}
                     hidden
                   />
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="comment"
+                    //type="hidden"
+                    value={btoa(JSON.stringify(payments))}
+                    hidden
+                  />
                   <Button
                     type="primary"
                     //  data-ipayname="submit"
@@ -358,11 +316,6 @@ const CardPaymentModalComponent = ({
               );
             }}
           </Form.Item>
-
-          {/* Lightbox payment response when it is completed */}
-          <Form.Item name="paymentResponse" hidden>
-            <Input type="hidden" />
-          </Form.Item>
         </Form>
       </Spin>
     </Card>

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -10,11 +10,15 @@ import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel
 import CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
-//import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
+import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
-export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
+export default function CourtesyCarCreateFormComponent({
+  form,
+  saveLoading,
+  newCC,
+}) {
   const { t } = useTranslation();
   const client = useApolloClient();
 
@@ -33,7 +37,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         }
       />
 
-      {/* <FormFieldsChanged form={form} /> */}
+      {newCC ? null : <FormFieldsChanged form={form} />}
       <LayoutFormRow header={t("courtesycars.labels.vehicle")}>
         <Form.Item
           label={t("courtesycars.fields.year")}

client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx

@@ -37,6 +37,9 @@ const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
       <Option value="courtesycars.status.leasereturn">
         {t("courtesycars.status.leasereturn")}
       </Option>
+      <Option value="courtesycars.status.unavailable">
+        {t("courtesycars.status.unavailable")}
+      </Option>
     </Select>
   );
 };

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -61,6 +61,10 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           text: t("courtesycars.status.in"),
           value: "courtesycars.status.in",
         },
+        {
+          text: t("courtesycars.status.inservice"),
+          value: "courtesycars.status.inservice",
+        },
         {
           text: t("courtesycars.status.out"),
           value: "courtesycars.status.out",
@@ -73,8 +77,12 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           text: t("courtesycars.status.leasereturn"),
           value: "courtesycars.status.leasereturn",
         },
+        {
+          text: t("courtesycars.status.unavailable"),
+          value: "courtesycars.status.unavailable",
+        },
       ],
-      onFilter: (value, record) => value.includes(record.status),
+      onFilter: (value, record) => record.status === value,
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => {
@@ -178,7 +186,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       title: t("courtesycars.fields.fuel"),
       dataIndex: "fuel",
       key: "fuel",
-      sorter: (a, b) => alphaSort(a.fuel, b.fuel),
+      sorter: (a, b) => a.fuel - b.fuel,
       sortOrder:
         state.sortedInfo.columnKey === "fuel" && state.sortedInfo.order,
       render: (text, record) => {
@@ -187,12 +195,14 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
             return t("courtesycars.labels.fuel.full");
           case 88:
             return t("courtesycars.labels.fuel.78");
+          case 75:
+            return t("courtesycars.labels.fuel.34");
           case 63:
             return t("courtesycars.labels.fuel.58");
           case 50:
             return t("courtesycars.labels.fuel.12");
           case 38:
-            return t("courtesycars.labels.fuel.34");
+            return t("courtesycars.labels.fuel.38");
           case 25:
             return t("courtesycars.labels.fuel.14");
           case 13:

client/src/components/dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx

@@ -0,0 +1,169 @@
+import {Card, Table, Tag} from "antd";
+import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
+import {useTranslation} from "react-i18next";
+import React, {useEffect, useState} from "react";
+import moment from "moment";
+import DashboardRefreshRequired from "../refresh-required.component";
+import axios from "axios";
+
+const fortyFiveDaysAgo = () => moment().subtract(45, 'days').toLocaleString();
+
+export default function JobLifecycleDashboardComponent({data, bodyshop, ...cardProps}) {
+    const {t} = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [lifecycleData, setLifecycleData] = useState(null);
+
+    useEffect(() => {
+        async function getLifecycleData() {
+            if (data && data.job_lifecycle) {
+                setLoading(true);
+                const response = await axios.post("/job/lifecycle", {
+                    jobids: data.job_lifecycle.map(x => x.id),
+                    statuses: bodyshop.md_ro_statuses
+                });
+                setLifecycleData(response.data.durations);
+                setLoading(false);
+            }
+        }
+
+        getLifecycleData().catch(e => {
+            console.error(`Error in getLifecycleData: ${e}`);
+        })
+    }, [data, bodyshop]);
+
+    const columns = [
+        {
+            title: t('job_lifecycle.columns.status'),
+            dataIndex: 'status',
+            bgColor: 'red',
+            key: 'status',
+            render: (text, record) => {
+                return <Tag color={record.color}>{record.status}</Tag>
+            }
+        },
+        {
+            title: t('job_lifecycle.columns.human_readable'),
+            dataIndex: 'humanReadable',
+            key: 'humanReadable',
+        },
+        {
+            title: t('job_lifecycle.columns.status_count'),
+            key: 'statusCount',
+            render: (text, record) => {
+                return lifecycleData.statusCounts[record.status];
+            }
+        },
+        {
+            title: t('job_lifecycle.columns.percentage'),
+            dataIndex: 'percentage',
+            key: 'percentage',
+            render: (text, record) => {
+                return record.percentage.toFixed(2) + '%';
+            }
+        },
+    ];
+
+    if (!data) return null;
+
+    if (!data.job_lifecycle || !lifecycleData) return <DashboardRefreshRequired {...cardProps} />;
+
+    const extra = `${t('job_lifecycle.content.calculated_based_on')} ${lifecycleData.jobs} ${t('job_lifecycle.content.jobs_in_since')} ${fortyFiveDaysAgo()}`
+
+    return (
+        <Card title={t("job_lifecycle.titles.dashboard")} {...cardProps}>
+            <LoadingSkeleton loading={loading}>
+                <div style={{overflow: 'scroll', height: "100%"}}>
+                    <div id="bar-container" style={{
+                        display: 'flex',
+                        width: '100%',
+                        height: '100px',
+                        textAlign: 'center',
+                        borderRadius: '5px',
+                        borderWidth: '5px',
+                        borderStyle: 'solid',
+                        borderColor: '#f0f2f5',
+                        margin: 0,
+                        padding: 0
+                    }}>
+                        {lifecycleData.summations.map((key, index, array) => {
+                            const isFirst = index === 0;
+                            const isLast = index === array.length - 1;
+                            return (
+                                <div key={key.status} style={{
+                                    overflow: 'hidden',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    margin: 0,
+                                    padding: 0,
+
+                                    borderTop: '1px solid #f0f2f5',
+                                    borderBottom: '1px solid #f0f2f5',
+                                    borderLeft: isFirst ? '1px solid #f0f2f5' : undefined,
+                                    borderRight: isLast ? '1px solid #f0f2f5' : undefined,
+
+                                    backgroundColor: key.color,
+                                    width: `${key.percentage}%`
+                                }}
+                                     aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                     title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                >
+
+                                    {key.percentage > 15 ?
+                                        <>
+                                            <div>{key.roundedPercentage}</div>
+                                            <div style={{
+                                                backgroundColor: '#f0f2f5',
+                                                borderRadius: '5px',
+                                                paddingRight: '2px',
+                                                paddingLeft: '2px',
+                                                fontSize: '0.8rem',
+                                            }}>
+                                                {key.status}
+                                            </div>
+                                        </>
+                                        : null}
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <Card extra={extra} type='inner' title={t('job_lifecycle.content.legend_title')}
+                          style={{marginTop: '10px'}}>
+                        <div>
+                            {lifecycleData.summations.map((key) => (
+                                <Tag color={key.color} style={{width: '13vh', padding: '4px', margin: '4px'}}>
+                                    <div
+                                        aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                        title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                        style={{
+                                            backgroundColor: '#f0f2f5',
+                                            color: '#000',
+                                            padding: '4px',
+                                            textAlign: 'center'
+                                        }}>
+                                        {key.status} [{lifecycleData.statusCounts[key.status]}] ({key.roundedPercentage})
+                                    </div>
+                                </Tag>
+                            ))}
+                        </div>
+                    </Card>
+                    <Card style={{marginTop: "5px"}} type='inner' title={t("job_lifecycle.titles.top_durations")}>
+                        <Table size="small" pagination={false} columns={columns}
+                               dataSource={lifecycleData.summations.sort((a, b) => b.value - a.value).slice(0, 3)}/>
+                    </Card>
+                </div>
+            </LoadingSkeleton>
+        </Card>
+    );
+}
+
+export const JobLifecycleDashboardGQL = `
+job_lifecycle: jobs(where: {
+    actual_in: {
+        _gte: "${moment().subtract(45, 'days').toISOString()}"
+    }
+}) {
+    id
+    actual_in
+} `;

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,380 +1,391 @@
-import Icon, { SyncOutlined } from "@ant-design/icons";
-import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, Menu, PageHeader, Space, notification } from "antd";
+import Icon, {SyncOutlined} from "@ant-design/icons";
+import {gql, useMutation, useQuery} from "@apollo/client";
+import {Button, Dropdown, Menu, notification, PageHeader, Space} from "antd";
 import i18next from "i18next";
 import _ from "lodash";
 import moment from "moment";
-import React, { useState } from "react";
-import { Responsive, WidthProvider } from "react-grid-layout";
-import { useTranslation } from "react-i18next";
-import { MdClose } from "react-icons/md";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
+import React, {useState} from "react";
+import {Responsive, WidthProvider} from "react-grid-layout";
+import {useTranslation} from "react-i18next";
+import {MdClose} from "react-icons/md";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {logImEXEvent} from "../../firebase/firebase.utils";
+import {UPDATE_DASHBOARD_LAYOUT} from "../../graphql/user.queries";
+import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import DashboardMonthlyEmployeeEfficiency, {
-  DashboardMonthlyEmployeeEfficiencyGql,
+    DashboardMonthlyEmployeeEfficiencyGql,
 } from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component";
 import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component";
 import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component";
 import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component";
 import DashboardMonthlyRevenueGraph, {
-  DashboardMonthlyRevenueGraphGql,
+    DashboardMonthlyRevenueGraphGql,
 } from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
 import DashboardProjectedMonthlySales, {
-  DashboardProjectedMonthlySalesGql,
+    DashboardProjectedMonthlySalesGql,
 } from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
-import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
+import DashboardTotalProductionDollars
+    from "../dashboard-components/total-production-dollars/total-production-dollars.component";
 import DashboardTotalProductionHours, {
-  DashboardTotalProductionHoursGql,
+    DashboardTotalProductionHoursGql,
 } from "../dashboard-components/total-production-hours/total-production-hours.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 //Combination of the following:
 // /node_modules/react-grid-layout/css/styles.css
 // /node_modules/react-resizable/css/styles.css
 import DashboardScheduledInToday, {
-  DashboardScheduledInTodayGql,
+    DashboardScheduledInTodayGql,
 } from "../dashboard-components/scheduled-in-today/scheduled-in-today.component";
 import DashboardScheduledOutToday, {
-  DashboardScheduledOutTodayGql,
+    DashboardScheduledOutTodayGql,
 } from "../dashboard-components/scheduled-out-today/scheduled-out-today.component";
+import JobLifecycleDashboardComponent, {
+    JobLifecycleDashboardGQL
+} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component";
 import "./dashboard-grid.styles.scss";
-import { GenerateDashboardData } from "./dashboard-grid.utils";
+import {GenerateDashboardData} from "./dashboard-grid.utils";
 
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
+    currentUser: selectCurrentUser,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function DashboardGridComponent({ currentUser, bodyshop }) {
-  const { t } = useTranslation();
-  const [state, setState] = useState({
-    ...(bodyshop.associations[0].user.dashboardlayout
-      ? bodyshop.associations[0].user.dashboardlayout
-      : { items: [], layout: {}, layouts: [] }),
-  });
-
-  const { loading, error, data, refetch } = useQuery(
-    createDashboardQuery(state),
-    { fetchPolicy: "network-only", nextFetchPolicy: "network-only" }
-  );
-
-  const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
-
-  const handleLayoutChange = async (layout, layouts) => {
-    logImEXEvent("dashboard_change_layout");
-
-    setState({ ...state, layout, layouts });
-
-    const result = await updateLayout({
-      variables: {
-        email: currentUser.email,
-        layout: { ...state, layout, layouts },
-      },
+export function DashboardGridComponent({currentUser, bodyshop}) {
+    const {t} = useTranslation();
+    const [state, setState] = useState({
+        ...(bodyshop.associations[0].user.dashboardlayout
+            ? bodyshop.associations[0].user.dashboardlayout
+            : {items: [], layout: {}, layouts: []}),
     });
-    if (!!result.errors) {
-      notification["error"]({
-        message: t("dashboard.errors.updatinglayout", {
-          message: JSON.stringify(result.errors),
-        }),
-      });
-    }
-  };
-  const handleRemoveComponent = (key) => {
-    logImEXEvent("dashboard_remove_component", { name: key });
-    const idxToRemove = state.items.findIndex((i) => i.i === key);
 
-    const items = _.cloneDeep(state.items);
+    const {loading, error, data, refetch} = useQuery(
+        createDashboardQuery(state),
+        {fetchPolicy: "network-only", nextFetchPolicy: "network-only"}
+    );
 
-    items.splice(idxToRemove, 1);
-    setState({ ...state, items });
-  };
+    const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
 
-  const handleAddComponent = (e) => {
-    logImEXEvent("dashboard_add_component", { name: e });
-    setState({
-      ...state,
-      items: [
-        ...state.items,
-        {
-          i: e.key,
-          x: (state.items.length * 2) % (state.cols || 12),
-          y: 99, // puts it at the bottom
-          w: componentList[e.key].w || 2,
-          h: componentList[e.key].h || 2,
-        },
-      ],
-    });
-  };
+    const handleLayoutChange = async (layout, layouts) => {
+        logImEXEvent("dashboard_change_layout");
 
-  const dashboarddata = React.useMemo(
-    () => GenerateDashboardData(data),
-    [data]
-  );
-  const existingLayoutKeys = state.items.map((i) => i.i);
-  const addComponentOverlay = (
-    <Menu onClick={handleAddComponent}>
-      {Object.keys(componentList).map((key) => (
-        <Menu.Item
-          key={key}
-          value={key}
-          disabled={existingLayoutKeys.includes(key)}
-        >
-          {componentList[key].label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+        setState({...state, layout, layouts});
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
-
-  return (
-    <div>
-      <PageHeader
-        extra={
-          <Space>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
-              <Button>{t("dashboard.actions.addcomponent")}</Button>
-            </Dropdown>
-          </Space>
+        const result = await updateLayout({
+            variables: {
+                email: currentUser.email,
+                layout: {...state, layout, layouts},
+            },
+        });
+        if (!!result.errors) {
+            notification["error"]({
+                message: t("dashboard.errors.updatinglayout", {
+                    message: JSON.stringify(result.errors),
+                }),
+            });
         }
-      />
+    };
+    const handleRemoveComponent = (key) => {
+        logImEXEvent("dashboard_remove_component", {name: key});
+        const idxToRemove = state.items.findIndex((i) => i.i === key);
 
-      <ResponsiveReactGridLayout
-        className="layout"
-        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        width="100%"
-        layouts={state.layouts}
-        onLayoutChange={handleLayoutChange}
-        //   onBreakpointChange={onBreakpointChange}
-      >
-        {state.items.map((item, index) => {
-          const TheComponent = componentList[item.i].component;
-          return (
-            <div
-              key={item.i}
-              data-grid={{
-                ...item,
-                minH: componentList[item.i].minH || 1,
-                minW: componentList[item.i].minW || 1,
-              }}
+        const items = _.cloneDeep(state.items);
+
+        items.splice(idxToRemove, 1);
+        setState({...state, items});
+    };
+
+    const handleAddComponent = (e) => {
+        logImEXEvent("dashboard_add_component", {name: e});
+        setState({
+            ...state,
+            items: [
+                ...state.items,
+                {
+                    i: e.key,
+                    x: (state.items.length * 2) % (state.cols || 12),
+                    y: 99, // puts it at the bottom
+                    w: componentList[e.key].w || 2,
+                    h: componentList[e.key].h || 2,
+                },
+            ],
+        });
+    };
+
+    const dashboarddata = React.useMemo(
+        () => GenerateDashboardData(data),
+        [data]
+    );
+    const existingLayoutKeys = state.items.map((i) => i.i);
+    const addComponentOverlay = (
+        <Menu onClick={handleAddComponent}>
+            {Object.keys(componentList).map((key) => (
+                <Menu.Item
+                    key={key}
+                    value={key}
+                    disabled={existingLayoutKeys.includes(key)}
+                >
+                    {componentList[key].label}
+                </Menu.Item>
+            ))}
+        </Menu>
+    );
+
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+
+    return (
+        <div>
+            <PageHeader
+                extra={
+                    <Space>
+                        <Button onClick={() => refetch()}>
+                            <SyncOutlined/>
+                        </Button>
+                        <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
+                            <Button>{t("dashboard.actions.addcomponent")}</Button>
+                        </Dropdown>
+                    </Space>
+                }
+            />
+
+            <ResponsiveReactGridLayout
+                className="layout"
+                breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+                cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
+                width="100%"
+                layouts={state.layouts}
+                onLayoutChange={handleLayoutChange}
+                //   onBreakpointChange={onBreakpointChange}
             >
-              <LoadingSkeleton loading={loading}>
-                <Icon
-                  component={MdClose}
-                  key={item.i}
-                  style={{
-                    position: "absolute",
-                    zIndex: "2",
-                    right: ".25rem",
-                    top: ".25rem",
-                    cursor: "pointer",
-                  }}
-                  onClick={() => handleRemoveComponent(item.i)}
-                />
-                <TheComponent className="dashboard-card" data={dashboarddata} />
-              </LoadingSkeleton>
-            </div>
-          );
-        })}
-      </ResponsiveReactGridLayout>
-    </div>
-  );
+                {state.items.map((item, index) => {
+                    const TheComponent = componentList[item.i].component;
+                    return (
+                        <div
+                            key={item.i}
+                            data-grid={{
+                                ...item,
+                                minH: componentList[item.i].minH || 1,
+                                minW: componentList[item.i].minW || 1,
+                            }}
+                        >
+                            <LoadingSkeleton loading={loading}>
+                                <Icon
+                                    component={MdClose}
+                                    key={item.i}
+                                    style={{
+                                        position: "absolute",
+                                        zIndex: "2",
+                                        right: ".25rem",
+                                        top: ".25rem",
+                                        cursor: "pointer",
+                                    }}
+                                    onClick={() => handleRemoveComponent(item.i)}
+                                />
+                                <TheComponent className="dashboard-card" bodyshop={bodyshop} data={dashboarddata}/>
+                            </LoadingSkeleton>
+                        </div>
+                    );
+                })}
+            </ResponsiveReactGridLayout>
+        </div>
+    );
 }
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(DashboardGridComponent);
 
 const componentList = {
-  ProductionDollars: {
-    label: i18next.t("dashboard.titles.productiondollars"),
-    component: DashboardTotalProductionDollars,
-    gqlFragment: null,
-    w: 1,
-    h: 1,
-    minW: 2,
-    minH: 1,
-  },
-  ProductionHours: {
-    label: i18next.t("dashboard.titles.productionhours"),
-    component: DashboardTotalProductionHours,
-    gqlFragment: DashboardTotalProductionHoursGql,
-    w: 3,
-    h: 1,
-    minW: 3,
-    minH: 1,
-  },
-  ProjectedMonthlySales: {
-    label: i18next.t("dashboard.titles.projectedmonthlysales"),
-    component: DashboardProjectedMonthlySales,
-    gqlFragment: DashboardProjectedMonthlySalesGql,
-    w: 2,
-    h: 1,
-    minW: 2,
-    minH: 1,
-  },
-  MonthlyRevenueGraph: {
-    label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
-    component: DashboardMonthlyRevenueGraph,
-    gqlFragment: DashboardMonthlyRevenueGraphGql,
-    w: 4,
-    h: 2,
-    minW: 4,
-    minH: 2,
-  },
-  MonthlyJobCosting: {
-    label: i18next.t("dashboard.titles.monthlyjobcosting"),
-    component: DashboardMonthlyJobCosting,
-    gqlFragment: null,
-    minW: 6,
-    minH: 3,
-    w: 6,
-    h: 3,
-  },
-  MonthlyPartsSales: {
-    label: i18next.t("dashboard.titles.monthlypartssales"),
-    component: DashboardMonthlyPartsSales,
-    gqlFragment: null,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2,
-  },
-  MonthlyLaborSales: {
-    label: i18next.t("dashboard.titles.monthlylaborsales"),
-    component: DashboardMonthlyLaborSales,
-    gqlFragment: null,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2,
-  },
-  MonthlyEmployeeEfficency: {
-    label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
-    component: DashboardMonthlyEmployeeEfficiency,
-    gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2,
-  },
-  ScheduleInToday: {
-    label: i18next.t("dashboard.titles.scheduledintoday"),
-    component: DashboardScheduledInToday,
-    gqlFragment: DashboardScheduledInTodayGql,
-    minW: 6,
-    minH: 2,
-    w: 10,
-    h: 3,
-  },
-  ScheduleOutToday: {
-    label: i18next.t("dashboard.titles.scheduledouttoday"),
-    component: DashboardScheduledOutToday,
-    gqlFragment: DashboardScheduledOutTodayGql,
-    minW: 6,
-    minH: 2,
-    w: 10,
-    h: 3,
-  },
+    ProductionDollars: {
+        label: i18next.t("dashboard.titles.productiondollars"),
+        component: DashboardTotalProductionDollars,
+        gqlFragment: null,
+        w: 1,
+        h: 1,
+        minW: 2,
+        minH: 1,
+    },
+    ProductionHours: {
+        label: i18next.t("dashboard.titles.productionhours"),
+        component: DashboardTotalProductionHours,
+        gqlFragment: DashboardTotalProductionHoursGql,
+        w: 3,
+        h: 1,
+        minW: 3,
+        minH: 1,
+    },
+    ProjectedMonthlySales: {
+        label: i18next.t("dashboard.titles.projectedmonthlysales"),
+        component: DashboardProjectedMonthlySales,
+        gqlFragment: DashboardProjectedMonthlySalesGql,
+        w: 2,
+        h: 1,
+        minW: 2,
+        minH: 1,
+    },
+    MonthlyRevenueGraph: {
+        label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
+        component: DashboardMonthlyRevenueGraph,
+        gqlFragment: DashboardMonthlyRevenueGraphGql,
+        w: 4,
+        h: 2,
+        minW: 4,
+        minH: 2,
+    },
+    MonthlyJobCosting: {
+        label: i18next.t("dashboard.titles.monthlyjobcosting"),
+        component: DashboardMonthlyJobCosting,
+        gqlFragment: null,
+        minW: 6,
+        minH: 3,
+        w: 6,
+        h: 3,
+    },
+    MonthlyPartsSales: {
+        label: i18next.t("dashboard.titles.monthlypartssales"),
+        component: DashboardMonthlyPartsSales,
+        gqlFragment: null,
+        minW: 2,
+        minH: 2,
+        w: 2,
+        h: 2,
+    },
+    MonthlyLaborSales: {
+        label: i18next.t("dashboard.titles.monthlylaborsales"),
+        component: DashboardMonthlyLaborSales,
+        gqlFragment: null,
+        minW: 2,
+        minH: 2,
+        w: 2,
+        h: 2,
+    },
+    // Typo in Efficency should be Efficiency, but changing it would reset users dashboard settings
+    MonthlyEmployeeEfficency: {
+        label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
+        component: DashboardMonthlyEmployeeEfficiency,
+        gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
+        minW: 2,
+        minH: 2,
+        w: 2,
+        h: 2,
+    },
+    ScheduleInToday: {
+        label: i18next.t("dashboard.titles.scheduledintoday"),
+        component: DashboardScheduledInToday,
+        gqlFragment: DashboardScheduledInTodayGql,
+        minW: 6,
+        minH: 2,
+        w: 10,
+        h: 3,
+    },
+    ScheduleOutToday: {
+        label: i18next.t("dashboard.titles.scheduledouttoday"),
+        component: DashboardScheduledOutToday,
+        gqlFragment: DashboardScheduledOutTodayGql,
+        minW: 6,
+        minH: 2,
+        w: 10,
+        h: 3,
+    },
+    JobLifecycle: {
+        label: i18next.t("dashboard.titles.joblifecycle"),
+        component: JobLifecycleDashboardComponent,
+        gqlFragment: JobLifecycleDashboardGQL,
+        minW: 6,
+        minH: 3,
+        w: 6,
+        h: 3,
+    },
 };
 
 const createDashboardQuery = (state) => {
-  const componentBasedAdditions =
-    state &&
-    Array.isArray(state.layout) &&
-    state.layout
-      .map((item, index) => componentList[item.i].gqlFragment || "")
-      .join("");
-  return gql`
-    query QUERY_DASHBOARD_DETAILS { ${componentBasedAdditions || ""} 
-      monthly_sales: jobs(where: {_and: [
-        { voided: {_eq: false}},
-        {date_invoiced: {_gte: "${moment()
+    const componentBasedAdditions =
+        state &&
+        Array.isArray(state.layout) &&
+        state.layout
+            .map((item, index) => componentList[item.i].gqlFragment || "")
+            .join("");
+    return gql`
+        query QUERY_DASHBOARD_DETAILS { ${componentBasedAdditions || ""}
+            monthly_sales: jobs(where: {_and: [
+                { voided: {_eq: false}},
+                {date_invoiced: {_gte: "${moment()
           .startOf("month")
-          .startOf("day")
-          .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+                .startOf("day")
+                .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
     .endOf("month")
     .endOf("day")
     .toISOString()}"}}]}) {
       id
-      ro_number
-      date_invoiced
-      job_totals
-      rate_la1
-      rate_la2
-      rate_la3
-      rate_la4
-      rate_laa
-      rate_lab
-      rate_lad
-      rate_lae
-      rate_laf
-      rate_lag
-      rate_lam
-      rate_lar
-      rate_las
-      rate_lau
-      rate_ma2s
-      rate_ma2t
-      rate_ma3s
-      rate_mabl
-      rate_macs
-      rate_mahw
-      rate_mapa
-      rate_mash
-      rate_matd
-      joblines(where: { removed: { _eq: false } }) {
-        id
-        mod_lbr_ty
-        mod_lb_hrs
-        act_price
-        part_qty
-        part_type
-      }
-    }
-    production_jobs: jobs(where: { inproduction: { _eq: true } }) {
-      id
-      ro_number
-      ins_co_nm
-      job_totals
-      joblines(where: { removed: { _eq: false } }) {
-        id
-        mod_lbr_ty
-        mod_lb_hrs
-        act_price
-        part_qty
-        part_type
-      }
-      labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
-        aggregate {
-          sum {
-            mod_lb_hrs
-          }
-        }
-      }
-      larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
-        aggregate {
-          sum {
-            mod_lb_hrs
-          }
-        }
-      }
-    }
-  }`;
+                ro_number
+                date_invoiced
+                job_totals
+                rate_la1
+                rate_la2
+                rate_la3
+                rate_la4
+                rate_laa
+                rate_lab
+                rate_lad
+                rate_lae
+                rate_laf
+                rate_lag
+                rate_lam
+                rate_lar
+                rate_las
+                rate_lau
+                rate_ma2s
+                rate_ma2t
+                rate_ma3s
+                rate_mabl
+                rate_macs
+                rate_mahw
+                rate_mapa
+                rate_mash
+                rate_matd
+                joblines(where: { removed: { _eq: false } }) {
+                    id
+                    mod_lbr_ty
+                    mod_lb_hrs
+                    act_price
+                    part_qty
+                    part_type
+                }
+                }
+                production_jobs: jobs(where: { inproduction: { _eq: true } }) {
+                    id
+                    ro_number
+                    ins_co_nm
+                    job_totals
+                    joblines(where: { removed: { _eq: false } }) {
+                    id
+                    mod_lbr_ty
+                    mod_lb_hrs
+                    act_price
+                    part_qty
+                    part_type
+                }
+                labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
+                    aggregate {
+                        sum {
+                            mod_lb_hrs
+                        }
+                    }
+                }
+                larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
+                    aggregate {
+                        sum {
+                            mod_lb_hrs
+                        }
+                    }
+                }
+                }
+            }`;
 };

client/src/components/global-search/global-search-os.component.jsx

@@ -3,16 +3,13 @@ import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
-import OwnerNameDisplay, {
-  OwnerNameDisplayFunction,
-} from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 export default function GlobalSearchOs() {
   const { t } = useTranslation();
-  const history = useHistory();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(false);
 
@@ -21,7 +18,7 @@ export default function GlobalSearchOs() {
       try {
         setLoading(true);
         const searchData = await axios.post("/search", {
-          search: v,
+          search: v
         });
 
         const resultsByType = {
@@ -29,7 +26,7 @@ export default function GlobalSearchOs() {
           jobs: [],
           bills: [],
           owners: [],
-          vehicles: [],
+          vehicles: []
         };
 
         searchData.data.hits.hits.forEach((hit) => {
@@ -50,16 +47,14 @@ export default function GlobalSearchOs() {
                       <span>
                         <OwnerNameDisplay ownerObject={job} />
                       </span>
-                      <span>{`${job.v_model_yr || ""} ${
-                        job.v_make_desc || ""
-                      } ${job.v_model_desc || ""}`}</span>
+                      <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${job.v_model_desc || ""}`}</span>
                       <span>{`${job.clm_no || ""}`}</span>
                       <span>{`${job.plate_no || ""}`}</span>
                     </Space>
                   </Link>
-                ),
+                )
               };
-            }),
+            })
           },
           {
             label: renderTitle(t("menus.header.search.owners")),
@@ -69,53 +64,39 @@ export default function GlobalSearchOs() {
                 value: OwnerNameDisplayFunction(owner),
                 label: (
                   <Link to={`/manage/owners/${owner.id}`}>
-                    <Space
-                      size="small"
-                      split={<Divider type="vertical" />}
-                      wrap
-                    >
+                    <Space size="small" split={<Divider type="vertical" />} wrap>
                       <span>
                         <OwnerNameDisplay ownerObject={owner} />
                       </span>
-                      <PhoneNumberFormatter>
-                        {owner.ownr_ph1}
-                      </PhoneNumberFormatter>
-                      <PhoneNumberFormatter>
-                        {owner.ownr_ph2}
-                      </PhoneNumberFormatter>
+                      <PhoneNumberFormatter>{owner.ownr_ph1}</PhoneNumberFormatter>
+                      <PhoneNumberFormatter>{owner.ownr_ph2}</PhoneNumberFormatter>
                     </Space>
                   </Link>
-                ),
+                )
               };
-            }),
+            })
           },
           {
             label: renderTitle(t("menus.header.search.vehicles")),
             options: resultsByType.vehicles.map((vehicle) => {
               return {
                 key: vehicle.id,
-                value: `${vehicle.v_model_yr || ""} ${
-                  vehicle.v_make_desc || ""
-                } ${vehicle.v_model_desc || ""}`,
+                value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
                 label: (
                   <Link to={`/manage/vehicles/${vehicle.id}`}>
                     <Space size="small" split={<Divider type="vertical" />}>
                       <span>
-                        {`${vehicle.v_model_yr || ""} ${
-                          vehicle.v_make_desc || ""
-                        } ${vehicle.v_model_desc || ""}`}
+                        {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                       </span>
                       <span>{vehicle.plate_no || ""}</span>
                       <span>
-                        <VehicleVinDisplay>
-                          {vehicle.v_vin || ""}
-                        </VehicleVinDisplay>
+                        <VehicleVinDisplay>{vehicle.v_vin || ""}</VehicleVinDisplay>
                       </span>
                     </Space>
                   </Link>
-                ),
+                )
               };
-            }),
+            })
           },
           {
             label: renderTitle(t("menus.header.search.payments")),
@@ -133,9 +114,9 @@ export default function GlobalSearchOs() {
                       <span>{payment.transactionid || ""}</span>
                     </Space>
                   </Link>
-                ),
+                )
               };
-            }),
+            })
           },
           {
             label: renderTitle(t("menus.header.search.bills")),
@@ -151,10 +132,10 @@ export default function GlobalSearchOs() {
                       <span>{bill.date}</span>
                     </Space>
                   </Link>
-                ),
+                )
               };
-            }),
-          },
+            })
+          }
           // {
           //   label: renderTitle(t("menus.header.search.phonebook")),
           //   options: resultsByType.search_phonebook.map((pb) => {
@@ -196,15 +177,7 @@ export default function GlobalSearchOs() {
   };
 
   return (
-    <AutoComplete
-      options={data}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onSelect={(val, opt) => {
-        history.push(opt.label.props.to);
-      }}
-      onClear={() => setData([])}
-    >
+    <AutoComplete options={data} onSearch={handleSearch} defaultActiveFirstOption onClear={() => setData([])}>
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

client/src/components/global-search/global-search.component.jsx

@@ -3,28 +3,19 @@ import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
-import OwnerNameDisplay, {
-  OwnerNameDisplayFunction,
-} from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
+
 export default function GlobalSearch() {
   const { t } = useTranslation();
-  const history = useHistory();
-  const [callSearch, { loading, error, data }] =
-    useLazyQuery(GLOBAL_SEARCH_QUERY);
+  const [callSearch, { loading, error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
 
   const executeSearch = (v) => {
-    if (
-      v &&
-      v.variables.search &&
-      v.variables.search !== "" &&
-      v.variables.search.length >= 3
-    )
-      callSearch(v);
+    if (v && v.variables.search && v.variables.search !== "" && v.variables.search.length >= 3) callSearch(v);
   };
   const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
@@ -53,15 +44,13 @@ export default function GlobalSearch() {
                     <span>
                       <OwnerNameDisplay ownerObject={job} />
                     </span>
-                    <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
-                      job.v_model_desc || ""
-                    }`}</span>
+                    <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${job.v_model_desc || ""}`}</span>
                     <span>{`${job.clm_no || ""}`}</span>
                   </Space>
                 </Link>
-              ),
+              )
             };
-          }),
+          })
         },
         {
           label: renderTitle(t("menus.header.search.owners")),
@@ -75,45 +64,35 @@ export default function GlobalSearch() {
                     <span>
                       <OwnerNameDisplay ownerObject={owner} />
                     </span>
-                    <PhoneNumberFormatter>
-                      {owner.ownr_ph1}
-                    </PhoneNumberFormatter>
-                    <PhoneNumberFormatter>
-                      {owner.ownr_ph2}
-                    </PhoneNumberFormatter>
+                    <PhoneNumberFormatter>{owner.ownr_ph1}</PhoneNumberFormatter>
+                    <PhoneNumberFormatter>{owner.ownr_ph2}</PhoneNumberFormatter>
                   </Space>
                 </Link>
-              ),
+              )
             };
-          }),
+          })
         },
         {
           label: renderTitle(t("menus.header.search.vehicles")),
           options: data.search_vehicles.map((vehicle) => {
             return {
               key: vehicle.id,
-              value: `${vehicle.v_model_yr || ""} ${
-                vehicle.v_make_desc || ""
-              } ${vehicle.v_model_desc || ""}`,
+              value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
               label: (
                 <Link to={`/manage/vehicles/${vehicle.id}`}>
                   <Space size="small" split={<Divider type="vertical" />}>
                     <span>
-                      {`${vehicle.v_model_yr || ""} ${
-                        vehicle.v_make_desc || ""
-                      } ${vehicle.v_model_desc || ""}`}
+                      {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                     </span>
                     <span>{vehicle.plate_no || ""}</span>
                     <span>
-                      <VehicleVinDisplay>
-                        {vehicle.v_vin || ""}
-                      </VehicleVinDisplay>
+                      <VehicleVinDisplay>{vehicle.v_vin || ""}</VehicleVinDisplay>
                     </span>
                   </Space>
                 </Link>
-              ),
+              )
             };
-          }),
+          })
         },
         {
           label: renderTitle(t("menus.header.search.payments")),
@@ -131,9 +110,9 @@ export default function GlobalSearch() {
                     <span>{payment.transactionid || ""}</span>
                   </Space>
                 </Link>
-              ),
+              )
             };
-          }),
+          })
         },
         {
           label: renderTitle(t("menus.header.search.bills")),
@@ -149,46 +128,35 @@ export default function GlobalSearch() {
                     <span>{bill.date}</span>
                   </Space>
                 </Link>
-              ),
+              )
             };
-          }),
+          })
         },
         {
           label: renderTitle(t("menus.header.search.phonebook")),
           options: data.search_phonebook.map((pb) => {
             return {
               key: pb.id,
-              value: `${pb.firstname || ""} ${pb.lastname || ""} ${
-                pb.company || ""
-              }`,
+              value: `${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`,
               label: (
                 <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
                   <Space size="small" split={<Divider type="vertical" />}>
-                    <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${
-                      pb.company || ""
-                    }`}</span>
+                    <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`}</span>
                     <PhoneNumberFormatter>{pb.phone1}</PhoneNumberFormatter>
                     <span>{pb.email}</span>
                   </Space>
                 </Link>
-              ),
+              )
             };
-          }),
-        },
+          })
+        }
       ]
     : [];
 
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <AutoComplete
-      options={options}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onSelect={(val, opt) => {
-        history.push(opt.label.props.to);
-      }}
-    >
+    <AutoComplete options={options} onSearch={handleSearch} defaultActiveFirstOption>
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

client/src/components/job-detail-cards/job-detail-cards.totals.component.jsx

@@ -18,10 +18,8 @@ export default function JobDetailCardsTotalsComponent({ loading, data }) {
           />
           <Statistic
             className="imex-flex-row__margin-large"
-            title={t("jobs.fields.ded_amt")}
-            value={Dinero({
-              amount: Math.round((data.ded_amt || 0) * 100),
-            }).toFormat()}
+            title={t("jobs.fields.customerowing")}
+            value={Dinero(data.job_totals.totals.custPayable.total).toFormat()}
           />
           <Statistic
             className="imex-flex-row__margin-large"

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -1,14 +1,26 @@
 import { useQuery } from "@apollo/client";
-import { Col, Divider, Row, Skeleton, Space, Timeline, Typography } from "antd";
+import { Col, Row, Skeleton, Timeline, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors.js";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
+import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container.jsx";
 
-export default function JobLinesExpander({ jobline, jobid }) {
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobLinesExpander);
+
+export function JobLinesExpander({ jobline, jobid, technician }) {
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
     fetchPolicy: "network-only",
@@ -31,15 +43,31 @@ export default function JobLinesExpander({ jobline, jobid }) {
           {data.parts_order_lines.length > 0 ? (
             data.parts_order_lines.map((line) => (
               <Timeline.Item key={line.id}>
-                <Space split={<Divider type="vertical" />} wrap>
-                  <Link
-                    to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
-                  >
-                    {line.parts_order.order_number}
-                  </Link>
-                  <DateFormatter>{line.parts_order.order_date}</DateFormatter>
-                  {line.parts_order.vendor.name}
-                </Space>
+                <Row wrap>
+                  <Col span={4}>
+                    {!technician ? (
+                      <Link
+                        to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
+                      >
+                        {line.parts_order.order_number}
+                      </Link>
+                    ) : (
+                      `${line.parts_order.order_number}`
+                    )}
+                  </Col>
+                  <Col span={4}>
+                    <DateFormatter>{line.parts_order.order_date}</DateFormatter>
+                  </Col>
+                  <Col span={4}>{line.parts_order.vendor.name}</Col>
+                  {line.backordered_eta ? (
+                    <Col span={4}>
+                      <span>
+                        {`${t("parts_orders.fields.backordered_eta")}: `}
+                        <DateFormatter>{line.backordered_eta}</DateFormatter>
+                      </span>
+                    </Col>
+                  ) : null}
+                </Row>
               </Timeline.Item>
             ))
           ) : (
@@ -51,17 +79,22 @@ export default function JobLinesExpander({ jobline, jobid }) {
       </Col>
       <Col md={24} lg={12}>
         <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+        <BillDetailEditcontainer />
         <Timeline>
           {data.billlines.length > 0 ? (
             data.billlines.map((line) => (
               <Timeline.Item key={line.id}>
                 <Row wrap>
                   <Col span={4}>
-                    <Link
-                      to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
-                    >
-                      {line.bill.invoice_number}
-                    </Link>
+                    {!technician ? (
+                      <Link
+                        to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
+                      >
+                        {line.bill.invoice_number}
+                      </Link>
+                    ) : (
+                      `${line.bill.invoice_number}`
+                    )}
                   </Col>
                   <Col span={4}>
                     <span>
@@ -71,7 +104,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
                   </Col>
                   <Col span={4}>
                     <span>
-                    {`${t("billlines.fields.actual_cost")}: `}
+                      {`${t("billlines.fields.actual_cost")}: `}
                       <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
                     </span>
                   </Col>
@@ -83,9 +116,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
               </Timeline.Item>
             ))
           ) : (
-            <Timeline.Item>
-              {t("parts_orders.labels.notyetordered")}
-            </Timeline.Item>
+            <Timeline.Item>{t("bills.labels.nobilllines")}</Timeline.Item>
           )}
         </Timeline>
       </Col>

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -1,12 +1,12 @@
 import {
   DeleteFilled,
+  EditFilled,
   FilterFilled,
+  HomeOutlined,
+  MinusCircleTwoTone,
+  PlusCircleTwoTone,
   SyncOutlined,
   WarningFilled,
-  EditFilled,
-  PlusCircleTwoTone,
-  MinusCircleTwoTone,
-  HomeOutlined,
 } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import {
@@ -20,6 +20,8 @@ import {
   Tag,
 } from "antd";
 import axios from "axios";
+import _ from "lodash";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -28,23 +30,19 @@ import { DELETE_JOB_LINE_BY_PK } from "../../graphql/jobs-lines.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
+import JobCreateIOU from "../job-create-iou/job-create-iou.component";
+import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
 import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
 import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
 import JobLineStatusPopup from "../job-line-status-popup/job-line-status-popup.component";
 import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-reference.component";
-// import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
-// import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
-// import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
+import PartsOrderDrawer from "../parts-order-list-table/parts-order-list-table-drawer.component";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
-import _ from "lodash";
-import JobCreateIOU from "../job-create-iou/job-create-iou.component";
 import JobLinesExpander from "./job-lines-expander.component";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import moment from "moment";
-import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -57,6 +55,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
   setPartsOrderContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+  setPartsReceiveContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "partsReceive" })),
   setBillEnterContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "billEnter" })),
 });
@@ -66,6 +66,7 @@ export function JobLinesComponent({
   jobRO,
   technician,
   setPartsOrderContext,
+  setPartsReceiveContext,
   loading,
   refetch,
   jobLines,
@@ -74,6 +75,8 @@ export function JobLinesComponent({
   setJobLineEditContext,
   form,
   setBillEnterContext,
+  billsQuery,
+  handlePartsOrderOnRowClick,
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
 
@@ -341,7 +344,7 @@ export function JobLinesComponent({
       key: "actions",
       render: (text, record) => (
         <Space>
-          {(record.manual_line || jobIsPrivate) && (
+          {(record.manual_line || jobIsPrivate) && !technician && (
             <>
               <Button
                 disabled={jobRO}
@@ -424,6 +427,14 @@ export function JobLinesComponent({
   return (
     <div>
       <PartsOrderModalContainer />
+      {!technician && (
+        <PartsOrderDrawer
+          job={job}
+          billsQuery={billsQuery}
+          handleOnRowClick={handlePartsOrderOnRowClick}
+          setPartsReceiveContext={setPartsReceiveContext}
+        />
+      )}
       <PageHeader
         title={t("jobs.labels.estimatelines")}
         extra={

client/src/components/job-detail-lines/job-lines.container.jsx

@@ -1,6 +1,15 @@
 import React, { useMemo, useState } from "react";
 import JobLinesComponent from "./job-lines.component";
-function JobLinesContainer({ job, joblines, refetch, form, ...rest }) {
+function JobLinesContainer({
+  job,
+  joblines,
+  billsQuery,
+  handleBillOnRowClick,
+  handlePartsOrderOnRowClick,
+  refetch,
+  form,
+  ...rest
+}) {
   const [searchText, setSearchText] = useState("");
 
   const jobLines = useMemo(() => {
@@ -37,6 +46,9 @@ function JobLinesContainer({ job, joblines, refetch, form, ...rest }) {
     <JobLinesComponent
       refetch={refetch}
       jobLines={jobLines}
+      billsQuery={billsQuery}
+      handleBillOnRowClick={handleBillOnRowClick}
+      handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
       setSearchText={setSearchText}
       job={job}
       form={form}

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -23,7 +23,6 @@ export function JobEmployeeAssignments({
   jobRO,
   body,
   refinish,
-
   prep,
   csr,
   handleAdd,
@@ -78,7 +77,7 @@ export function JobEmployeeAssignments({
               setVisibility(false);
             }}
           >
-            Assign
+            {t("allocations.actions.assign")}
           </Button>
           <Button onClick={() => setVisibility(false)}>Close</Button>
         </Space>

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -43,13 +43,13 @@ export function JobEmployeeAssignmentsContainer({
     });
     if (refetch) refetch();
 
-    insertAuditTrail({
-      jobid: job.id,
-      operation: AuditTrailMapping.jobassignmentchange(operation, name),
-      type: "jobassignmentchange",
-    });
-
-    if (!!result.errors) {
+    if (!!!result.errors) {
+      insertAuditTrail({
+        jobid: job.id,
+        operation: AuditTrailMapping.jobassignmentchange(operation, name),
+        type: "jobassignmentchange",
+      });
+    } else {
       notification["error"]({
         message: t("jobs.errors.assigning", {
           message: JSON.stringify(result.errors),
@@ -67,18 +67,19 @@ export function JobEmployeeAssignmentsContainer({
       variables: { jobId: job.id, job: { [empAssignment]: null } },
     });
 
-    if (!!result.errors) {
+    if (!!!result.errors) {
+      insertAuditTrail({
+        jobid: job.id,
+        operation: AuditTrailMapping.jobassignmentremoved(operation),
+        type: "jobassignmentremoved",
+      });
+    } else {
       notification["error"]({
         message: t("jobs.errors.assigning", {
           message: JSON.stringify(result.errors),
         }),
       });
     }
-    insertAuditTrail({
-      jobid: job.id,
-      operation: AuditTrailMapping.jobassignmentremoved(operation),
-      type: "jobassignmentremoved",
-    });
     setLoading(false);
   };
 

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -23,14 +23,18 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+  technician: selectTechnician,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) =>
     dispatch(insertAuditTrail({ jobid, operation, type })),
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -41,6 +45,7 @@ export function JobLineConvertToLabor({
   jobline,
   job,
   insertAuditTrail,
+  technician,
   ...otherBtnProps
 }) {
   const { t } = useTranslation();
@@ -222,7 +227,7 @@ export function JobLineConvertToLabor({
   return (
     <>
       {children}
-      {jobline.act_price !== 0 && (
+      {jobline.act_price !== 0 && !technician && (
         <Popover
           disabled={jobline.convertedtolbr}
           content={overlay}

client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx

@@ -82,7 +82,7 @@ export default function JobReconciliationBillsTable({
         state.sortedInfo.order,
 
       render: (text, record) => (
-        <Checkbox disabled checked={record.bill.is_credit_memo} />
+        <Checkbox checked={record.bill.is_credit_memo} />
       ),
     },
   ];

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

@@ -1,4 +1,12 @@
-import { Collapse, Form, Input, InputNumber, Select, Switch } from "antd";
+import {
+  Collapse,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Switch,
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +18,8 @@ import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone, {
   PhoneItemFormatterValidation,
 } from "../form-items-formatted/phone-form-item.component";
+import JobsDetailChangeEstimator from "../jobs-detail-change-estimator/jobs-detail-change-estimator.component";
+import JobsDetailChangeFilehandler from "../jobs-detail-change-filehandler/jobs-detail-change-filehandler.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
 import JobsDetailRatesParts from "../jobs-detail-rates/jobs-detail-rates.parts.component";
 import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
@@ -25,6 +35,15 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
   const { t } = useTranslation();
   const { getFieldValue } = form;
+
+  const handleInsCoChange = (value) => {
+    const selectedCompany = bodyshop.md_ins_cos.find((s) => s.name === value);
+    if (selectedCompany) {
+      form.setFieldValue("ins_addr1", selectedCompany.street1);
+      form.setFieldValue("ins_city", selectedCompany.city);
+    }
+  };
+
   return (
     <div>
       <Collapse defaultActiveKey="insurance">
@@ -34,26 +53,20 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
           forceRender
         >
           <LayoutFormRow>
-            <Form.Item label={t("jobs.fields.ins_co_id")} name="ins_co_id">
+            <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
               <Input />
             </Form.Item>
             <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
               <Input />
             </Form.Item>
-            <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
-              <Input />
-            </Form.Item>
             <Form.Item
               label={t("jobs.fields.regie_number")}
               name="regie_number"
             >
               <Input />
             </Form.Item>
-            <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
-              <FormDatePicker />
-            </Form.Item>
             <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
-              <Select>
+              <Select onChange={handleInsCoChange}>
                 {bodyshop.md_ins_cos.map((s) => (
                   <Select.Option key={s.name} value={s.name}>
                     {s.name}
@@ -67,7 +80,15 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
             <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
               <Input />
             </Form.Item>
-            <Form.Item label={t("jobs.fields.ins_ct_ln")} name="ins_ct_ln">
+            <Form.Item
+              label={
+                <Space>
+                  {t("jobs.fields.ins_ct_ln")}
+                  <JobsDetailChangeFilehandler form={form} />
+                </Space>
+              }
+              name="ins_ct_ln"
+            >
               <Input />
             </Form.Item>
             <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
@@ -95,11 +116,24 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
             >
               <FormItemEmail email={getFieldValue("ins_ea")} />
             </Form.Item>
-
+            <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
+              <FormDatePicker />
+            </Form.Item>
+            <Form.Item label={t("jobs.fields.kmin")} name="kmin">
+              <Input />
+            </Form.Item>
             <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
               <Input />
             </Form.Item>
-            <Form.Item label={t("jobs.fields.est_ct_fn")} name="est_ct_fn">
+            <Form.Item
+              label={
+                <Space>
+                  {t("jobs.fields.est_ct_fn")}
+                  <JobsDetailChangeEstimator form={form} />
+                </Space>
+              }
+              name="est_ct_fn"
+            >
               <Input />
             </Form.Item>
             <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">

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

@@ -37,6 +37,15 @@ const lossColDamage = { sm: { span: 24 }, md: { span: 6 }, lg: { span: 4 } };
 export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
   const { getFieldValue } = form;
   const { t } = useTranslation();
+
+  const handleInsCoChange = (value) => {
+    const selectedCompany = bodyshop.md_ins_cos.find((s) => s.name === value);
+    if (selectedCompany) {
+      form.setFieldValue("ins_addr1", selectedCompany.street1);
+      form.setFieldValue("ins_city", selectedCompany.city);
+    }
+  };
+
   return (
     <div>
       <FormRow header={t("jobs.forms.claiminfo")}>
@@ -71,7 +80,7 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
         </Form.Item>
 
         <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
-          <Select disabled={jobRO}>
+          <Select disabled={jobRO} onChange={handleInsCoChange}>
             {bodyshop.md_ins_cos.map((s) => (
               <Select.Option key={s.name} value={s.name}>
                 {s.name}

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

@@ -304,7 +304,7 @@ export function JobsDetailHeaderActions({
         disabled={!job.converted}
         onClick={() => {
           setCardPaymentContext({
-            actions: {},
+            actions: { refetch },
             context: { jobid: job.id },
           });
         }}

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

@@ -4,7 +4,8 @@ import {
   PauseCircleOutlined,
   WarningFilled,
 } from "@ant-design/icons";
-import { Card, Col, Row, Space, Tag, Tooltip } from "antd";
+import { Card, Col, Divider, Row, Space, Tag, Tooltip } from "antd";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -62,6 +63,13 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
   ${job.v_make_desc || ""} 
   ${job.v_model_desc || ""}`.trim();
 
+  const bodyHrs = job.joblines
+    .filter((j) => j.mod_lbr_ty !== "LAR")
+    .reduce((acc, val) => acc + val.mod_lb_hrs, 0);
+  const refinishHrs = job.joblines
+    .filter((line) => line.mod_lbr_ty === "LAR")
+    .reduce((acc, val) => acc + val.mod_lb_hrs, 0);
+
   const ownerTitle = OwnerNameDisplayFunction(job).trim();
 
   return (
@@ -93,7 +101,13 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                 {job.status === bodyshop.md_ro_statuses.default_scheduled &&
                 job.scheduled_in ? (
                   <Tag>
-                    <DateTimeFormatter>{job.scheduled_in}</DateTimeFormatter>
+                    <Link
+                      to={`/manage/schedule?date=${moment(
+                        job.scheduled_in
+                      ).format("YYYY-MM-DD")}`}
+                    >
+                      <DateTimeFormatter>{job.scheduled_in}</DateTimeFormatter>
+                    </Link>
                   </Tag>
                 ) : null}
               </Space>
@@ -211,6 +225,12 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                 {job.owner?.tax_number || ""}
               </DataLabel>
             )}
+            <DataLabel
+              label={t("owners.fields.note")}
+              valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}
+            >
+              {job.owner?.note || ""}
+            </DataLabel>
           </div>
         </Card>
       </Col>
@@ -299,6 +319,11 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
         >
           <div>
             <JobEmployeeAssignments job={job} />
+            <Divider style={{ margin: ".5rem" }} />
+            <DataLabel label={t("jobs.labels.labor_hrs")}>
+              {bodyHrs.toFixed(1)} / {refinishHrs.toFixed(1)} /{" "}
+              {(bodyHrs + refinishHrs).toFixed(1)}
+            </DataLabel>
           </div>
         </Card>
       </Col>

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -1,44 +1,12 @@
-import { useQuery } from "@apollo/client";
-import queryString from "query-string";
 import React from "react";
-import { useHistory, useLocation } from "react-router-dom";
-import { QUERY_BILLS_BY_JOBID } from "../../graphql/bills.queries";
 import JobsDetailPliComponent from "./jobs-detail-pli.component";
 
-export default function JobsDetailPliContainer({ job }) {
-  const billsQuery = useQuery(QUERY_BILLS_BY_JOBID, {
-    variables: { jobid: job.id },
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-
-  const search = queryString.parse(useLocation().search);
-  const history = useHistory();
-
-  const handleBillOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.billid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.billid;
-      history.push({ search: queryString.stringify(search) });
-    }
-  };
-
-  const handlePartsOrderOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.partsorderid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.partsorderid;
-      history.push({ search: queryString.stringify(search) });
-    }
-  };
-
+export default function JobsDetailPliContainer({
+  job,
+  billsQuery,
+  handleBillOnRowClick,
+  handlePartsOrderOnRowClick,
+}) {
   return (
     <JobsDetailPliComponent
       job={job}

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

@@ -11,6 +11,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { pageLimit } from "../../utils/config";
+import { alphaSort, statusSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -36,7 +37,10 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-      sorter: true, //(a, b) => alphaSort(a.ro_number, b.ro_number),
+      sorter: search?.search
+        ? (a, b) =>
+            parseInt((a.ro_number || "0").replace(/\D/g, "")) - parseInt((b.ro_number || "0").replace(/\D/g, ""))
+        : true,
       sortOrder: sortcolumn === "ro_number" && sortorder,
       render: (text, record) => (
         <Link to={"/manage/jobs/" + record.id}>
@@ -50,7 +54,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       key: "ownr_ln",
       ellipsis: true,
       //sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-
       //sortOrder: sortcolumn === "ownr_ln" && sortorder,
       render: (text, record) => {
         return record.ownerid ? (
@@ -68,7 +71,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ownr_ph1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
-
       ellipsis: true,
       render: (text, record) => (
         <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
@@ -78,7 +80,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ownr_ph2"),
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
-
       ellipsis: true,
       render: (text, record) => (
         <StartChatButton phone={record.ownr_ph2} jobid={record.id} />
@@ -88,9 +89,8 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
-
       ellipsis: true,
-      sorter: true, // (a, b) => alphaSort(a.status, b.status),
+      sorter: search?.search ? (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.active_statuses) : true,
       sortOrder: sortcolumn === "status" && sortorder,
       render: (text, record) => {
         return record.status || t("general.labels.na");
@@ -106,7 +106,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
       key: "vehicle",
-
       ellipsis: true,
       render: (text, record) => {
         return record.vehicleid ? (
@@ -127,7 +126,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       dataIndex: "plate_no",
       key: "plate_no",
       ellipsis: true,
-      sorter: true, //(a, b) => alphaSort(a.plate_no, b.plate_no),
+      sorter: search?.search ? (a, b) => alphaSort(a.plate_no, b.plate_no) : true,
       sortOrder: sortcolumn === "plate_no" && sortorder,
       render: (text, record) => {
         return record.plate_no ? record.plate_no : "";
@@ -138,7 +137,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       dataIndex: "clm_no",
       key: "clm_no",
       ellipsis: true,
-      sorter: true, //(a, b) => alphaSort(a.clm_no, b.clm_no),
+      sorter: search?.search ? (a, b) => alphaSort(a.clm_no, b.clm_no) : true,
       sortOrder: sortcolumn === "clm_no" && sortorder,
       render: (text, record) =>
         `${record.clm_no || ""}${
@@ -156,7 +155,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       dataIndex: "clm_total",
       key: "clm_total",
 
-      sorter: true, //(a, b) => a.clm_total - b.clm_total,
+      sorter: search?.search ? (a, b) => a.clm_total - b.clm_total : true,
       sortOrder: sortcolumn === "clm_total" && sortorder,
       render: (text, record) => {
         return record.clm_total ? (
@@ -170,7 +169,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.owner_owing"),
       dataIndex: "owner_owing",
       key: "owner_owing",
-
       render: (text, record) => (
         <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
       ),

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

@@ -6,7 +6,8 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort, statusSort } from "../../utils/sorters";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import OwnerDetailUpdateJobsComponent from "../owner-detail-update-jobs/owner-detail-update-jobs.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -24,7 +25,7 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
-  
+
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
@@ -44,6 +45,15 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicleid",
       key: "vehicleid",
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicleid" && state.sortedInfo.order,
       render: (text, record) =>
         record.vehicleid ? (
           <Link to={`/manage/vehicles/${record.vehicleid}`}>
@@ -67,11 +77,28 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
-      sorter: (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
+      sorter: (a, b) =>
+        statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters: bodyshop.md_ro_statuses.statuses.map((status) => ({
+        text: status,
+        value: status,
+      })),
+      onFilter: (value, record) => value.includes(record.status),
+    },
+    {
+      title: t("jobs.fields.actual_completion"),
+      dataIndex: "actual_completion",
+      key: "actual_completion",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.actual_completion}</DateTimeFormatter>
+      ),
+      sorter: (a, b) => dateSort(a.actual_completion, b.actual_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_completion" &&
+        state.sortedInfo.order,
     },
-
     {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -0,0 +1,416 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { useLazyQuery, useMutation } from "@apollo/client";
+import {
+  Button,
+  Drawer,
+  Grid,
+  PageHeader,
+  Popconfirm,
+  Space,
+  Table,
+} from "antd";
+import queryString from "query-string";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
+import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateFormatter } from "../../utils/DateFormatter";
+import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
+import DataLabel from "../data-label/data-label.component";
+import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
+import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
+import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
+import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
+import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
+import PrintWrapper from "../print-wrapper/print-wrapper.component";
+
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBillEnterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter",
+      })
+    ),
+  setPartsReceiveContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "partsReceive",
+      })
+    ),
+});
+
+export function PartsOrderListTableDrawerComponent({
+  setBillEnterContext,
+  bodyshop,
+  jobRO,
+  job,
+  billsQuery,
+  handleOnRowClick,
+  setPartsReceiveContext,
+}) {
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "75%",
+    xl: "75%",
+    xxl: "65%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+  const responsibilityCenters = bodyshop.md_responsibility_centers;
+  const Templates = TemplateList("partsorder", { job });
+
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+
+  const [billData, setBillData] = useState(null);
+  const search = queryString.parse(useLocation().search);
+  const selectedpartsorder = search.partsorderid;
+
+  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
+  const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
+  const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
+  const { refetch } = billsQuery;
+
+  const selectedPartsOrderRecord = parts_orders.find(
+    (r) => r.id === selectedpartsorder
+  );
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (selectedPartsOrderRecord?.returnfrombill) {
+        try {
+          const { data } = await billQuery({
+            variables: { billid: selectedPartsOrderRecord.returnfrombill },
+          });
+          setBillData(data);
+        } catch (error) {
+          console.error("Error fetching bill data:", error);
+        }
+      } else setBillData(null);
+    };
+    fetchData();
+  }, [selectedPartsOrderRecord, billQuery]);
+
+  const recordActions = (record) => (
+    <Space direction="horizontal" wrap>
+      <Button
+        disabled={
+          jobRO ||
+          record.return ||
+          record.vendor.id === bodyshop.inhousevendorid
+        }
+        onClick={() => {
+          logImEXEvent("parts_order_receive_bill");
+          setPartsReceiveContext({
+            actions: { refetch: refetch },
+            context: {
+              jobId: job.id,
+              job: job,
+              partsorderlines: record.parts_order_lines.map((pol) => ({
+                joblineid: pol.job_line_id,
+                id: pol.id,
+                line_desc: pol.line_desc,
+                quantity: pol.quantity,
+                act_price: pol.act_price,
+                oem_partno: pol.oem_partno,
+              })),
+            },
+          });
+        }}
+      >
+        {t("parts_orders.actions.receive")}
+      </Button>
+      <Popconfirm
+        title={t("parts_orders.labels.confirmdelete")}
+        disabled={jobRO}
+        onConfirm={async () => {
+          //Delete the parts return.!
+          await deletePartsOrder({
+            variables: { partsOrderId: record.id },
+            update(cache) {
+              cache.modify({
+                fields: {
+                  parts_orders(existingPartsOrders, { readField }) {
+                    return existingPartsOrders.filter(
+                      (billref) => record.id !== readField("id", billref)
+                    );
+                  },
+                },
+              });
+            },
+          });
+        }}
+      >
+        <Button disabled={jobRO}>
+          <DeleteFilled />
+        </Button>
+      </Popconfirm>
+      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
+        <Button
+          disabled={
+            (jobRO ? !record.return : jobRO) ||
+            record.vendor.id === bodyshop.inhousevendorid
+          }
+          onClick={() => {
+            logImEXEvent("parts_order_receive_bill");
+            setBillEnterContext({
+              actions: { refetch: refetch },
+              context: {
+                job: job,
+                bill: {
+                  vendorid: record.vendor.id,
+                  is_credit_memo: record.return,
+                  billlines: record.parts_order_lines.map((pol) => ({
+                    joblineid: pol.job_line_id || "noline",
+                    line_desc: pol.line_desc,
+                    quantity: pol.quantity,
+                    actual_price: pol.act_price,
+                    cost_center: pol.jobline?.part_type
+                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                        ? pol.jobline.part_type !== "PAE"
+                          ? pol.jobline.part_type
+                          : null
+                        : responsibilityCenters.defaults &&
+                          (responsibilityCenters.defaults.costs[
+                            pol.jobline.part_type
+                          ] ||
+                            null)
+                      : null,
+                  })),
+                },
+              },
+            });
+          }}
+        >
+          {t("parts_orders.actions.receivebill")}
+        </Button>
+      </FeatureWrapperComponent>
+      <PrintWrapper
+        templateObject={{
+          name: record.return
+            ? Templates.parts_return_slip.key
+            : Templates.parts_order.key,
+          variables: { id: record.id },
+        }}
+        messageObject={{
+          subject: record.return
+            ? Templates.parts_return_slip.subject
+            : Templates.parts_order.subject,
+          to: record.vendor.email,
+        }}
+        id={job.id}
+      />
+    </Space>
+  );
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const rowExpander = (record) => {
+    const columns = [
+      {
+        title: t("parts_orders.fields.line_desc"),
+        dataIndex: "line_desc",
+        key: "line_desc",
+        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
+        sortOrder:
+          state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
+      },
+      {
+        title: t("parts_orders.fields.quantity"),
+        dataIndex: "quantity",
+        key: "quantity",
+        sorter: (a, b) => a.quantity - b.quantity,
+        sortOrder:
+          state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
+      },
+      {
+        title: t("parts_orders.fields.act_price"),
+        dataIndex: "act_price",
+        key: "act_price",
+        sorter: (a, b) => a.act_price - b.act_price,
+        sortOrder:
+          state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
+        render: (text, record) => (
+          <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
+        ),
+      },
+      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
+        ? [
+            {
+              title: t("parts_orders.fields.cost"),
+              dataIndex: "cost",
+              key: "cost",
+              sorter: (a, b) => a.cost - b.cost,
+              sortOrder:
+                state.sortedInfo.columnKey === "cost" && state.sortedInfo.order,
+              render: (text, record) => (
+                <CurrencyFormatter>{record.cost}</CurrencyFormatter>
+              ),
+            },
+          ]
+        : []),
+      {
+        title: t("parts_orders.fields.part_type"),
+        dataIndex: "part_type",
+        key: "part_type",
+        render: (text, record) =>
+          record.part_type
+            ? t(`joblines.fields.part_types.${record.part_type}`)
+            : null,
+      },
+      {
+        title: t("parts_orders.fields.oem_partno"),
+        dataIndex: "oem_partno",
+        key: "oem_partno",
+        sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
+        sortOrder:
+          state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
+      },
+      {
+        title: t("parts_orders.fields.line_remarks"),
+        dataIndex: "line_remarks",
+        key: "line_remarks",
+      },
+      {
+        title: t("parts_orders.fields.status"),
+        dataIndex: "status",
+        key: "status",
+      },
+
+      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
+        ? [
+            {
+              title: t("parts_orders.fields.cm_received"),
+              dataIndex: "cm_received",
+              key: "cm_received",
+              render: (text, record) => (
+                <PartsOrderCmReceived
+                  orderLineId={record.id}
+                  checked={record.cm_received}
+                  partsorderid={selectedPartsOrderRecord.id}
+                />
+              ),
+            },
+          ]
+        : []),
+      {
+        title: t("parts_orders.fields.backordered_on"),
+        dataIndex: "backordered_on",
+        key: "backordered_on",
+        render: (text, record) => <DateFormatter>{text}</DateFormatter>,
+      },
+      {
+        title: t("parts_orders.fields.backordered_eta"),
+        dataIndex: "backordered_eta",
+        key: "backordered_eta",
+        render: (text, record) => (
+          <PartsOrderBackorderEta
+            backordered_eta={record.backordered_eta}
+            disabled={jobRO}
+            partsOrderStatus={record.status}
+            partsLineId={record.id}
+            jobLineId={record.job_line_id}
+          />
+        ),
+      },
+
+      {
+        title: t("general.labels.actions"),
+        dataIndex: "actions",
+        key: "actions",
+        render: (text, record) => (
+          <Space wrap>
+            <PartsOrderDeleteLine
+              disabled={jobRO}
+              partsOrderStatus={record.status}
+              partsLineId={record.id}
+              partsOrderId={selectedpartsorder}
+              jobLineId={record.job_line_id}
+            />
+            <PartsOrderLineBackorderButton
+              disabled={jobRO}
+              partsOrderStatus={record.status}
+              partsLineId={record.id}
+              jobLineId={record.job_line_id}
+            />
+          </Space>
+        ),
+      },
+    ];
+
+    return (
+      <div>
+        <PageHeader
+          title={
+            billData
+              ? `${record.vendor.name} - ${record.order_number} - ${t(
+                  "bills.labels.returnfrombill"
+                )}: ${billData.bills_by_pk.invoice_number}`
+              : `${record.vendor.name} - ${record.order_number}`
+          }
+          extra={recordActions(record)}
+        />
+        <Table
+          scroll={{
+            x: true, //y: "50rem"
+          }}
+          columns={columns}
+          rowKey="id"
+          dataSource={record.parts_order_lines}
+          onChange={handleTableChange}
+        />
+        <DataLabel label={t("parts_orders.fields.comments")}>
+          <div style={{ whiteSpace: "pre" }}>{record.comments}</div>
+        </DataLabel>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <PartsReceiveModalContainer />
+      <Drawer
+        placement="right"
+        onClose={() => handleOnRowClick(null)}
+        open={selectedpartsorder}
+        closable
+        width={drawerPercentage}
+      >
+        {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)}
+      </Drawer>
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PartsOrderListTableDrawerComponent);

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -1,39 +1,21 @@
 import { DeleteFilled, EyeFilled, SyncOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import {
-  Button,
-  Card,
-  Checkbox,
-  Drawer,
-  Grid,
-  Input,
-  PageHeader,
-  Popconfirm,
-  Space,
-  Table,
-} from "antd";
-import queryString from "query-string";
+import { Button, Card, Checkbox, Input, Popconfirm, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
-import DataLabel from "../data-label/data-label.component";
-import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
-import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
-import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
-import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
+import { alphaSort } from "../../utils/sorters";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
+import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -56,21 +38,6 @@ export function PartsOrderListTableComponent({
   handleOnRowClick,
   setPartsReceiveContext,
 }) {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
-  const bpoints = {
-    xs: "100%",
-    sm: "100%",
-    md: "100%",
-    lg: "75%",
-    xl: "75%",
-    xxl: "65%",
-  };
-  const drawerPercentage = selectedBreakpoint
-    ? bpoints[selectedBreakpoint[0]]
-    : "100%";
   const responsibilityCenters = bodyshop.md_responsibility_centers;
   const Templates = TemplateList("partsorder", { job });
 
@@ -78,10 +45,8 @@ export function PartsOrderListTableComponent({
   const [state, setState] = useState({
     sortedInfo: {},
   });
-  const search = queryString.parse(useLocation().search);
-  const selectedpartsorder = search.partsorderid;
-  const [searchText, setSearchText] = useState("");
 
+  const [searchText, setSearchText] = useState("");
   const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
 
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
@@ -90,7 +55,11 @@ export function PartsOrderListTableComponent({
   const recordActions = (record, showView = false) => (
     <Space wrap>
       {showView && (
-        <Button onClick={() => handleOnRowClick(record)}>
+        <Button
+          onClick={() => {
+            handleOnRowClick(record);
+          }}
+        >
           <EyeFilled />
         </Button>
       )}
@@ -166,7 +135,7 @@ export function PartsOrderListTableComponent({
                 is_credit_memo: record.return,
                 billlines: record.parts_order_lines.map((pol) => {
                   return {
-                    joblineid: pol.job_line_id,
+                    joblineid: pol.job_line_id || "noline",
                     line_desc: pol.line_desc,
                     quantity: pol.quantity,
 
@@ -277,164 +246,6 @@ export function PartsOrderListTableComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const selectedPartsOrderRecord = parts_orders.find(
-    (r) => r.id === selectedpartsorder
-  );
-
-  const rowExpander = (record) => {
-    const columns = [
-      {
-        title: t("parts_orders.fields.line_desc"),
-        dataIndex: "line_desc",
-        key: "line_desc",
-        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
-        sortOrder:
-          state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
-      },
-      {
-        title: t("parts_orders.fields.quantity"),
-        dataIndex: "quantity",
-        key: "quantity",
-        sorter: (a, b) => a.quantity - b.quantity,
-        sortOrder:
-          state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
-      },
-      {
-        title: t("parts_orders.fields.act_price"),
-        dataIndex: "act_price",
-        key: "act_price",
-        sorter: (a, b) => a.act_price - b.act_price,
-        sortOrder:
-          state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
-        render: (text, record) => (
-          <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
-        ),
-      },
-      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
-        ? [
-            {
-              title: t("parts_orders.fields.cost"),
-              dataIndex: "cost",
-              key: "cost",
-              sorter: (a, b) => a.cost - b.cost,
-              sortOrder:
-                state.sortedInfo.columnKey === "cost" && state.sortedInfo.order,
-              render: (text, record) => (
-                <CurrencyFormatter>{record.cost}</CurrencyFormatter>
-              ),
-            },
-          ]
-        : []),
-      {
-        title: t("parts_orders.fields.part_type"),
-        dataIndex: "part_type",
-        key: "part_type",
-        render: (text, record) =>
-          record.part_type
-            ? t(`joblines.fields.part_types.${record.part_type}`)
-            : null,
-      },
-      {
-        title: t("parts_orders.fields.oem_partno"),
-        dataIndex: "oem_partno",
-        key: "oem_partno",
-        sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
-        sortOrder:
-          state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
-      },
-      {
-        title: t("parts_orders.fields.line_remarks"),
-        dataIndex: "line_remarks",
-        key: "line_remarks",
-      },
-      {
-        title: t("parts_orders.fields.status"),
-        dataIndex: "status",
-        key: "status",
-      },
-
-      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
-        ? [
-            {
-              title: t("parts_orders.fields.cm_received"),
-              dataIndex: "cm_received",
-              key: "cm_received",
-              render: (text, record) => (
-                <PartsOrderCmReceived
-                  orderLineId={record.id}
-                  checked={record.cm_received}
-                  partsorderid={selectedPartsOrderRecord.id}
-                />
-              ),
-            },
-          ]
-        : []),
-      {
-        title: t("parts_orders.fields.backordered_on"),
-        dataIndex: "backordered_on",
-        key: "backordered_on",
-        render: (text, record) => <DateFormatter>{text}</DateFormatter>,
-      },
-      {
-        title: t("parts_orders.fields.backordered_eta"),
-        dataIndex: "backordered_eta",
-        key: "backordered_eta",
-        render: (text, record) => (
-          <PartsOrderBackorderEta
-            backordered_eta={record.backordered_eta}
-            disabled={jobRO}
-            partsOrderStatus={record.status}
-            partsLineId={record.id}
-            jobLineId={record.job_line_id}
-          />
-        ),
-      },
-
-      {
-        title: t("general.labels.actions"),
-        dataIndex: "actions",
-        key: "actions",
-        render: (text, record) => (
-          <Space wrap>
-            <PartsOrderDeleteLine
-              disabled={jobRO}
-              partsOrderStatus={record.status}
-              partsLineId={record.id}
-              partsOrderId={selectedpartsorder}
-              jobLineId={record.job_line_id}
-            />
-            <PartsOrderLineBackorderButton
-              disabled={jobRO}
-              partsOrderStatus={record.status}
-              partsLineId={record.id}
-              jobLineId={record.job_line_id}
-            />
-          </Space>
-        ),
-      },
-    ];
-
-    return (
-      <div>
-        <PageHeader
-          title={record && `${record.vendor.name} - ${record.order_number}`}
-          extra={recordActions(record)}
-        />
-        <Table
-          scroll={{
-            x: true, //y: "50rem"
-          }}
-          columns={columns}
-          rowKey="id"
-          dataSource={record.parts_order_lines}
-        />
-        <DataLabel label={t("parts_orders.fields.comments")}>
-          <div style={{ whiteSpace: "pre" }}>{record.comments}</div>
-        </DataLabel>
-      </div>
-    );
-  };
-
   const filteredPartsOrders = parts_orders
     ? searchText === ""
       ? parts_orders
@@ -470,15 +281,12 @@ export function PartsOrderListTableComponent({
       }
     >
       <PartsReceiveModalContainer />
-      <Drawer
-        placement="right"
-        onClose={() => handleOnRowClick(null)}
-        visible={selectedpartsorder}
-        closable
-        width={drawerPercentage}
-      >
-        {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)}
-      </Drawer>
+      <PartsOrderDrawer
+        job={job}
+        billsQuery={billsQuery}
+        handleOnRowClick={handleOnRowClick}
+        setPartsReceiveContext={setPartsReceiveContext}
+      />
       <Table
         loading={billsQuery.loading}
         scroll={{

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,17 +1,17 @@
-import { DeleteFilled, WarningFilled, DownOutlined } from "@ant-design/icons";
+import { DeleteFilled, DownOutlined, WarningFilled } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
+  Checkbox,
   Divider,
+  Dropdown,
   Form,
   Input,
   InputNumber,
+  Menu,
   Radio,
+  Select,
   Space,
   Tag,
-  Select,
-  Menu,
-  Dropdown,
-  Checkbox,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -255,7 +255,7 @@ export function PartsOrderModalComponent({
                           },
                         ]}
                       >
-                        <InputNumber />
+                        <InputNumber min={1} />
                       </Form.Item>
                       <Form.Item
                         label={t("parts_orders.fields.act_price")}

client/src/components/payment-expanded-row/payment-expanded-row.component.jsx

@@ -139,8 +139,8 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
         contentStyle={{ fontWeight: "600" }}
         column={4}
       >
-        <Descriptions.Item label={t("job_payments.titles.payer")}>
-          {record.payer}
+        <Descriptions.Item label={t("job_payments.titles.hint")}>
+          {payment_response?.response?.methodhint}
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.payername")}>
           {payment_response?.response?.nameOnCard ?? ""}
@@ -155,7 +155,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
           {record.transactionid}
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.paymentid")}>
-          {payment_response?.response?.paymentreferenceid ?? ""}
+          {payment_response?.ext_paymentid ?? ""}
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.paymenttype")}>
           {record.type}

client/src/components/payment-mark-export-button/payment-mark-export-button-component.jsx

@@ -1,16 +1,18 @@
-import React from "react";
-import { Button, notification } from "antd";
 import { useMutation } from "@apollo/client";
+import { Button, notification } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
-import { setModalContext } from "../../redux/modals/modals.actions";
 import { connect } from "react-redux";
-import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { createStructuredSelector } from "reselect";
+import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
+import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectPayment } from "../../redux/modals/modals.selectors";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
+  paymentModal: selectPayment,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -24,6 +26,7 @@ const PaymentMarkForExportButton = ({
   refetch,
   setPaymentContext,
   currentUser,
+  paymentModal,
 }) => {
   const { t } = useTranslation();
   const [insertExportLog, { loading: exportLogLoading }] =
@@ -46,7 +49,6 @@ const PaymentMarkForExportButton = ({
         ],
       },
     });
-
     const paymentUpdateResponse = await updatePayment({
       variables: {
         paymentId: payment.id,
@@ -55,25 +57,33 @@ const PaymentMarkForExportButton = ({
         },
       },
     });
-
     if (!!!paymentUpdateResponse.errors) {
       notification.open({
         type: "success",
         key: "paymentsuccessmarkforexport",
         message: t("payments.successes.markexported"),
       });
-
-      if (refetch) refetch();
-
       setPaymentContext({
         actions: {
           refetch,
         },
         context: {
+          ...paymentModal.context,
           ...payment,
           exportedat: today,
         },
       });
+
+      if (refetch) {
+        if (paymentModal.context.refetchRequiresContext) {
+          refetch(
+            paymentUpdateResponse &&
+              paymentUpdateResponse.data.update_payments.returning[0]
+          );
+        } else {
+          refetch();
+        }
+      }
     } else {
       notification["error"]({
         message: t("payments.errors.exporting", {

client/src/components/payment-modal/payment-modal.container.jsx

@@ -1,5 +1,4 @@
 import { useMutation } from "@apollo/client";
-
 import { Button, Form, Modal, notification, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,8 +18,8 @@ import {
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import PaymentForm from "../payment-form/payment-form.component";
-import PaymentReexportButton from "../payment-reexport-button/payment-reexport-button.component";
 import PaymentMarkForExportButton from "../payment-mark-export-button/payment-mark-export-button-component";
+import PaymentReexportButton from "../payment-reexport-button/payment-reexport-button.component";
 
 const mapStateToProps = createStructuredSelector({
   paymentModal: selectPayment,
@@ -97,16 +96,21 @@ function PaymentModalContainer({
         });
 
         if (!!!updatedPayment.errors) {
-          notification["success"]({ message: t("payments.successes.payment") });
+          notification["success"]({ message: t("payments.successes.paymentupdate") });
         } else {
-          notification["error"]({ message: t("payments.errors.payment") });
+          notification["error"]({ message: t("payments.errors.paymentupdate") });
         }
       }
 
-      if (actions.refetch)
-        actions.refetch(
-          updatedPayment && updatedPayment.data.update_payments.returning[0]
-        );
+      if (actions.refetch) {
+        if (context.refetchRequiresContext) {
+          actions.refetch(
+            updatedPayment && updatedPayment.data.update_payments.returning[0]
+          );
+        } else {
+          actions.refetch();
+        }
+      }
 
       if (enterAgain) {
         const prev = form.getFieldsValue(["date"]);
@@ -159,7 +163,7 @@ function PaymentModalContainer({
       }}
       afterClose={() => form.resetFields()}
       footer={
-        <span>
+        <Space>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
           <Button loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}
@@ -175,7 +179,7 @@ function PaymentModalContainer({
               {t("general.actions.saveandnew")}
             </Button>
           )}
-        </span>
+        </Space>
       }
     >
       {!context || (context && !context.id) ? null : (
@@ -194,7 +198,6 @@ function PaymentModalContainer({
         autoComplete={"off"}
         form={form}
         layout="vertical"
-        initialValues={context || {}}
         disabled={context?.exportedat}
       >
         <PaymentForm form={form} />

client/src/components/payment-reexport-button/payment-reexport-button.component.jsx

@@ -1,17 +1,27 @@
-import React from "react";
-import { Button, notification } from "antd";
-import { useTranslation } from "react-i18next";
-import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
 import { useMutation } from "@apollo/client";
-import { setModalContext } from "../../redux/modals/modals.actions";
+import { Button, notification } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectPayment } from "../../redux/modals/modals.selectors";
 
+const mapStateToProps = createStructuredSelector({
+  paymentModal: selectPayment,
+});
 const mapDispatchToProps = (dispatch) => ({
   setPaymentContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "payment" })),
 });
 
-const PaymentReexportButton = ({ payment, refetch, setPaymentContext }) => {
+const PaymentReexportButton = ({
+  paymentModal,
+  payment,
+  refetch,
+  setPaymentContext,
+}) => {
   const { t } = useTranslation();
   const [updatePayment, { loading }] = useMutation(UPDATE_PAYMENT);
 
@@ -24,25 +34,32 @@ const PaymentReexportButton = ({ payment, refetch, setPaymentContext }) => {
         },
       },
     });
-
     if (!!!paymentUpdateResponse.errors) {
       notification.open({
         type: "success",
         key: "paymentsuccessexport",
         message: t("payments.successes.markreexported"),
       });
-
-      if (refetch) refetch();
-
       setPaymentContext({
         actions: {
           refetch,
         },
         context: {
+          ...paymentModal.context,
           ...payment,
           exportedat: null,
         },
       });
+      if (refetch) {
+        if (paymentModal.context.refetchRequiresContext) {
+          refetch(
+            paymentUpdateResponse &&
+              paymentUpdateResponse.data.update_payments.returning[0]
+          );
+        } else {
+          refetch();
+        }
+      }
     } else {
       notification["error"]({
         message: t("payments.errors.exporting", {
@@ -63,4 +80,7 @@ const PaymentReexportButton = ({ payment, refetch, setPaymentContext }) => {
   );
 };
 
-export default connect(null, mapDispatchToProps)(PaymentReexportButton);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PaymentReexportButton);

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

@@ -14,11 +14,11 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { pageLimit } from "../../utils/config";
 import { alphaSort } from "../../utils/sorters";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -184,7 +184,10 @@ export function PaymentsListPaginated({
                       }
                     : refetch,
                 },
-                context: apolloResults ? apolloResults : record,
+                context: {
+                  ...(apolloResults ? apolloResults : record),
+                  refetchRequiresContext: true,
+                },
               });
             }}
           >

client/src/components/print-center-jobs-labels/print-center-jobs-labels.component.jsx

@@ -6,6 +6,7 @@ import {
   notification,
   Popover,
   Radio,
+  Space,
 } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -115,10 +116,16 @@ export function PrintCenterJobsLabels({ bodyshop, jobId }) {
         >
           <InputNumber min={1} precision={0} max={99} />
         </Form.Item>
-        <Button type="primary" loading={loading} onClick={handleOk}>
-          {t("general.actions.print")}
-        </Button>
-        <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <Space>
+            <Button type="primary" loading={loading} onClick={handleOk}>
+              {t("general.actions.print")}
+            </Button>
+            <Button onClick={handleCancel}>
+              {t("general.actions.cancel")}
+            </Button>
+          </Space>
+        </div>
       </Form>
     </Card>
   );

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

@@ -18,8 +18,8 @@ const sortByParentId = (arr) => {
   //console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
 
   while (byParentsIdsList[parentId]) {
-    sortedList.push(byParentsIdsList[parentId][0]);
-    parentId = byParentsIdsList[parentId][0].id;
+    sortedList.push(...byParentsIdsList[parentId]); //Spread in the whole list in case several items have the same parents. 
+    parentId = byParentsIdsList[parentId][byParentsIdsList[parentId].length -1].id; //Grab the ID from the last one.
   }
 
   if (byParentsIdsList["null"])

client/src/components/production-list-columns/production-list-columns.data.js

@@ -1,7 +1,6 @@
 import { BranchesOutlined, PauseCircleOutlined } from "@ant-design/icons";
 import { Checkbox, Space, Tooltip } from "antd";
 import i18n from "i18next";
-import moment from "moment";
 import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeFormatter } from "../../utils/DateFormatter";
@@ -10,9 +9,7 @@ import { onlyUnique } from "../../utils/arrayHelper";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
-import OwnerNameDisplay, {
-  OwnerNameDisplayFunction,
-} from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
 import ProductionListColumnAlert from "./production-list-columns.alert.component";
 import ProductionListColumnBodyPriority from "./production-list-columns.bodypriority.component";
@@ -35,11 +32,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       dataIndex: "viewdetail",
       key: "viewdetail",
       ellipsis: true,
-      render: (text, record) => (
-        <Link to={{ search: `?selected=${record.id}` }}>
-          {i18n.t("general.labels.view")}
-        </Link>
-      ),
+      render: (text, record) => <Link to={{ search: `?selected=${record.id}` }}>{i18n.t("general.labels.view")}</Link>
     },
     {
       title: i18n.t("jobs.fields.ro_number"),
@@ -47,23 +40,18 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "ro_number",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
-      sortOrder:
-        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       render: (text, record) =>
         technician ? (
           <Link to={`/tech/joblookup?selected=${record.id}`}>
             {record.ro_number}
-            {record.suspended && (
-              <PauseCircleOutlined style={{ color: "orangered" }} />
-            )}
+            {record.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
           </Link>
         ) : (
           <Link to={`/manage/jobs/${record.id}`}>
             <Space>
               {record.ro_number}
-              {record.suspended && (
-                <PauseCircleOutlined style={{ color: "orangered" }} />
-              )}
+              {record.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
               {record.iouparent && (
                 <Tooltip title={i18n.t("jobs.labels.iou")}>
                   <BranchesOutlined style={{ color: "orangered" }} />
@@ -71,7 +59,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
               )}
             </Space>
           </Link>
-        ),
+        )
     },
     {
       title: i18n.t("jobs.fields.owner"),
@@ -86,10 +74,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
             <OwnerNameDisplay ownerObject={record} />
           </Link>
         ),
-      sorter: (a, b) =>
-        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
-      sortOrder:
-        state.sortedInfo.columnKey === "ownr" && state.sortedInfo.order,
+      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder: state.sortedInfo.columnKey === "ownr" && state.sortedInfo.order
     },
     {
       title: i18n.t("jobs.fields.vehicle"),
@@ -98,13 +84,10 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       ellipsis: true,
       sorter: (a, b) =>
         alphaSort(
-          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
-            a.v_model_desc || ""
-          }`,
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`,
           `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
         ),
-      sortOrder:
-        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
       render: (text, record) =>
         technician ? (
           <>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
@@ -116,7 +99,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
           } ${record.v_make_desc || ""} ${record.v_model_desc || ""} ${
             record.v_color || ""
           } ${record.plate_no || ""}`}</Link>
-        ),
+        )
     },
     {
       title: i18n.t("jobs.fields.actual_in"),
@@ -124,11 +107,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "actual_in",
       ellipsis: true,
       sorter: (a, b) => dateSort(a.actual_in, b.actual_in),
-      sortOrder:
-        state.sortedInfo.columnKey === "actual_in" && state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListDate record={record} field="actual_in" time />
-      ),
+      sortOrder: state.sortedInfo.columnKey === "actual_in" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListDate record={record} field="actual_in" time />
     },
     {
       title: i18n.t("jobs.fields.actual_in") + " (HH:MM)",
@@ -136,28 +116,16 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "actual_in_time",
       ellipsis: true,
 
-      render: (text, record) => (
-        <TimeFormatter>{record.actual_in}</TimeFormatter>
-      ),
+      render: (text, record) => <TimeFormatter>{record.actual_in}</TimeFormatter>
     },
     {
       title: i18n.t("jobs.fields.scheduled_completion"),
       dataIndex: "scheduled_completion",
       key: "scheduled_completion",
       ellipsis: true,
-      sorter: (a, b) =>
-        dateSort(a.scheduled_completion, b.scheduled_completion),
-      sortOrder:
-        state.sortedInfo.columnKey === "scheduled_completion" &&
-        state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListDate
-          record={record}
-          field="scheduled_completion"
-          pastIndicator
-          time
-        />
-      ),
+      sorter: (a, b) => dateSort(a.scheduled_completion, b.scheduled_completion),
+      sortOrder: state.sortedInfo.columnKey === "scheduled_completion" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListDate record={record} field="scheduled_completion" pastIndicator time />
     },
     {
       title: i18n.t("jobs.fields.scheduled_completion") + " (HH:MM)",
@@ -165,9 +133,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "scheduled_completion_time",
       ellipsis: true,
 
-      render: (text, record) => (
-        <TimeFormatter>{record.scheduled_completion}</TimeFormatter>
-      ),
+      render: (text, record) => <TimeFormatter>{record.scheduled_completion}</TimeFormatter>
     },
     {
       title: i18n.t("jobs.fields.date_last_contacted"),
@@ -175,10 +141,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "date_last_contacted",
       ellipsis: true,
       sorter: (a, b) => dateSort(a.date_last_contacted, b.date_last_contacted),
-      sortOrder:
-        state.sortedInfo.columnKey === "date_last_contacted" &&
-        state.sortedInfo.order,
-      render: (text, record) => <ProductionListLastContacted record={record} />,
+      sortOrder: state.sortedInfo.columnKey === "date_last_contacted" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListLastContacted record={record} />
     },
     {
       title: i18n.t("jobs.fields.date_next_contact"),
@@ -186,22 +150,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "date_next_contact",
       ellipsis: true,
       sorter: (a, b) => dateSort(a.date_next_contact, b.date_next_contact),
-      sortOrder:
-        state.sortedInfo.columnKey === "date_next_contact" &&
-        state.sortedInfo.order,
-      render: (text, record) => (
-        <span
-          style={{
-            color:
-              record.date_next_contact &&
-              moment(record.date_next_contact).isBefore(moment())
-                ? "red"
-                : "",
-          }}
-        >
-          <ProductionListDate record={record} field="date_next_contact" time />
-        </span>
-      ),
+      sortOrder: state.sortedInfo.columnKey === "date_next_contact" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListDate record={record} field="date_next_contact" pastIndicator time />
     },
     {
       title: i18n.t("jobs.fields.scheduled_delivery"),
@@ -209,17 +159,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "scheduled_delivery",
       ellipsis: true,
       sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery),
-      sortOrder:
-        state.sortedInfo.columnKey === "scheduled_delivery" &&
-        state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListDate
-          record={record}
-          field="scheduled_delivery"
-          pastIndicator
-          time
-        />
-      ),
+      sortOrder: state.sortedInfo.columnKey === "scheduled_delivery" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListDate record={record} field="scheduled_delivery" pastIndicator time />
     },
     {
       title: i18n.t("jobs.fields.scheduled_delivery") + " (HH:MM)",
@@ -227,9 +168,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "scheduled_delivery_time",
       ellipsis: true,
 
-      render: (text, record) => (
-        <TimeFormatter>{record.scheduled_delivery}</TimeFormatter>
-      ),
+      render: (text, record) => <TimeFormatter>{record.scheduled_delivery}</TimeFormatter>
     },
     {
       title: i18n.t("jobs.fields.ins_co_nm"),
@@ -237,8 +176,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "ins_co_nm",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
-      sortOrder:
-        state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order
     },
     {
       title: i18n.t("jobs.fields.clm_no"),
@@ -246,8 +184,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "clm_no",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
     },
     {
       title: i18n.t("jobs.fields.clm_total"),
@@ -255,11 +192,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "clm_total",
       ellipsis: true,
       sorter: (a, b) => a.clm_total - b.clm_total,
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
-      render: (text, record) => (
-        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-      ),
+      sortOrder: state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+      render: (text, record) => <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
     },
     {
       title: i18n.t("jobs.fields.owner_owing"),
@@ -267,49 +201,36 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "owner_owing",
       ellipsis: true,
       sorter: (a, b) => a.owner_owing - b.owner_owing,
-      sortOrder:
-        state.sortedInfo.columnKey === "owner_owing" && state.sortedInfo.order,
-      render: (text, record) => (
-        <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
-      ),
+      sortOrder: state.sortedInfo.columnKey === "owner_owing" && state.sortedInfo.order,
+      render: (text, record) => <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
     },
     {
       title: i18n.t("jobs.fields.ownr_ph1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
       ellipsis: true,
-      render: (text, record) => (
-        <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-      ),
+      render: (text, record) => <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
     },
     {
       title: i18n.t("jobs.fields.ownr_ph2"),
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
       ellipsis: true,
-      render: (text, record) => (
-        <PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>
-      ),
+      render: (text, record) => <PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>
     },
     {
       title: i18n.t("jobs.fields.specialcoveragepolicy"),
       dataIndex: "special_coverage_policy",
       key: "special_coverage_policy",
       ellipsis: true,
-      sorter: (a, b) =>
-        Number(a.special_coverage_policy) - Number(b.special_coverage_policy),
-      sortOrder:
-        state.sortedInfo.columnKey === "special_coverage_policy" &&
-        state.sortedInfo.order,
+      sorter: (a, b) => Number(a.special_coverage_policy) - Number(b.special_coverage_policy),
+      sortOrder: state.sortedInfo.columnKey === "special_coverage_policy" && state.sortedInfo.order,
       filters: [
         { text: "True", value: true },
-        { text: "False", value: false },
+        { text: "False", value: false }
       ],
-      onFilter: (value, record) =>
-        value.includes(record.special_coverage_policy),
-      render: (text, record) => (
-        <Checkbox disabled checked={record.special_coverage_policy} />
-      ),
+      onFilter: (value, record) => value === record.special_coverage_policy,
+      render: (text, record) => <Checkbox checked={record.special_coverage_policy} />
     },
 
     {
@@ -318,15 +239,13 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "alt_transport",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
-      sortOrder:
-        state.sortedInfo.columnKey === "alt_transport" &&
-        state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.order,
       filters:
         (bodyshop &&
           bodyshop.appt_alt_transport.map((s) => {
             return {
               text: s,
-              value: [s],
+              value: [s]
             };
           })) ||
         [],
@@ -336,7 +255,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
           {record.alt_transport}
           <JobAltTransportChange job={record} />
         </div>
-      ),
+      )
     },
     {
       title: i18n.t("jobs.fields.status"),
@@ -344,9 +263,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "status",
       ellipsis: true,
       sorter: (a, b) => statusSort(a.status, b.status, activeStatuses),
-      sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      render: (text, record) => <ProductionListColumnStatus record={record} />,
+      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListColumnStatus record={record} />
     },
     {
       title: i18n.t("jobs.fields.category"),
@@ -359,37 +277,30 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
           bodyshop.md_categories.map((s) => {
             return {
               text: s,
-              value: [s],
+              value: [s]
             };
           })) ||
         [],
       onFilter: (value, record) => value.includes(record.category),
       sorter: (a, b) => alphaSort(a.category, b.category),
-      sortOrder:
-        state.sortedInfo.columnKey === "category" && state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListColumnCategory record={record} />
-      ),
+      sortOrder: state.sortedInfo.columnKey === "category" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListColumnCategory record={record} />
     },
     {
       title: i18n.t("production.labels.bodyhours"),
       dataIndex: "labhrs",
       key: "labhrs",
-      sorter: (a, b) =>
-        a.labhrs.aggregate.sum.mod_lb_hrs - b.labhrs.aggregate.sum.mod_lb_hrs,
-      sortOrder:
-        state.sortedInfo.columnKey === "labhrs" && state.sortedInfo.order,
-      render: (text, record) => record.labhrs.aggregate.sum.mod_lb_hrs,
+      sorter: (a, b) => a.labhrs.aggregate.sum.mod_lb_hrs - b.labhrs.aggregate.sum.mod_lb_hrs,
+      sortOrder: state.sortedInfo.columnKey === "labhrs" && state.sortedInfo.order,
+      render: (text, record) => record.labhrs.aggregate.sum.mod_lb_hrs
     },
     {
       title: i18n.t("production.labels.refinishhours"),
       dataIndex: "larhrs",
       key: "larhrs",
-      sorter: (a, b) =>
-        a.larhrs.aggregate.sum.mod_lb_hrs - b.larhrs.aggregate.sum.mod_lb_hrs,
-      sortOrder:
-        state.sortedInfo.columnKey === "larhrs" && state.sortedInfo.order,
-      render: (text, record) => record.larhrs.aggregate.sum.mod_lb_hrs,
+      sorter: (a, b) => a.larhrs.aggregate.sum.mod_lb_hrs - b.larhrs.aggregate.sum.mod_lb_hrs,
+      sortOrder: state.sortedInfo.columnKey === "larhrs" && state.sortedInfo.order,
+      render: (text, record) => record.larhrs.aggregate.sum.mod_lb_hrs
     },
     {
       title: i18n.t("production.labels.totalhours"),
@@ -399,38 +310,36 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
         a.labhrs.aggregate.sum.mod_lb_hrs +
         a.larhrs.aggregate.sum.mod_lb_hrs -
         (b.labhrs.aggregate.sum.mod_lb_hrs + b.larhrs.aggregate.sum.mod_lb_hrs),
-      sortOrder:
-        state.sortedInfo.columnKey === "totalhours" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "totalhours" && state.sortedInfo.order,
       render: (text, record) =>
-        (
-          record.labhrs.aggregate.sum.mod_lb_hrs +
-          record.larhrs.aggregate.sum.mod_lb_hrs
-        ).toFixed(1),
+        (record.labhrs.aggregate.sum.mod_lb_hrs + record.larhrs.aggregate.sum.mod_lb_hrs).toFixed(1)
     },
     {
       title: i18n.t("production.labels.alert"),
       dataIndex: "alert",
       key: "alert",
-      sorter: (a, b) =>
-        Number(a.production_vars?.alert || false) -
-        Number(b.production_vars?.alert || false),
-      sortOrder:
-        state.sortedInfo.columnKey === "alert" && state.sortedInfo.order,
-      render: (text, record) => <ProductionListColumnAlert record={record} />,
+      sorter: (a, b) => Number(a.production_vars?.alert || false) - Number(b.production_vars?.alert || false),
+      sortOrder: state.sortedInfo.columnKey === "alert" && state.sortedInfo.order,
+      filters: [
+        { text: "True", value: true },
+        { text: "False", value: false }
+      ],
+      onFilter: (value, record) => value === (record.production_vars?.alert || false),
+      render: (text, record) => <ProductionListColumnAlert record={record} />
     },
     {
       title: i18n.t("production.labels.note"),
       dataIndex: "note",
       key: "note",
       ellipsis: true,
-      render: (text, record) => <ProductionListColumnNote record={record} />,
+      render: (text, record) => <ProductionListColumnNote record={record} />
     },
     {
       title: i18n.t("production.labels.comment"),
       dataIndex: "comment",
       key: "comment",
       ellipsis: true,
-      render: (text, record) => <ProductionListColumnComment record={record} />,
+      render: (text, record) => <ProductionListColumnComment record={record} />
     },
     {
       title: i18n.t("production.labels.touchtime"),
@@ -438,7 +347,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "tt",
       render: (text, record) => {
         return <ProductionlistColumnTouchTime job={record} />;
-      },
+      }
     },
     {
       title: i18n.t("production.labels.bodypriority"),
@@ -448,11 +357,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       sorter: (a, b) =>
         ((a.production_vars && a.production_vars.bodypriority) || 11) -
         ((b.production_vars && b.production_vars.bodypriority) || 11),
-      sortOrder:
-        state.sortedInfo.columnKey === "bodypriority" && state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListColumnBodyPriority record={record} />
-      ),
+      sortOrder: state.sortedInfo.columnKey === "bodypriority" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListColumnBodyPriority record={record} />
     },
     {
       title: i18n.t("production.labels.paintpriority"),
@@ -462,12 +368,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       sorter: (a, b) =>
         ((a.production_vars && a.production_vars.paintpriority) || 11) -
         ((b.production_vars && b.production_vars.paintpriority) || 11),
-      sortOrder:
-        state.sortedInfo.columnKey === "paintpriority" &&
-        state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListColumnPaintPriority record={record} />
-      ),
+      sortOrder: state.sortedInfo.columnKey === "paintpriority" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListColumnPaintPriority record={record} />
     },
     {
       title: i18n.t("production.labels.detailpriority"),
@@ -477,110 +379,74 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       sorter: (a, b) =>
         ((a.production_vars && a.production_vars.detailpriority) || 11) -
         ((b.production_vars && b.production_vars.detailpriority) || 11),
-      sortOrder:
-        state.sortedInfo.columnKey === "detailpriority" &&
-        state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListColumnDetailPriority record={record} />
-      ),
+      sortOrder: state.sortedInfo.columnKey === "detailpriority" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListColumnDetailPriority record={record} />
     },
     {
       title: i18n.t("production.labels.sublets"),
       dataIndex: "sublets",
       key: "sublets",
-      render: (text, record) => (
-        <ProductionSubletsManageComponent subletJobLines={record.subletLines} />
-      ),
+      render: (text, record) => <ProductionSubletsManageComponent subletJobLines={record.subletLines} />
     },
     {
       title: i18n.t("jobs.fields.employee_body"),
       dataIndex: "employee_body",
       key: "employee_body",
-      sortOrder:
-        state.sortedInfo.columnKey === "employee_body" &&
-        state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "employee_body" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
           bodyshop.employees?.find((e) => e.id === a.employee_body)?.first_name,
           bodyshop.employees?.find((e) => e.id === b.employee_body)?.first_name
         ),
-      render: (text, record) => (
-        <ProductionListEmployeeAssignment
-          record={record}
-          type="employee_body"
-        />
-      ),
+      render: (text, record) => <ProductionListEmployeeAssignment record={record} type="employee_body" />
     },
     {
       title: i18n.t("jobs.fields.employee_prep"),
       dataIndex: "employee_prep",
       key: "employee_prep",
-      sortOrder:
-        state.sortedInfo.columnKey === "employee_prep" &&
-        state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "employee_prep" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
           bodyshop.employees?.find((e) => e.id === a.employee_prep)?.first_name,
           bodyshop.employees?.find((e) => e.id === b.employee_prep)?.first_name
         ),
-      render: (text, record) => (
-        <ProductionListEmployeeAssignment
-          record={record}
-          type="employee_prep"
-        />
-      ),
+      render: (text, record) => <ProductionListEmployeeAssignment record={record} type="employee_prep" />
     },
     {
       title: i18n.t("jobs.fields.employee_csr"),
       dataIndex: "employee_csr",
       key: "employee_csr",
-      sortOrder:
-        state.sortedInfo.columnKey === "employee_csr" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "employee_csr" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
           bodyshop.employees?.find((e) => e.id === a.employee_csr)?.first_name,
           bodyshop.employees?.find((e) => e.id === b.employee_csr)?.first_name
         ),
-      render: (text, record) => (
-        <ProductionListEmployeeAssignment record={record} type="employee_csr" />
-      ),
+      render: (text, record) => <ProductionListEmployeeAssignment record={record} type="employee_csr" />
     },
     {
       title: i18n.t("jobs.fields.employee_refinish"),
       dataIndex: "employee_refinish",
       key: "employee_refinish",
-      sortOrder:
-        state.sortedInfo.columnKey === "employee_refinish" &&
-        state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "employee_refinish" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_refinish)
-            ?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_refinish)
-            ?.first_name
+          bodyshop.employees?.find((e) => e.id === a.employee_refinish)?.first_name,
+          bodyshop.employees?.find((e) => e.id === b.employee_refinish)?.first_name
         ),
-      render: (text, record) => (
-        <ProductionListEmployeeAssignment
-          record={record}
-          type="employee_refinish"
-        />
-      ),
+      render: (text, record) => <ProductionListEmployeeAssignment record={record} type="employee_refinish" />
     },
     {
       title: i18n.t("jobs.labels.parts_received"),
       dataIndex: "parts_received",
       key: "parts_received",
-      render: (text, record) => (
-        <ProductionListColumnPartsReceived record={record} />
-      ),
+      render: (text, record) => <ProductionListColumnPartsReceived record={record} />
     },
     {
       title: i18n.t("jobs.fields.partsstatus"),
       dataIndex: "partsstatus",
       key: "partsstatus",
-      render: (text, record) => (
-        <JobPartsQueueCount parts={record.joblines_status} record={record} />
-      ),
+      render: (text, record) => <JobPartsQueueCount parts={record.joblines_status} record={record} />
     },
     {
       title: i18n.t("jobs.labels.estimator"),
@@ -591,8 +457,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
           `${a.est_ct_fn || ""} ${a.est_ct_ln || ""}`.trim(),
           `${b.est_ct_fn || ""} ${b.est_ct_ln || ""}`.trim()
         ),
-      sortOrder:
-        state.sortedInfo.columnKey === "estimator" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "estimator" && state.sortedInfo.order,
       filters:
         (data &&
           data
@@ -601,16 +466,12 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
             .map((s) => {
               return {
                 text: s || "N/A",
-                value: [s],
+                value: [s]
               };
             })) ||
         [],
-      onFilter: (value, record) =>
-        value.includes(
-          `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
-        ),
-      render: (text, record) =>
-        `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
+      onFilter: (value, record) => value.includes(`${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()),
+      render: (text, record) => `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
     },
 
     //Added as a place holder for St Claude. Not implemented as it requires another join for a field used by only 1 client.
@@ -640,12 +501,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "date_repairstarted",
       ellipsis: true,
       sorter: (a, b) => dateSort(a.date_repairstarted, b.date_repairstarted),
-      sortOrder:
-        state.sortedInfo.columnKey === "date_repairstarted" &&
-        state.sortedInfo.order,
-      render: (text, record) => (
-        <ProductionListDate record={record} field="date_repairstarted" time />
-      ),
+      sortOrder: state.sortedInfo.columnKey === "date_repairstarted" && state.sortedInfo.order,
+      render: (text, record) => <ProductionListDate record={record} field="date_repairstarted" time />
     },
     {
       title: i18n.t("jobs.fields.date_repairstarted") + " (HH:MM)",
@@ -653,10 +510,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
       key: "date_repairstarted_time",
       ellipsis: true,
 
-      render: (text, record) => (
-        <TimeFormatter>{record.date_repairstarted}</TimeFormatter>
-      ),
-    },
+      render: (text, record) => <TimeFormatter>{record.date_repairstarted}</TimeFormatter>
+    }
   ];
 };
 export default r;

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js

@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { Popover } from "antd";
+import { Popover, Space } from "antd";
 import _ from "lodash";
 import moment from "moment";
 import React, { useMemo } from "react";
@@ -69,19 +69,22 @@ export function ScheduleCalendarHeaderComponent({
           {loadData && loadData.allJobsOut ? (
             loadData.allJobsOut.map((j) => (
               <tr key={j.id}>
-                <td>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                <td style={{ padding: "2.5px" }}>
+                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> (
+                  {j.status})
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <OwnerNameDisplay ownerObject={j} />
                 </td>
-                <td>
-                  {`(${(
-                    j.labhrs.aggregate.sum.mod_lb_hrs +
-                    j.larhrs.aggregate.sum.mod_lb_hrs
+                <td style={{ padding: "2.5px" }}>
+                  {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                  }/${(
+                    j.labhrs.aggregate?.sum?.mod_lb_hrs +
+                    j.larhrs.aggregate?.sum?.mod_lb_hrs
                   ).toFixed(1)} ${t("general.labels.hours")})`}
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <DateTimeFormatter>
                     {j.scheduled_completion}
                   </DateTimeFormatter>
@@ -90,7 +93,9 @@ export function ScheduleCalendarHeaderComponent({
             ))
           ) : (
             <tr>
-              <td>{t("appointments.labels.nocompletingjobs")}</td>
+              <td style={{ padding: "2.5px" }}>
+                {t("appointments.labels.nocompletingjobs")}
+              </td>
             </tr>
           )}
         </tbody>
@@ -105,27 +110,30 @@ export function ScheduleCalendarHeaderComponent({
           {loadData && loadData.allJobsIn ? (
             loadData.allJobsIn.map((j) => (
               <tr key={j.id}>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                  {j.status}
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <OwnerNameDisplay ownerObject={j} />
                 </td>
-                <td>
-                  {`(${(
-                    j.labhrs.aggregate.sum.mod_lb_hrs +
-                    j.larhrs.aggregate.sum.mod_lb_hrs
+                <td style={{ padding: "2.5px" }}>
+                  {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                  }/${(
+                    j.labhrs?.aggregate?.sum?.mod_lb_hrs +
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs
                   ).toFixed(1)} ${t("general.labels.hours")})`}
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
                 </td>
               </tr>
             ))
           ) : (
             <tr>
-              <td>{t("appointments.labels.noarrivingjobs")}</td>
+              <td style={{ padding: "2.5px" }}>
+                {t("appointments.labels.noarrivingjobs")}
+              </td>
             </tr>
           )}
         </tbody>
@@ -136,25 +144,32 @@ export function ScheduleCalendarHeaderComponent({
   const LoadComponent = loadData ? (
     <div>
       <div className="imex-flex-row imex-flex-row__flex-space-around">
-        <Popover
-          placement={"bottom"}
-          content={jobsInPopup}
-          trigger="hover"
-          title={t("appointments.labels.arrivingjobs")}
-        >
-          <Icon component={MdFileDownload} style={{ color: "green" }} />
-          {(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(2)}
-        </Popover>
-        <Popover
-          placement={"bottom"}
-          content={jobsOutPopup}
-          trigger="hover"
-          title={t("appointments.labels.completingjobs")}
-        >
-          <Icon component={MdFileUpload} style={{ color: "red" }} />
-          {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(2)}
-        </Popover>
-        <ScheduleCalendarHeaderGraph loadData={loadData} />
+        <Space>
+          <Popover
+            placement={"bottom"}
+            content={jobsInPopup}
+            trigger="hover"
+            title={t("appointments.labels.arrivingjobs")}
+          >
+            <Icon component={MdFileDownload} style={{ color: "green" }} />
+            {(loadData.allHoursInBody || 0) &&
+              loadData.allHoursInBody.toFixed(1)}
+            /
+            {(loadData.allHoursInRefinish || 0) &&
+              loadData.allHoursInRefinish.toFixed(1)}
+            /{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
+          </Popover>
+          <Popover
+            placement={"bottom"}
+            content={jobsOutPopup}
+            trigger="hover"
+            title={t("appointments.labels.completingjobs")}
+          >
+            <Icon component={MdFileUpload} style={{ color: "red" }} />
+            {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
+          </Popover>
+          <ScheduleCalendarHeaderGraph loadData={loadData} />
+        </Space>
       </div>
       <div>
         <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>

client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx

@@ -5,6 +5,7 @@ import {
   Input,
   InputNumber,
   Select,
+  Space,
   Switch,
   Typography,
 } from "antd";
@@ -17,6 +18,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { useTreatments } from "@splitsoftware/splitio-react";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 
 const SelectorDiv = styled.div`
   .ant-form-item .ant-select {
@@ -191,7 +193,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           </LayoutFormRow>
           <LayoutFormRow header={t("bodyshop.labels.dms.cdk.payers")}>
             <Form.List name={["cdk_configuration", "payers"]}>
-              {(fields, { add, remove }) => {
+              {(fields, { add, remove, move }) => {
                 return (
                   <div>
                     {fields.map((field, index) => (
@@ -249,11 +251,18 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                             </Select>
                           </Form.Item>
 
-                          <DeleteFilled
-                            onClick={() => {
-                              remove(field.name);
-                            }}
-                          />
+                          <Space align="center">
+                            <DeleteFilled
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                            />
+                          </Space>
                         </LayoutFormRow>
                       </Form.Item>
                     ))}
@@ -345,7 +354,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
         id="costs"
       >
         <Form.List name={["md_responsibility_centers", "costs"]}>
-          {(fields, { add, remove }) => {
+          {(fields, { add, remove, move }) => {
             return (
               <div>
                 {fields.map((field, index) => (
@@ -462,12 +471,18 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                           <Input onBlur={handleBlur} />
                         </Form.Item>
                       )}
-
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
+                      <Space align="center">
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </Space>
                     </LayoutFormRow>
                   </Form.Item>
                 ))}
@@ -493,7 +508,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
         id="profits"
       >
         <Form.List name={["md_responsibility_centers", "profits"]}>
-          {(fields, { add, remove }) => {
+          {(fields, { add, remove, move }) => {
             return (
               <div>
                 {fields.map((field, index) => (
@@ -595,11 +610,18 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                           <Input onBlur={handleBlur} />
                         </Form.Item>
                       )}
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
+                      <Space align="center">
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </Space>
                     </LayoutFormRow>
                   </Form.Item>
                 ))}

client/src/components/shop-info/shop-info.rostatus.component.jsx

@@ -39,8 +39,23 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
     form.getFieldValue(["md_ro_statuses", "statuses"]) || []
   );
 
+  const [productionStatus, setProductionStatus] = useState(
+    (
+      form.getFieldValue(["md_ro_statuses", "production_statuses"]) || []
+    ).concat(
+      form.getFieldValue(["md_ro_statuses", "additional_board_statuses"]) || []
+    ) || []
+  );
+
   const handleBlur = () => {
     setOptions(form.getFieldValue(["md_ro_statuses", "statuses"]));
+    setProductionStatus(
+      form
+        .getFieldValue(["md_ro_statuses", "production_statuses"])
+        .concat(
+          form.getFieldValue(["md_ro_statuses", "additional_board_statuses"])
+        )
+    );
   };
 
   return (
@@ -346,7 +361,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
                               ]}
                             >
                               <Select>
-                                {options.map((item, idx) => (
+                                {productionStatus.map((item, idx) => (
                                   <Select.Option key={idx} value={item}>
                                     {item}
                                   </Select.Option>

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

@@ -6,8 +6,11 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort, statusSort } from "../../utils/sorters";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
 import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -45,6 +48,10 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       title: t("jobs.fields.owner"),
       dataIndex: "owner",
       key: "owner",
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => (
         <Link to={`/manage/owners/${record.owner.id}`}>
           <OwnerNameDisplay ownerObject={record} />
@@ -63,11 +70,28 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
-      sorter: (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
+      sorter: (a, b) =>
+        statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters: bodyshop.md_ro_statuses.statuses.map((status) => ({
+        text: status,
+        value: status,
+      })),
+      onFilter: (value, record) => value.includes(record.status),
+    },
+    {
+      title: t("jobs.fields.actual_completion"),
+      dataIndex: "actual_completion",
+      key: "actual_completion",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.actual_completion}</DateTimeFormatter>
+      ),
+      sorter: (a, b) => dateSort(a.actual_completion, b.actual_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_completion" &&
+        state.sortedInfo.order,
     },
-
     {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",

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

@@ -4,8 +4,9 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
+import { pageLimit } from "../../utils/config";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
-import {pageLimit} from "../../utils/config";
+import { alphaSort } from './../../utils/sorters';
 export default function VehiclesListComponent({
   loading,
   vehicles,
@@ -31,6 +32,8 @@ export default function VehiclesListComponent({
       title: t("vehicles.fields.v_vin"),
       dataIndex: "v_vin",
       key: "v_vin",
+      sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
+      sortOrder: state.sortedInfo.columnKey === "v_vin" && state.sortedInfo.order,
       render: (text, record) => (
         <Link to={"/manage/vehicles/" + record.id}>
           <VehicleVinDisplay>{record.v_vin || "N/A"}</VehicleVinDisplay>
@@ -51,8 +54,10 @@ export default function VehiclesListComponent({
     },
     {
       title: t("vehicles.fields.plate_no"),
-      dataIndex: "plate",
-      key: "plate",
+      dataIndex: "plate_no",
+      key: "plate_no",
+      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+      sortOrder: state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
       render: (text, record) => {
         return (
           <span>{`${record.plate_st || ""} | ${record.plate_no || ""}`}</span>

client/src/firebase/firebase.utils.js

@@ -4,6 +4,8 @@ import { getAuth, updatePassword, updateProfile } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
 import { getMessaging, getToken, onMessage } from "firebase/messaging";
 import { store } from "../redux/store";
+import axios from "axios";
+import { checkBeta } from "../utils/handleBeta";
 
 const config = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
 initializeApp(config);
@@ -86,6 +88,18 @@ export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
       null,
     ...additionalParams,
   };
+  axios.post("/ioevent", {
+    useremail:
+      (state.user && state.user.currentUser && state.user.currentUser.email) ||
+      null,
+    bodyshopid:
+      (state.user && state.user.bodyshop && state.user.bodyshop.id) || null,
+    operationName: eventName,
+    variables: additionalParams,
+    dbevent: false,
+    env: checkBeta() ? "beta" : "master",
+  });
+
   // console.log(
   //   "%c[Analytics]",
   //   "background-color: green ;font-weight:bold;",

client/src/graphql/bills.queries.js

@@ -58,7 +58,7 @@ export const QUERY_ALL_BILLS_PAGINATED = gql`
   }
 `;
 
-export const QUERY_BILLS_BY_JOBID = gql`
+export const QUERY_PARTS_BILLS_BY_JOBID = gql`
   query QUERY_PARTS_BILLS_BY_JOBID($jobid: uuid!) {
     parts_orders(
       where: { jobid: { _eq: $jobid } }
@@ -73,6 +73,7 @@ export const QUERY_BILLS_BY_JOBID = gql`
       order_date
       deliver_by
       return
+      returnfrombill
       orderedby
       parts_order_lines {
         id

client/src/graphql/courtesy-car.queries.js

@@ -46,7 +46,7 @@ export const QUERY_AVAILABLE_CC = gql`
 `;
 
 export const CHECK_CC_FLEET_NUMBER = gql`
-  query CHECK_VENDOR_NAME($name: String!) {
+  query CHECK_CC_FLEET_NUMBER($name: String!) {
     courtesycars_aggregate(where: { fleetnumber: { _ilike: $name } }) {
       aggregate {
         count

client/src/graphql/jobs-lines.queries.js

@@ -172,6 +172,12 @@ export const UPDATE_JOB_LINE = gql`
         id
         notes
         mod_lbr_ty
+        mod_lb_hrs
+        part_type
+        op_code_desc
+        prt_dsmk_m
+        prt_dsmk_p
+        tax_part
         part_qty
         db_price
         act_price

client/src/graphql/jobs.queries.js

@@ -1,7 +1,7 @@
 import { gql } from "@apollo/client";
 
 export const QUERY_ALL_ACTIVE_JOBS_PAGINATED = gql`
-  query QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED(
+  query QUERY_ALL_ACTIVE_JOBS_PAGINATED(
     $offset: Int
     $limit: Int
     $order: [jobs_order_by!]
@@ -704,6 +704,7 @@ export const GET_JOB_BY_PK = gql`
       other_amount_payable
       owner {
         id
+        note
         ownr_fn
         ownr_ln
         ownr_co_nm
@@ -2204,6 +2205,8 @@ export const GET_JOB_LINE_ORDERS = gql`
     parts_order_lines(where: { job_line_id: { _eq: $joblineid } }) {
       id
       act_price
+      backordered_eta
+      backordered_on
       parts_order {
         id
         order_date

client/src/graphql/owners.queries.js

@@ -71,6 +71,7 @@ export const QUERY_OWNER_BY_ID = gql`
       tax_number
       jobs(order_by: { date_open: desc }) {
         id
+        actual_completion
         ro_number
         clm_no
         status

client/src/graphql/vehicles.queries.js

@@ -30,7 +30,9 @@ export const QUERY_VEHICLE_BY_ID = gql`
       notes
       jobs(order_by: { date_open: desc }) {
         id
+        actual_completion
         ro_number
+        ownr_co_nm
         ownr_fn
         ownr_ln
         owner {

client/src/pages/bills/bills.page.component.jsx

@@ -13,8 +13,8 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
-import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) =>
@@ -125,9 +125,7 @@ export function BillsListPage({
       sortOrder:
         state.sortedInfo.columnKey === "is_credit_memo" &&
         state.sortedInfo.order,
-      render: (text, record) => (
-        <Checkbox disabled checked={record.is_credit_memo} />
-      ),
+      render: (text, record) => <Checkbox checked={record.is_credit_memo} />,
     },
     {
       title: t("bills.fields.exported"),
@@ -136,7 +134,7 @@ export function BillsListPage({
       sorter: (a, b) => a.exported - b.exported,
       sortOrder:
         state.sortedInfo.columnKey === "exported" && state.sortedInfo.order,
-      render: (text, record) => <Checkbox disabled checked={record.exported} />,
+      render: (text, record) => <Checkbox checked={record.exported} />,
     },
     {
       title: t("general.labels.actions"),
@@ -243,7 +241,7 @@ export function BillsListPage({
       extra={
         <Space wrap>
           {search.search && (
-            <>
+            <Space align="center">
               <Typography.Title level={4}>
                 {t("general.labels.searchresults", { search: search.search })}
               </Typography.Title>
@@ -256,7 +254,7 @@ export function BillsListPage({
               >
                 {t("general.actions.clear")}
               </Button>
-            </>
+            </Space>
           )}
           <Button onClick={() => refetch()}>
             <SyncOutlined />

client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx

@@ -76,7 +76,11 @@ export function CourtesyCarCreateContainer({
         onFinish={handleFinish}
         layout="vertical"
       >
-        <CourtesyCarFormComponent form={form} saveLoading={loading} />
+        <CourtesyCarFormComponent
+          form={form}
+          saveLoading={loading}
+          newCC={true}
+        />
       </Form>
     </RbacWrapper>
   );

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -167,9 +167,7 @@ export function ExportLogsPageComponent({ bodyshop }) {
         { text: "False", value: false },
       ],
       onFilter: (value, record) => record.successful === value,
-      render: (text, record) => (
-        <Checkbox disabled checked={record.successful} />
-      ),
+      render: (text, record) => <Checkbox checked={record.successful} />,
     },
     {
       title: t("general.labels.message"),

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -8,6 +8,7 @@ import Icon, {
   SyncOutlined,
   ToolFilled,
 } from "@ant-design/icons";
+import { useQuery } from "@apollo/client";
 import {
   Button,
   Divider,
@@ -48,6 +49,7 @@ import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gal
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
 import NoteUpsertModalComponent from "../../components/note-upsert-modal/note-upsert-modal.container";
 import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
+import { QUERY_PARTS_BILLS_BY_JOBID } from "../../graphql/bills.queries.js";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -78,19 +80,49 @@ export function JobsDetailPage({
 }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const history = useHistory();
   const [loading, setLoading] = useState(false);
   const search = queryString.parse(useLocation().search);
+  const history = useHistory();
 
   const formItemLayout = {
     layout: "vertical",
   };
 
+  const billsQuery = useQuery(QUERY_PARTS_BILLS_BY_JOBID, {
+    variables: { jobid: job.id },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
   useEffect(() => {
     //form.setFieldsValue(transormJobToForm(job));
     form.resetFields();
   }, [form, job]);
 
+  const handleBillOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.billid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.billid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  const handlePartsOrderOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.partsorderid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.partsorderid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
   //useKeyboardSaveShortcut(form.submit);
 
   const handleFinish = async (values) => {
@@ -286,6 +318,9 @@ export function JobsDetailPage({
             <JobsLinesContainer
               job={job}
               joblines={job.joblines}
+              billsQuery={billsQuery}
+              handleBillOnRowClick={handleBillOnRowClick}
+              handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
               refetch={refetch}
               form={form}
             />
@@ -322,7 +357,12 @@ export function JobsDetailPage({
             }
             key="partssublet"
           >
-            <JobsDetailPliContainer job={job} />
+            <JobsDetailPliContainer
+              job={job}
+              billsQuery={billsQuery}
+              handleBillOnRowClick={handleBillOnRowClick}
+              handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
+            />
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={

client/src/redux/application/application.sagas.js

@@ -131,7 +131,12 @@ export function* calculateScheduleLoad({ payload: end }) {
           (load[itemDate].allHoursIn || 0) +
           item.labhrs.aggregate.sum.mod_lb_hrs +
           item.larhrs.aggregate.sum.mod_lb_hrs;
-
+        load[itemDate].allHoursInBody =
+          (load[itemDate].allHoursInBody || 0) +
+          item.labhrs.aggregate.sum.mod_lb_hrs;
+        load[itemDate].allHoursInRefinish =
+          (load[itemDate].allHoursInRefinish || 0) +
+          item.larhrs.aggregate.sum.mod_lb_hrs;
         //If the job hasn't already arrived, add it to the jobs in list.
         // Make sure it also hasn't already been completed, or isn't an in and out job.
         //This prevents the duplicate counting.
@@ -142,6 +147,12 @@ export function* calculateScheduleLoad({ payload: end }) {
             (load[itemDate].hoursIn || 0) +
             item.labhrs.aggregate.sum.mod_lb_hrs +
             item.larhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursInBody =
+            (load[itemDate].hoursInBody || 0) +
+            item.labhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursInRefinish =
+            (load[itemDate].hoursInRefinish || 0) +
+            item.larhrs.aggregate.sum.mod_lb_hrs;
         }
       } else {
         load[itemDate] = {
@@ -152,10 +163,18 @@ export function* calculateScheduleLoad({ payload: end }) {
           allHoursIn:
             item.labhrs.aggregate.sum.mod_lb_hrs +
             item.larhrs.aggregate.sum.mod_lb_hrs,
+          allHoursInBody: item.labhrs.aggregate.sum.mod_lb_hrs,
+          allHoursInRefinish: item.larhrs.aggregate.sum.mod_lb_hrs,
           hoursIn: AddJobForSchedulingCalc
             ? item.labhrs.aggregate.sum.mod_lb_hrs +
               item.larhrs.aggregate.sum.mod_lb_hrs
             : 0,
+          hoursInBody: AddJobForSchedulingCalc
+            ? item.labhrs.aggregate.sum.mod_lb_hrs
+            : 0,
+          hoursInRefinish: AddJobForSchedulingCalc
+            ? item.larhrs.aggregate.sum.mod_lb_hrs
+            : 0,
         };
       }
     });
@@ -179,6 +198,12 @@ export function* calculateScheduleLoad({ payload: end }) {
           (load[itemDate].allHoursOut || 0) +
           item.labhrs.aggregate.sum.mod_lb_hrs +
           item.larhrs.aggregate.sum.mod_lb_hrs;
+        load[itemDate].allHoursOutBody =
+          (load[itemDate].allHoursOutBody || 0) +
+          item.labhrs.aggregate.sum.mod_lb_hrs;
+        load[itemDate].allHoursOutRefinish =
+          (load[itemDate].allHoursOutRefinish || 0) +
+          item.larhrs.aggregate.sum.mod_lb_hrs;
         //Add only the jobs that are still in production to get rid of.
         //If it's not in production, we'd subtract unnecessarily.
         load[itemDate].allJobsOut.push(item);
@@ -189,6 +214,12 @@ export function* calculateScheduleLoad({ payload: end }) {
             (load[itemDate].hoursOut || 0) +
             item.labhrs.aggregate.sum.mod_lb_hrs +
             item.larhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursOutBody =
+            (load[itemDate].hoursOutBody || 0) +
+            item.labhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursOutRefinish =
+            (load[itemDate].hoursOutRefinish || 0) +
+            item.larhrs.aggregate.sum.mod_lb_hrs;
         }
       } else {
         load[itemDate] = {
@@ -201,6 +232,8 @@ export function* calculateScheduleLoad({ payload: end }) {
           allHoursOut:
             item.labhrs.aggregate.sum.mod_lb_hrs +
             item.larhrs.aggregate.sum.mod_lb_hrs,
+          allHoursOutBody: item.labhrs.aggregate.sum.mod_lb_hrs,
+          allHoursOutRefinish: item.larhrs.aggregate.sum.mod_lb_hrs,
         };
       }
     });

client/src/translations/en_us/common.json

@@ -217,10 +217,12 @@
 				"markexported": "Mark Exported",
 				"markforreexport": "Mark for Re-export",
 				"new": "New Bill",
+				"nobilllines": "This part has not yet been recieved.",
 				"noneselected": "No bill selected.",
-				"onlycmforinvoiced": "Only credit memos can be entered for any Job that has been invoiced,  exported,  or voided.",
+				"onlycmforinvoiced": "Only credit memos can be entered for any Job that has been invoiced, exported, or voided.",
 				"printlabels": "Print Labels",
 				"retailtotal": "Bills Retail Total",
+				"returnfrombill": "Return From Bill",
 				"savewithdiscrepancy": "You are about to save this bill with a discrepancy.  The system will continue to use the calculated amount using the bill lines.  Press cancel to return to the bill.",
 				"state_tax": "Provincial/State Tax",
 				"subtotal": "Subtotal",
@@ -259,6 +261,7 @@
 				"saving": "Error encountered while saving. {{message}}"
 			},
 			"fields": {
+				"ReceivableCustomField": "QBO Receivable Custom Field {{number}}",
 				"address1": "Address 1",
 				"address2": "Address 2",
 				"appt_alt_transport": "Appointment Alternative Transportation Options",
@@ -477,7 +480,6 @@
 						"editaccess": "Users -> Edit access"
 					}
 				},
-				"ReceivableCustomField": "QBO Receivable Custom Field {{number}}",
 				"responsibilitycenter": "Responsibility Center",
 				"responsibilitycenter_accountdesc": "Account Description",
 				"responsibilitycenter_accountitem": "Item",
@@ -608,7 +610,7 @@
 				"dms": {
 					"cdk": {
 						"controllist": "Control Number List",
-						"payers": "CDK Payers"
+						"payers": "Payers"
 					},
 					"cdk_dealerid": "CDK Dealer ID",
 					"pbs_serialnumber": "PBS Serial Number",
@@ -826,10 +828,11 @@
 			},
 			"status": {
 				"in": "Available",
-				"inservice": "In Service",
+				"inservice": "Service/Maintenance",
 				"leasereturn": "Lease Returned",
 				"out": "Rented",
-				"sold": "Sold"
+				"sold": "Sold",
+				"unavailable": "Unavailable"
 			},
 			"successes": {
 				"saved": "Courtesy Car saved successfully."
@@ -844,8 +847,8 @@
 				"notconfigured": "You do not have any current CSI Question Sets configured.",
 				"notfoundsubtitle": "We were unable to find a survey using the link you provided. Please ensure the URL is correct or reach out to your shop for more help.",
 				"notfoundtitle": "No survey found.",
-				"surveycompletetitle": "Survey previously completed",
-				"surveycompletesubtitle": "This survey was already completed on {{date}}."
+				"surveycompletesubtitle": "This survey was already completed on {{date}}.",
+				"surveycompletetitle": "Survey previously completed"
 			},
 			"fields": {
 				"completedon": "Completed On",
@@ -854,13 +857,13 @@
 				"validuntil": "Valid Until"
 			},
 			"labels": {
+				"copyright": "Copyright © $t(titles.app). All Rights Reserved.",
+				"greeting": "Hi {{name}}!",
+				"intro": "At {{shopname}}, we value your feedback. We would love to hear what you have to say. Please fill out the form below.",
 				"nologgedinuser": "Please log out of $t(titles.app)",
 				"nologgedinuser_sub": "Users of $t(titles.app) cannot complete CSI surveys while logged in. Please log out and try again.",
 				"noneselected": "No response selected.",
-				"title": "Customer Satisfaction Survey",
-				"greeting": "Hi {{name}}!",
-				"intro": "At {{shopname}}, we value your feedback. We would love to hear what you have to say. Please fill out the form below.",
-				"copyright": "Copyright © $t(titles.app). All Rights Reserved."
+				"title": "Customer Satisfaction Survey"
 			},
 			"successes": {
 				"created": "CSI created successfully.",
@@ -884,6 +887,7 @@
 				"refhrs": "Refinish Hrs"
 			},
 			"titles": {
+				"joblifecycle": "Job Lifecycle",
 				"labhours": "Total Body Hours",
 				"larhours": "Total Refinish Hours",
 				"monthlyemployeeefficiency": "Monthly Employee Efficiency",
@@ -1113,6 +1117,7 @@
 				"loadingshop": "Loading shop data...",
 				"loggingin": "Authorizing...",
 				"markedexported": "Manually marked as exported.",
+				"media": "Media",
 				"message": "Message",
 				"monday": "Monday",
 				"na": "N/A",
@@ -1233,14 +1238,21 @@
 			"columns": {
 				"duration": "Duration",
 				"end": "End",
+				"human_readable": "Human Readable",
+				"percentage": "Percentage",
 				"relative_end": "Relative End",
 				"relative_start": "Relative Start",
 				"start": "Start",
+				"status": "Status",
+				"status_count": "In Status",
 				"value": "Value"
 			},
 			"content": {
+				"calculated_based_on": "Calculated based on",
 				"current_status_accumulated_time": "Current Status Accumulated Time",
 				"data_unavailable": " There is currently no Lifecycle data for this Job.",
+				"joblifecycle": "",
+				"jobs_in_since": "Jobs in since",
 				"legend_title": "Legend",
 				"loading": "Loading Job Timelines....",
 				"not_available": "N/A",
@@ -1252,6 +1264,10 @@
 			},
 			"errors": {
 				"fetch": "Error getting Job Lifecycle Data"
+			},
+			"titles": {
+				"dashboard": "Job Lifecycle",
+				"top_durations": "Top Durations"
 			}
 		},
 		"job_payments": {
@@ -1271,6 +1287,7 @@
 				"amount": "Amount",
 				"dateOfPayment": "Date of Payment",
 				"descriptions": "Payment Details",
+				"hint": "Hint",
 				"payer": "Payer",
 				"payername": "Payer Name",
 				"paymentid": "Payment Reference ID",
@@ -1561,7 +1578,7 @@
 				"federal_tax_payable": "Federal Tax Payable",
 				"federal_tax_rate": "Federal Tax Rate",
 				"ins_addr1": "Insurance Co. Address",
-				"ins_city": "Insurance City",
+				"ins_city": "Insurance Co. City",
 				"ins_co_id": "Insurance Co. ID",
 				"ins_co_nm": "Insurance Company Name",
 				"ins_co_nm_short": "Ins.  Co.",
@@ -1823,6 +1840,7 @@
 				"job": "Job Details",
 				"jobcosting": "Job Costing",
 				"jobtotals": "Job Totals",
+				"labor_hrs": "B/P/T Hrs",
 				"labor_rates_subtotal": "Labor Rates Subtotal",
 				"laborallocations": "Labor Allocations",
 				"labortotals": "Labor Totals",
@@ -2319,6 +2337,7 @@
 				"markexported": "Payment(s) marked exported.",
 				"markreexported": "Payment marked for re-export successfully",
 				"payment": "Payment created successfully. ",
+				"paymentupdate": "Payment updated successfully. ",
 				"stripe": "Credit card transaction charged successfully."
 			}
 		},
@@ -2417,6 +2436,7 @@
 				"invoice_total_payable": "Invoice (Total Payable)",
 				"iou_form": "IOU Form",
 				"job_costing_ro": "Job Costing",
+				"job_lifecycle_ro": "Job Lifecycle",
 				"job_notes": "Job Notes",
 				"key_tag": "Key Tag",
 				"labels": {
@@ -2583,17 +2603,17 @@
 			},
 			"labels": {
 				"advanced_filters": "Advanced Filters and Sorters",
-				"advanced_filters_show": "Show",
-				"advanced_filters_hide": "Hide",
-				"advanced_filters_filters": "Filters",
-				"advanced_filters_sorters": "Sorters",
-				"advanced_filters_filter_field": "Field",
-				"advanced_filters_sorter_field": "Field",
-				"advanced_filters_true": "True",
 				"advanced_filters_false": "False",
-				"advanced_filters_sorter_direction": "Direction",
+				"advanced_filters_filter_field": "Field",
 				"advanced_filters_filter_operator": "Operator",
 				"advanced_filters_filter_value": "Value",
+				"advanced_filters_filters": "Filters",
+				"advanced_filters_hide": "Hide",
+				"advanced_filters_show": "Show",
+				"advanced_filters_sorter_direction": "Direction",
+				"advanced_filters_sorter_field": "Field",
+				"advanced_filters_sorters": "Sorters",
+				"advanced_filters_true": "True",
 				"dates": "Dates",
 				"employee": "Employee",
 				"filterson": "Filters on {{object}}: {{field}}",
@@ -2675,6 +2695,8 @@
 				"job_costing_ro_date_summary": "Job Costing by RO - Summary",
 				"job_costing_ro_estimator": "Job Costing by Estimator",
 				"job_costing_ro_ins_co": "Job Costing by RO Source",
+				"job_lifecycle_date_detail": "Job Lifecycle by Date - Detail",
+				"job_lifecycle_date_summary": "Job Lifecycle by Date - Summary",
 				"jobs_completed_not_invoiced": "Jobs Completed not Invoiced",
 				"jobs_invoiced_not_exported": "Jobs Invoiced not Exported",
 				"jobs_reconcile": "Parts/Sublet/Labor Reconciliation",

client/src/translations/es/common.json

@@ -217,10 +217,12 @@
 				"markexported": "",
 				"markforreexport": "",
 				"new": "",
+				"nobilllines": "",
 				"noneselected": "",
 				"onlycmforinvoiced": "",
 				"printlabels": "",
 				"retailtotal": "",
+				"returnfrombill": "",
 				"savewithdiscrepancy": "",
 				"state_tax": "",
 				"subtotal": "",
@@ -259,6 +261,7 @@
 				"saving": ""
 			},
 			"fields": {
+				"ReceivableCustomField": "",
 				"address1": "",
 				"address2": "",
 				"appt_alt_transport": "",
@@ -477,7 +480,6 @@
 						"editaccess": ""
 					}
 				},
-				"ReceivableCustomField": "",
 				"responsibilitycenter": "",
 				"responsibilitycenter_accountdesc": "",
 				"responsibilitycenter_accountitem": "",
@@ -829,7 +831,8 @@
 				"inservice": "",
 				"leasereturn": "",
 				"out": "",
-				"sold": ""
+				"sold": "",
+				"unavailable": ""
 			},
 			"successes": {
 				"saved": ""
@@ -844,8 +847,8 @@
 				"notconfigured": "",
 				"notfoundsubtitle": "",
 				"notfoundtitle": "",
-				"surveycompletetitle": "",
-				"surveycompletesubtitle": ""
+				"surveycompletesubtitle": "",
+				"surveycompletetitle": ""
 			},
 			"fields": {
 				"completedon": "",
@@ -854,13 +857,13 @@
 				"validuntil": ""
 			},
 			"labels": {
+				"copyright": "",
+				"greeting": "",
+				"intro": "",
 				"nologgedinuser": "",
 				"nologgedinuser_sub": "",
 				"noneselected": "",
-				"title": "",
-				"greeting": "",
-				"intro": "",
-				"copyright": ""
+				"title": ""
 			},
 			"successes": {
 				"created": "",
@@ -884,6 +887,7 @@
 				"refhrs": ""
 			},
 			"titles": {
+				"joblifecycle": "",
 				"labhours": "",
 				"larhours": "",
 				"monthlyemployeeefficiency": "",
@@ -1113,6 +1117,7 @@
 				"loadingshop": "Cargando datos de la tienda ...",
 				"loggingin": "Iniciando sesión ...",
 				"markedexported": "",
+				"media": "",
 				"message": "",
 				"monday": "",
 				"na": "N / A",
@@ -1233,14 +1238,21 @@
 			"columns": {
 				"duration": "",
 				"end": "",
+				"human_readable": "",
+				"percentage": "",
 				"relative_end": "",
 				"relative_start": "",
 				"start": "",
+				"status": "",
+				"status_count": "",
 				"value": ""
 			},
 			"content": {
+				"calculated_based_on": "",
 				"current_status_accumulated_time": "",
 				"data_unavailable": "",
+				"joblifecycle": "",
+				"jobs_in_since": "",
 				"legend_title": "",
 				"loading": "",
 				"not_available": "",
@@ -1252,6 +1264,10 @@
 			},
 			"errors": {
 				"fetch": "Error al obtener los datos del ciclo de vida del trabajo"
+			},
+			"titles": {
+				"dashboard": "",
+				"top_durations": ""
 			}
 		},
 		"job_payments": {
@@ -1271,6 +1287,7 @@
 				"amount": "",
 				"dateOfPayment": "",
 				"descriptions": "",
+				"hint": "",
 				"payer": "",
 				"payername": "",
 				"paymentid": "",
@@ -1823,6 +1840,7 @@
 				"job": "",
 				"jobcosting": "",
 				"jobtotals": "",
+				"labor_hrs": "",
 				"labor_rates_subtotal": "",
 				"laborallocations": "",
 				"labortotals": "",
@@ -2319,6 +2337,7 @@
 				"markexported": "",
 				"markreexported": "",
 				"payment": "",
+				"paymentupdate": "",
 				"stripe": ""
 			}
 		},
@@ -2417,6 +2436,7 @@
 				"invoice_total_payable": "",
 				"iou_form": "",
 				"job_costing_ro": "",
+				"job_lifecycle_ro": "",
 				"job_notes": "",
 				"key_tag": "",
 				"labels": {
@@ -2583,17 +2603,17 @@
 			},
 			"labels": {
 				"advanced_filters": "",
-				"advanced_filters_show": "",
-				"advanced_filters_hide": "",
-				"advanced_filters_filters": "",
-				"advanced_filters_sorters": "",
-				"advanced_filters_filter_field": "",
-				"advanced_filters_sorter_field": "",
-				"advanced_filters_true": "",
 				"advanced_filters_false": "",
-				"advanced_filters_sorter_direction": "",
+				"advanced_filters_filter_field": "",
 				"advanced_filters_filter_operator": "",
 				"advanced_filters_filter_value": "",
+				"advanced_filters_filters": "",
+				"advanced_filters_hide": "",
+				"advanced_filters_show": "",
+				"advanced_filters_sorter_direction": "",
+				"advanced_filters_sorter_field": "",
+				"advanced_filters_sorters": "",
+				"advanced_filters_true": "",
 				"dates": "",
 				"employee": "",
 				"filterson": "",
@@ -2675,6 +2695,8 @@
 				"job_costing_ro_date_summary": "",
 				"job_costing_ro_estimator": "",
 				"job_costing_ro_ins_co": "",
+				"job_lifecycle_date_detail": "",
+				"job_lifecycle_date_summary": "",
 				"jobs_completed_not_invoiced": "",
 				"jobs_invoiced_not_exported": "",
 				"jobs_reconcile": "",

client/src/translations/fr/common.json

@@ -217,10 +217,12 @@
 				"markexported": "",
 				"markforreexport": "",
 				"new": "",
+				"nobilllines": "",
 				"noneselected": "",
 				"onlycmforinvoiced": "",
 				"printlabels": "",
 				"retailtotal": "",
+				"returnfrombill": "",
 				"savewithdiscrepancy": "",
 				"state_tax": "",
 				"subtotal": "",
@@ -259,6 +261,7 @@
 				"saving": ""
 			},
 			"fields": {
+				"ReceivableCustomField": "",
 				"address1": "",
 				"address2": "",
 				"appt_alt_transport": "",
@@ -477,7 +480,6 @@
 						"editaccess": ""
 					}
 				},
-				"ReceivableCustomField": "",
 				"responsibilitycenter": "",
 				"responsibilitycenter_accountdesc": "",
 				"responsibilitycenter_accountitem": "",
@@ -829,7 +831,8 @@
 				"inservice": "",
 				"leasereturn": "",
 				"out": "",
-				"sold": ""
+				"sold": "",
+				"unavailable": ""
 			},
 			"successes": {
 				"saved": ""
@@ -844,8 +847,8 @@
 				"notconfigured": "",
 				"notfoundsubtitle": "",
 				"notfoundtitle": "",
-				"surveycompletetitle": "",
-				"surveycompletesubtitle": ""
+				"surveycompletesubtitle": "",
+				"surveycompletetitle": ""
 			},
 			"fields": {
 				"completedon": "",
@@ -854,13 +857,13 @@
 				"validuntil": ""
 			},
 			"labels": {
+				"copyright": "",
+				"greeting": "",
+				"intro": "",
 				"nologgedinuser": "",
 				"nologgedinuser_sub": "",
 				"noneselected": "",
-				"title": "",
-				"greeting": "",
-				"intro": "",
-				"copyright": ""
+				"title": ""
 			},
 			"successes": {
 				"created": "",
@@ -884,6 +887,7 @@
 				"refhrs": ""
 			},
 			"titles": {
+				"joblifecycle": "",
 				"labhours": "",
 				"larhours": "",
 				"monthlyemployeeefficiency": "",
@@ -1113,6 +1117,7 @@
 				"loadingshop": "Chargement des données de la boutique ...",
 				"loggingin": "Vous connecter ...",
 				"markedexported": "",
+				"media": "",
 				"message": "",
 				"monday": "",
 				"na": "N / A",
@@ -1233,14 +1238,21 @@
 			"columns": {
 				"duration": "",
 				"end": "",
+				"human_readable": "",
+				"percentage": "",
 				"relative_end": "",
 				"relative_start": "",
 				"start": "",
+				"status": "",
+				"status_count": "",
 				"value": ""
 			},
 			"content": {
+				"calculated_based_on": "",
 				"current_status_accumulated_time": "",
 				"data_unavailable": "",
+				"joblifecycle": "",
+				"jobs_in_since": "",
 				"legend_title": "",
 				"loading": "",
 				"not_available": "",
@@ -1252,6 +1264,10 @@
 			},
 			"errors": {
 				"fetch": "Erreur lors de l'obtention des données du cycle de vie des tâches"
+			},
+			"titles": {
+				"dashboard": "",
+				"top_durations": ""
 			}
 		},
 		"job_payments": {
@@ -1271,6 +1287,7 @@
 				"amount": "",
 				"dateOfPayment": "",
 				"descriptions": "",
+				"hint": "",
 				"payer": "",
 				"payername": "",
 				"paymentid": "",
@@ -1823,6 +1840,7 @@
 				"job": "",
 				"jobcosting": "",
 				"jobtotals": "",
+				"labor_hrs": "",
 				"labor_rates_subtotal": "",
 				"laborallocations": "",
 				"labortotals": "",
@@ -2319,6 +2337,7 @@
 				"markexported": "",
 				"markreexported": "",
 				"payment": "",
+				"paymentupdate": "",
 				"stripe": ""
 			}
 		},
@@ -2417,6 +2436,7 @@
 				"invoice_total_payable": "",
 				"iou_form": "",
 				"job_costing_ro": "",
+				"job_lifecycle_ro": "",
 				"job_notes": "",
 				"key_tag": "",
 				"labels": {
@@ -2583,17 +2603,17 @@
 			},
 			"labels": {
 				"advanced_filters": "",
-				"advanced_filters_show": "",
-				"advanced_filters_hide": "",
-				"advanced_filters_filters": "",
-				"advanced_filters_sorters": "",
-				"advanced_filters_filter_field": "",
-				"advanced_filters_sorter_field": "",
-				"advanced_filters_true": "",
 				"advanced_filters_false": "",
-				"advanced_filters_sorter_direction": "",
+				"advanced_filters_filter_field": "",
 				"advanced_filters_filter_operator": "",
 				"advanced_filters_filter_value": "",
+				"advanced_filters_filters": "",
+				"advanced_filters_hide": "",
+				"advanced_filters_show": "",
+				"advanced_filters_sorter_direction": "",
+				"advanced_filters_sorter_field": "",
+				"advanced_filters_sorters": "",
+				"advanced_filters_true": "",
 				"dates": "",
 				"employee": "",
 				"filterson": "",
@@ -2675,6 +2695,8 @@
 				"job_costing_ro_date_summary": "",
 				"job_costing_ro_estimator": "",
 				"job_costing_ro_ins_co": "",
+				"job_lifecycle_date_detail": "",
+				"job_lifecycle_date_summary": "",
 				"jobs_completed_not_invoiced": "",
 				"jobs_invoiced_not_exported": "",
 				"jobs_reconcile": "",

client/src/utils/TemplateConstants.js

@@ -514,6 +514,14 @@ export const TemplateList = (type, context) => {
             group: "financial",
             dms: true,
           },
+          job_lifecycle_ro: {
+            title: i18n.t("printcenter.jobs.job_lifecycle_ro"),
+            description: "",
+            subject: i18n.t("printcenter.jobs.job_lifecycle_ro"),
+            key: "job_lifecycle_ro",
+            disabled: false,
+            group: "post",
+          },
         }
       : {}),
     ...(!type || type === "job_special"
@@ -2048,6 +2056,30 @@ export const TemplateList = (type, context) => {
             datedisable: true,
             group: "customers",
           },
+          job_lifecycle_date_detail: {
+            title: i18n.t("reportcenter.templates.job_lifecycle_date_detail"),
+            subject: i18n.t("reportcenter.templates.job_lifecycle_date_detail"),
+            key: "job_lifecycle_date_detail",
+            //idtype: "vendor",
+            disabled: false,
+            rangeFilter: {
+              object: i18n.t("reportcenter.labels.objects.jobs"),
+              field: i18n.t("jobs.fields.date_invoiced"),
+            },
+            group: "jobs",
+          },
+          job_lifecycle_date_summary: {
+            title: i18n.t("reportcenter.templates.job_lifecycle_date_summary"),
+            subject: i18n.t("reportcenter.templates.job_lifecycle_date_summary"),
+            key: "job_lifecycle_date_summary",
+            //idtype: "vendor",
+            disabled: false,
+            rangeFilter: {
+              object: i18n.t("reportcenter.labels.objects.jobs"),
+              field: i18n.t("jobs.fields.date_invoiced"),
+            },
+            group: "jobs",
+          },
         }
       : {}),
     ...(!type || type === "courtesycarcontract"

client/src/utils/handleBeta.js

@@ -1,37 +1,47 @@
-export const BETA_KEY = 'betaSwitchImex';
+export const BETA_KEY = "betaSwitchImex";
 
 export const checkBeta = () => {
-    const cookie = document.cookie.split('; ').find(row => row.startsWith(BETA_KEY));
-    return cookie ? cookie.split('=')[1] === 'true' : false;
-}
-
+  const cookie = document.cookie.split("; ").find((row) => row.startsWith(BETA_KEY));
+  return cookie ? cookie.split("=")[1] === "true" : false;
+};
 
 export const setBeta = (value) => {
-    const domain = window.location.hostname.split('.').slice(-2).join('.');
-    document.cookie = `${BETA_KEY}=${value}; path=/; domain=.${domain}`;
-}
+  const domain = window.location.hostname.split(".").slice(-2).join(".");
+  document.cookie = `${BETA_KEY}=${value}; path=/; domain=.${domain}`;
+};
 
 export const handleBeta = () => {
-    // If the current host name does not start with beta or test, then we don't need to do anything.
-    if (window.location.hostname.startsWith('localhost')) {
-        console.log('Not on beta or test, so no need to handle beta.');
-        return;
+  if (window.location.hostname.startsWith("localhost")) {
+    console.log("Not on beta or test, so no need to handle beta.");
+    return;
+  }
+
+  const isBeta = checkBeta();
+  const currentHostName = window.location.hostname;
+
+  // Determine if the host name starts with "beta" or "www.beta"
+  const isBetaHost = currentHostName.startsWith("beta.");
+  const isBetaHostWithWWW = currentHostName.startsWith("www.beta.");
+
+  if (isBeta) {
+    // If beta is on and we are not on a beta domain, redirect to the beta version
+    if (!isBetaHost && !isBetaHostWithWWW) {
+      const newHostName = currentHostName.startsWith("www.")
+        ? `www.beta.${currentHostName.replace(/^www\./, "")}`
+        : `beta.${currentHostName}`;
+      const href = `${window.location.protocol}//${newHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
+      window.location.replace(href);
     }
-
-    const isBeta = checkBeta();
-
-    const currentHostName = window.location.hostname;
-
-    // Beta is enabled, but the current host name does start with beta.
-    if (isBeta && !currentHostName.startsWith('beta')) {
-        const href= `${window.location.protocol}//beta.${currentHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
-        window.location.replace(href);
+    // Otherwise, if beta is on and we're already on a beta domain, stay there
+  } else {
+    // If beta is off and we are on a beta domain, redirect to the non-beta version
+    if (isBetaHost || isBetaHostWithWWW) {
+      const newHostName = currentHostName.replace(/^www\.beta\./, "www.").replace(/^beta\./, "");
+      const href = `${window.location.protocol}//${newHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
+      window.location.replace(href);
     }
+    // Otherwise, if beta is off and we're not on a beta domain, stay there
+  }
+};
 
-    // Beta is not enabled, but the current host name does start with beta.
-    else if (!isBeta && currentHostName.startsWith('beta')) {
-        const href = `${window.location.protocol}//${currentHostName.replace('beta.', '')}${window.location.pathname}${window.location.search}${window.location.hash}`;
-        window.location.replace(href);
-    }
-}
 export default handleBeta;

hasura/metadata/cron_triggers.yaml

@@ -1 +1,8 @@
-[]
+- name: Task Reminders
+  webhook: '{{HASURA_API_URL}}/tasks-remind-handler'
+  schedule: '*/15 * * * *'
+  include_in_metadata: true
+  payload: {}
+  headers:
+    - name: event-secret
+      value_from_env: EVENT_SECRET

hasura/metadata/tables.yaml

@@ -569,6 +569,13 @@
           table:
             name: parts_orders
             schema: public
+    - name: tasks
+      using:
+        foreign_key_constraint_on:
+          column: billid
+          table:
+            name: tasks
+            schema: public
   insert_permissions:
     - role: user
       permission:
@@ -818,6 +825,13 @@
           table:
             name: inventory
             schema: public
+    - name: ioevents
+      using:
+        foreign_key_constraint_on:
+          column: bodyshopid
+          table:
+            name: ioevents
+            schema: public
     - name: jobs
       using:
         foreign_key_constraint_on:
@@ -846,6 +860,13 @@
           table:
             name: phonebook
             schema: public
+    - name: tasks
+      using:
+        foreign_key_constraint_on:
+          column: bodyshopid
+          table:
+            name: tasks
+            schema: public
     - name: timetickets
       using:
         foreign_key_constraint_on:
@@ -948,6 +969,7 @@
           - md_rbac
           - md_referral_sources
           - md_responsibility_centers
+          - md_ro_guard
           - md_ro_statuses
           - md_tasks_presets
           - md_to_emails
@@ -1047,6 +1069,7 @@
           - md_rbac
           - md_referral_sources
           - md_responsibility_centers
+          - md_ro_guard
           - md_ro_statuses
           - md_tasks_presets
           - md_to_emails
@@ -2675,6 +2698,13 @@
 - table:
     name: ioevents
     schema: public
+  object_relationships:
+    - name: bodyshop
+      using:
+        foreign_key_constraint_on: bodyshopid
+    - name: user
+      using:
+        foreign_key_constraint_on: useremail
 - table:
     name: job_ar_schema
     schema: public
@@ -2824,6 +2854,13 @@
           table:
             name: parts_order_lines
             schema: public
+    - name: tasks
+      using:
+        foreign_key_constraint_on:
+          column: joblineid
+          table:
+            name: tasks
+            schema: public
   insert_permissions:
     - role: user
       permission:
@@ -3311,6 +3348,13 @@
           table:
             name: scoreboard
             schema: public
+    - name: tasks
+      using:
+        foreign_key_constraint_on:
+          column: jobid
+          table:
+            name: tasks
+            schema: public
     - name: timetickets
       using:
         foreign_key_constraint_on:
@@ -5008,6 +5052,13 @@
           table:
             name: parts_order_lines
             schema: public
+    - name: tasks
+      using:
+        foreign_key_constraint_on:
+          column: partsorderid
+          table:
+            name: tasks
+            schema: public
   insert_permissions:
     - role: user
       permission:
@@ -5623,6 +5674,152 @@
                         _eq: X-Hasura-User-Id
                   - active:
                       _eq: true
+- table:
+    name: tasks
+    schema: public
+  object_relationships:
+    - name: bill
+      using:
+        foreign_key_constraint_on: billid
+    - name: bodyshop
+      using:
+        foreign_key_constraint_on: bodyshopid
+    - name: job
+      using:
+        foreign_key_constraint_on: jobid
+    - name: jobline
+      using:
+        foreign_key_constraint_on: joblineid
+    - name: parts_order
+      using:
+        foreign_key_constraint_on: partsorderid
+    - name: user
+      using:
+        foreign_key_constraint_on: assigned_to
+    - name: userByCreatedBy
+      using:
+        foreign_key_constraint_on: created_by
+  insert_permissions:
+    - role: user
+      permission:
+        check:
+          bodyshop:
+            associations:
+              _and:
+                - user:
+                    authid:
+                      _eq: X-Hasura-User-Id
+                - active:
+                    _eq: true
+        columns:
+          - completed
+          - deleted
+          - priority
+          - assigned_to
+          - created_by
+          - description
+          - title
+          - completed_at
+          - created_at
+          - deleted_at
+          - due_date
+          - remind_at
+          - updated_at
+          - billid
+          - bodyshopid
+          - id
+          - jobid
+          - joblineid
+          - partsorderid
+  select_permissions:
+    - role: user
+      permission:
+        columns:
+          - completed
+          - deleted
+          - priority
+          - assigned_to
+          - created_by
+          - description
+          - title
+          - completed_at
+          - created_at
+          - deleted_at
+          - due_date
+          - remind_at
+          - updated_at
+          - billid
+          - bodyshopid
+          - id
+          - jobid
+          - joblineid
+          - partsorderid
+        filter:
+          bodyshop:
+            associations:
+              _and:
+                - user:
+                    authid:
+                      _eq: X-Hasura-User-Id
+                - active:
+                    _eq: true
+        allow_aggregations: true
+  update_permissions:
+    - role: user
+      permission:
+        columns:
+          - completed
+          - deleted
+          - priority
+          - assigned_to
+          - created_by
+          - description
+          - title
+          - completed_at
+          - created_at
+          - deleted_at
+          - due_date
+          - remind_at
+          - updated_at
+          - billid
+          - bodyshopid
+          - id
+          - jobid
+          - joblineid
+          - partsorderid
+        filter:
+          bodyshop:
+            associations:
+              _and:
+                - user:
+                    authid:
+                      _eq: X-Hasura-User-Id
+                - active:
+                    _eq: true
+        check: null
+  event_triggers:
+    - name: tasks_assigned_changed
+      definition:
+        enable_manual: false
+        insert:
+          columns: '*'
+        update:
+          columns:
+            - assigned_to
+      retry_conf:
+        interval_sec: 10
+        num_retries: 3
+        timeout_sec: 60
+      webhook_from_env: HASURA_API_URL
+      headers:
+        - name: event-secret
+          value_from_env: EVENT_SECRET
+      request_transform:
+        method: POST
+        query_params: {}
+        template_engine: Kriti
+        url: '{{$base_url}}/tasks-assigned-handler'
+        version: 2
 - table:
     name: timetickets
     schema: public
@@ -6006,6 +6203,13 @@
           table:
             name: exportlog
             schema: public
+    - name: ioevents
+      using:
+        foreign_key_constraint_on:
+          column: useremail
+          table:
+            name: ioevents
+            schema: public
     - name: messages
       using:
         foreign_key_constraint_on:
@@ -6034,6 +6238,20 @@
           table:
             name: parts_orders
             schema: public
+    - name: tasks
+      using:
+        foreign_key_constraint_on:
+          column: assigned_to
+          table:
+            name: tasks
+            schema: public
+    - name: tasksByCreatedBy
+      using:
+        foreign_key_constraint_on:
+          column: created_by
+          table:
+            name: tasks
+            schema: public
     - name: timetickets
       using:
         foreign_key_constraint_on:

hasura/migrations/1710520532230_alter_table_public_ioevents_add_column_useremail/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."ioevents" add column "useremail" text
+--  not null;

hasura/migrations/1710520532230_alter_table_public_ioevents_add_column_useremail/up.sql

@@ -0,0 +1 @@
+alter table "public"."ioevents" add column "useremail" text;

hasura/migrations/1710520551755_alter_table_public_ioevents_add_column_bodyshopid/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."ioevents" add column "bodyshopid" uuid
+--  null;

hasura/migrations/1710520551755_alter_table_public_ioevents_add_column_bodyshopid/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."ioevents" add column "bodyshopid" uuid
+ null;

hasura/migrations/1710520563676_alter_table_public_ioevents_alter_column_useremail/down.sql

@@ -0,0 +1 @@
+alter table "public"."ioevents" alter column "useremail" set not null;

hasura/migrations/1710520563676_alter_table_public_ioevents_alter_column_useremail/up.sql

@@ -0,0 +1 @@
+alter table "public"."ioevents" alter column "useremail" drop not null;

hasura/migrations/1710520583458_alter_table_public_ioevents_add_column_env/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."ioevents" add column "env" text
+--  null;

hasura/migrations/1710520583458_alter_table_public_ioevents_add_column_env/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."ioevents" add column "env" text
+ null;

hasura/migrations/1710520629475_create_index_ioevents_useremail/down.sql

@@ -0,0 +1 @@
+DROP INDEX IF EXISTS "public"."ioevents_useremail";

hasura/migrations/1710520629475_create_index_ioevents_useremail/up.sql

@@ -0,0 +1,2 @@
+CREATE  INDEX "ioevents_useremail" on
+  "public"."ioevents" using btree ("useremail");

hasura/migrations/1710520654372_set_fk_public_ioevents_useremail/down.sql

@@ -0,0 +1 @@
+alter table "public"."ioevents" drop constraint "ioevents_useremail_fkey";

hasura/migrations/1710520654372_set_fk_public_ioevents_useremail/up.sql

@@ -0,0 +1,5 @@
+alter table "public"."ioevents"
+  add constraint "ioevents_useremail_fkey"
+  foreign key ("useremail")
+  references "public"."users"
+  ("email") on update set null on delete set null;

hasura/migrations/1710520693899_set_fk_public_ioevents_bodyshopid/down.sql

@@ -0,0 +1 @@
+alter table "public"."ioevents" drop constraint "ioevents_bodyshopid_fkey";

hasura/migrations/1710520693899_set_fk_public_ioevents_bodyshopid/up.sql

@@ -0,0 +1,5 @@
+alter table "public"."ioevents"
+  add constraint "ioevents_bodyshopid_fkey"
+  foreign key ("bodyshopid")
+  references "public"."bodyshops"
+  ("id") on update set null on delete set null;

hasura/migrations/1710523428339_create_index_idx_audit_trail_type/down.sql

@@ -0,0 +1 @@
+DROP INDEX IF EXISTS "public"."idx_audit_trail_type";

hasura/migrations/1710523428339_create_index_idx_audit_trail_type/up.sql

@@ -0,0 +1,2 @@
+CREATE  INDEX "idx_audit_trail_type" on
+  "public"."audit_trail" using btree ("type");

hasura/migrations/1710532848432_create_table_public_tasks/down.sql

@@ -0,0 +1 @@
+DROP TABLE "public"."tasks";

hasura/migrations/1710532848432_create_table_public_tasks/up.sql

@@ -0,0 +1,18 @@
+CREATE TABLE "public"."tasks" ("id" uuid NOT NULL DEFAULT gen_random_uuid(), "created_at" timestamptz NOT NULL DEFAULT now(), "updated_at" timestamptz NOT NULL DEFAULT now(), "title" text NOT NULL, "description" Text, "deleted" boolean NOT NULL DEFAULT false, "deleted_at" timestamptz, "due_date" timestamptz, "created_by" text NOT NULL, "assigned_to" Text, "completed" boolean NOT NULL DEFAULT false, "completed_at" timestamptz, "remind_at" timestamptz, "priority" numeric, "bodyshopid" UUID NOT NULL, "jobid" UUID NOT NULL, "joblineid" UUID, "partsorderid" UUID, "billid" UUID, PRIMARY KEY ("id") , FOREIGN KEY ("created_by") REFERENCES "public"."users"("email") ON UPDATE restrict ON DELETE restrict, FOREIGN KEY ("assigned_to") REFERENCES "public"."users"("email") ON UPDATE restrict ON DELETE restrict, FOREIGN KEY ("bodyshopid") REFERENCES "public"."bodyshops"("id") ON UPDATE restrict ON DELETE restrict, FOREIGN KEY ("jobid") REFERENCES "public"."jobs"("id") ON UPDATE cascade ON DELETE cascade, FOREIGN KEY ("joblineid") REFERENCES "public"."joblines"("id") ON UPDATE set null ON DELETE set null, FOREIGN KEY ("partsorderid") REFERENCES "public"."parts_orders"("id") ON UPDATE set null ON DELETE set null, FOREIGN KEY ("billid") REFERENCES "public"."bills"("id") ON UPDATE set null ON DELETE set null);
+CREATE OR REPLACE FUNCTION "public"."set_current_timestamp_updated_at"()
+RETURNS TRIGGER AS $$
+DECLARE
+  _new record;
+BEGIN
+  _new := NEW;
+  _new."updated_at" = NOW();
+  RETURN _new;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER "set_public_tasks_updated_at"
+BEFORE UPDATE ON "public"."tasks"
+FOR EACH ROW
+EXECUTE PROCEDURE "public"."set_current_timestamp_updated_at"();
+COMMENT ON TRIGGER "set_public_tasks_updated_at" ON "public"."tasks" 
+IS 'trigger to set value of column "updated_at" to current timestamp on row update';
+CREATE EXTENSION IF NOT EXISTS pgcrypto;

hasura/migrations/1712162752434_alter_table_public_bodyshops_add_column_md_ro_guard/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."bodyshops" add column "md_ro_guard" jsonb
+--  null default jsonb_build_object();

hasura/migrations/1712162752434_alter_table_public_bodyshops_add_column_md_ro_guard/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."bodyshops" add column "md_ro_guard" jsonb
+ null default jsonb_build_object();

hasura/migrations/1712675814937_alter_table_public_tasks_add_column_remind_at_sent/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."tasks" add column "remind_at_sent" timestamptz
+--  null;

hasura/migrations/1712675814937_alter_table_public_tasks_add_column_remind_at_sent/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."tasks" add column "remind_at_sent" timestamptz
+ null;

server/cdk/cdk-calculate-allocations.js

@@ -224,11 +224,34 @@ exports.default = async function (socket, jobid) {
       if (mapaAccount) {
         if (!costCenterHash[mapaAccountName])
           costCenterHash[mapaAccountName] = Dinero();
-        costCenterHash[mapaAccountName] = costCenterHash[mapaAccountName].add(
-          Dinero(job.job_totals.rates.mapa.total).percentage(
-            bodyshop?.cdk_configuration?.sendmaterialscosting
-          )
-        );
+        if (job.bodyshop.use_paint_scale_data === true) {
+          if (job.mixdata.length > 0) {
+            costCenterHash[mapaAccountName] = costCenterHash[
+              mapaAccountName
+            ].add(
+              Dinero({
+                amount: Math.round(
+                  ((job.mixdata[0] && job.mixdata[0].totalliquidcost) || 0) *
+                    100
+                ),
+              })
+            );
+          } else {
+            costCenterHash[mapaAccountName] = costCenterHash[
+              mapaAccountName
+            ].add(
+              Dinero(job.job_totals.rates.mapa.total).percentage(
+                bodyshop?.cdk_configuration?.sendmaterialscosting
+              )
+            );
+          }
+        } else {
+          costCenterHash[mapaAccountName] = costCenterHash[mapaAccountName].add(
+            Dinero(job.job_totals.rates.mapa.total).percentage(
+              bodyshop?.cdk_configuration?.sendmaterialscosting
+            )
+          );
+        }
       } else {
         //console.log("NO MAPA ACCOUNT FOUND!!");
       }

server/data/kaizen.js

@@ -201,19 +201,24 @@ exports.default = async (req, res) => {
     } finally {
       sftp.end();
     }
-    sendServerEmail({
-      subject: `Kaizen Report ${moment().format("MM-DD-YY")}`,
-      text: `Errors: ${allErrors.map((e) => JSON.stringify(e, null, 2))}
-      Uploaded: ${JSON.stringify(
-        allxmlsToUpload.map((x) => ({ filename: x.filename, count: x.count })),
-        null,
-        2
-      )}
-      `,
-    });
+    // sendServerEmail({
+    //   subject: `Kaizen Report ${moment().format("MM-DD-YY")}`,
+    //   text: `Errors: ${allErrors.map((e) => JSON.stringify(e, null, 2))}
+    //   Uploaded: ${JSON.stringify(
+    //     allxmlsToUpload.map((x) => ({ filename: x.filename, count: x.count })),
+    //     null,
+    //     2
+    //   )}
+    //   `,
+    // });
     res.sendStatus(200);
   } catch (error) {
     res.status(200).json(error);
+    sendServerEmail({
+      subject: `Kaizen Report ${moment().format("MM-DD-YY @ HH:mm:ss")}`,
+      text: `Errors: JSON.stringify(error)}
+      All Errors: ${allErrors.map((e) => JSON.stringify(e, null, 2))}`,
+    });
   }
 };
 

server/graphql-client/queries.js

@@ -1793,6 +1793,7 @@ exports.GET_CDK_ALLOCATIONS = `query QUERY_JOB_CLOSE_DETAILS($id: uuid!) {
       md_responsibility_centers
       cdk_configuration
       pbs_configuration
+      use_paint_scale_data
     }
     ro_number
     dms_allocation
@@ -1900,6 +1901,10 @@ exports.GET_CDK_ALLOCATIONS = `query QUERY_JOB_CLOSE_DETAILS($id: uuid!) {
       line_ref
       unq_seq
     }
+    mixdata(limit: 1, order_by: {updated_at: desc}) {
+      jobid
+      totalliquidcost
+    }
   }
 }`;
 
@@ -2175,4 +2180,12 @@ exports.COMPLETE_SURVEY = `mutation COMPLETE_SURVEY($surveyId: uuid!, $survey: c
     update_csi(where: { id: { _eq: $surveyId } }, _set: $survey) {
       affected_rows
     }
-  }`;
+  }`;
+
+exports.GET_JOBS_BY_PKS = `query GET_JOBS_BY_PKS($ids: [uuid!]!) {
+  jobs(where: {id: {_in: $ids}}) {
+    id
+    shopid
+  }
+}
+`;

server/intellipay/intellipay.js

@@ -8,21 +8,15 @@ const moment = require("moment");
 const logger = require("../utils/logger");
 
 require("dotenv").config({
-  path: path.resolve(
-    process.cwd(),
-    `.env.${process.env.NODE_ENV || "development"}`
-  ),
+  path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || "development"}`)
 });
 
 const domain = process.env.NODE_ENV ? "secure" : "test";
 
-const {
-  SecretsManagerClient,
-  GetSecretValueCommand,
-} = require("@aws-sdk/client-secrets-manager");
+const { SecretsManagerClient, GetSecretValueCommand } = require("@aws-sdk/client-secrets-manager");
 
 const client = new SecretsManagerClient({
-  region: "ca-central-1",
+  region: "ca-central-1" //TODO-AIO: instance manager required when merged to master-AIO
 });
 
 const gqlClient = require("../graphql-client/graphql-client").client;
@@ -32,7 +26,7 @@ const getShopCredentials = async (bodyshop) => {
   if (process.env.NODE_ENV === undefined) {
     return {
       merchantkey: process.env.INTELLIPAY_MERCHANTKEY,
-      apikey: process.env.INTELLIPAY_APIKEY,
+      apikey: process.env.INTELLIPAY_APIKEY
     };
   }
 
@@ -42,26 +36,20 @@ const getShopCredentials = async (bodyshop) => {
       const secret = await client.send(
         new GetSecretValueCommand({
           SecretId: `intellipay-credentials-${bodyshop.imexshopid}`,
-          VersionStage: "AWSCURRENT", // VersionStage defaults to AWSCURRENT if unspecified
+          VersionStage: "AWSCURRENT" // VersionStage defaults to AWSCURRENT if unspecified
         })
       );
       return JSON.parse(secret.SecretString);
     } catch (error) {
       return {
-        error: error.message,
+        error: error.message
       };
     }
   }
 };
 
 exports.lightbox_credentials = async (req, res) => {
-  logger.log(
-    "intellipay-lightbox-credentials",
-    "DEBUG",
-    req.user?.email,
-    null,
-    null
-  );
+  logger.log("intellipay-lightbox-credentials", "DEBUG", req.user?.email, null, null);
 
   const shopCredentials = await getShopCredentials(req.body.bodyshop);
 
@@ -75,11 +63,9 @@ exports.lightbox_credentials = async (req, res) => {
       headers: { "content-type": "application/x-www-form-urlencoded" },
       data: qs.stringify({
         ...shopCredentials,
-        operatingenv: "businessattended",
+        operatingenv: "businessattended"
       }),
-      url: `https://${domain}.cpteller.com/api/custapi.cfc?method=autoterminal${
-        req.body.refresh ? "_refresh" : ""
-      }`, //autoterminal_refresh
+      url: `https://${domain}.cpteller.com/api/custapi.cfc?method=autoterminal${req.body.refresh ? "_refresh" : ""}` //autoterminal_refresh
     };
 
     const response = await axios(options);
@@ -87,13 +73,9 @@ exports.lightbox_credentials = async (req, res) => {
     res.send(response.data);
   } catch (error) {
     console.log(error);
-    logger.log(
-      "intellipay-lightbox-credentials-error",
-      "ERROR",
-      req.user?.email,
-      null,
-      { error: JSON.stringify(error) }
-    );
+    logger.log("intellipay-lightbox-credentials-error", "ERROR", req.user?.email, null, {
+      error: JSON.stringify(error)
+    });
     res.json({ error });
   }
 };
@@ -112,9 +94,9 @@ exports.payment_refund = async (req, res) => {
         method: "payment_refund",
         ...shopCredentials,
         paymentid: req.body.paymentid,
-        amount: req.body.amount,
+        amount: req.body.amount
       }),
-      url: `https://${domain}.cpteller.com/api/26/webapi.cfc?method=payment_refund`,
+      url: `https://${domain}.cpteller.com/api/26/webapi.cfc?method=payment_refund`
     };
 
     const response = await axios(options);
@@ -123,7 +105,7 @@ exports.payment_refund = async (req, res) => {
   } catch (error) {
     console.log(error);
     logger.log("intellipay-refund-error", "ERROR", req.user?.email, null, {
-      error: JSON.stringify(error),
+      error: JSON.stringify(error)
     });
     res.json({ error });
   }
@@ -141,15 +123,13 @@ exports.generate_payment_url = async (req, res) => {
       data: qs.stringify({
         ...shopCredentials,
         //...req.body,
-        amount: Dinero({ amount: Math.round(req.body.amount * 100) }).toFormat(
-          "0.00"
-        ),
+        amount: Dinero({ amount: Math.round(req.body.amount * 100) }).toFormat("0.00"),
         account: req.body.account,
         invoice: req.body.invoice,
-        createshorturl: true,
+        createshorturl: true
         //The postback URL is set at the CP teller global terminal settings page.
       }),
-      url: `https://${domain}.cpteller.com/api/custapi.cfc?method=generate_lightbox_url`,
+      url: `https://${domain}.cpteller.com/api/custapi.cfc?method=generate_lightbox_url`
     };
 
     const response = await axios(options);
@@ -158,56 +138,100 @@ exports.generate_payment_url = async (req, res) => {
   } catch (error) {
     console.log(error);
     logger.log("intellipay-payment-url-error", "ERROR", req.user?.email, null, {
-      error: JSON.stringify(error),
+      error: JSON.stringify(error)
     });
     res.json({ error });
   }
 };
 
 exports.postback = async (req, res) => {
-  logger.log("intellipay-postback", "ERROR", req.user?.email, null, req.body);
+  logger.log("intellipay-postback", "DEBUG", req.user?.email, null, req.body);
   const { body: values } = req;
 
-  if (!values.invoice) {
+  const comment = Buffer.from(values?.comment, "base64").toString();
+
+  if ((!values.invoice || values.invoice === "") && !comment) {
+    //invoice is specified through the pay link. Comment by IO.
+    logger.log("intellipay-postback-ignored", "DEBUG", req.user?.email, null, req.body);
     res.sendStatus(200);
     return;
   }
-  // TODO query job by account name
-  const job = await gqlClient.request(queries.GET_JOB_BY_PK, {
-    id: values.invoice,
-  });
-  // TODO add mutation to database
 
   try {
-    const paymentResult = await gqlClient.request(queries.INSERT_NEW_PAYMENT, {
-      paymentInput: {
-        amount: values.total,
-        transactionid: `C00 ${values.authcode}`,
-        payer: "Customer",
-        type: values.cardtype,
-        jobid: values.invoice,
-        date: moment(Date.now()),
-      },
-    });
+    if (values.invoice) {
+      //This is a link email that's been sent out.
+      const job = await gqlClient.request(queries.GET_JOB_BY_PK, {
+        id: values.invoice
+      });
 
-    await gqlClient.request(queries.INSERT_PAYMENT_RESPONSE, {
-      paymentResponse: {
-        amount: values.total,
-        bodyshopid: job.jobs_by_pk.shopid,
-        paymentid: paymentResult.id,
-        jobid: values.invoice,
-        declinereason: "Approved",
-        ext_paymentid: values.paymentid,
-        successful: true,
-        response: values,
-      },
-    });
+      const paymentResult = await gqlClient.request(queries.INSERT_NEW_PAYMENT, {
+        paymentInput: {
+          amount: values.total,
+          transactionid: values.authcode,
+          payer: "Customer",
+          type: values.cardtype,
+          jobid: values.invoice,
+          date: moment(Date.now())
+        }
+      });
 
-    res.send({ message: "Postback Successful" });
+      const responseResults = await gqlClient.request(queries.INSERT_PAYMENT_RESPONSE, {
+        paymentResponse: {
+          amount: values.total,
+          bodyshopid: job.jobs_by_pk.shopid,
+          paymentid: paymentResult.id,
+          jobid: values.invoice,
+          declinereason: "Approved",
+          ext_paymentid: values.paymentid,
+          successful: true,
+          response: values
+        }
+      });
+
+      logger.log("intellipay-postback-link-success", "DEBUG", req.user?.email, null, {
+        iprequest: values,
+        responseResults,
+        paymentResult
+      });
+      res.sendStatus(200);
+    } else if (comment) {
+      //This has been triggered by IO and may have multiple jobs.
+      const partialPayments = JSON.parse(comment);
+      const jobs = await gqlClient.request(queries.GET_JOBS_BY_PKS, {
+        ids: partialPayments.map((p) => p.jobid)
+      });
+
+      const paymentResult = await gqlClient.request(queries.INSERT_NEW_PAYMENT, {
+        paymentInput: partialPayments.map((p) => ({
+          amount: p.amount,
+          transactionid: values.authcode,
+          payer: "Customer",
+          type: values.cardtype,
+          jobid: p.jobid,
+          date: moment(Date.now()),
+          payment_responses: {
+            data: {
+              amount: values.total,
+              bodyshopid: jobs.jobs[0].shopid,
+              jobid: p.jobid,
+              declinereason: "Approved",
+              ext_paymentid: values.paymentid,
+              successful: true,
+              response: values
+            }
+          }
+        }))
+      });
+      logger.log("intellipay-postback-app-success", "DEBUG", req.user?.email, null, {
+        iprequest: values,
+        paymentResult
+      });
+      res.sendStatus(200);
+    }
   } catch (error) {
     logger.log("intellipay-postback-error", "ERROR", req.user?.email, null, {
       error: JSON.stringify(error),
-      body: req.body,
+      body: req.body
     });
     res.status(400).json({ succesful: false, error: error.message });
   }

server/ioevent/ioevent.js

@@ -11,27 +11,40 @@ require("dotenv").config({
 });
 
 exports.default = async (req, res) => {
-  const { operationName, time, dbevent, user, imexshopid } = req.body;
+  const {
+    useremail,
+    bodyshopid,
+    operationName,
+    variables,
+    env,
+    time,
+    dbevent,
+    user,
+  } = req.body;
 
   try {
-    // await client.request(queries.INSERT_IOEVENT, {
-    //   event: {
-    //     operationname: operationName,
-    //     time,
-    //     dbevent,
-    //   },
-    // });
-    console.log("IOEVENT", operationName, time, dbevent, user, imexshopid);
-    logger.log("ioevent", "trace", user, null, {
-      imexshopid,
-      operationName,
-      time,
-      dbevent,
+    await client.request(queries.INSERT_IOEVENT, {
+      event: {
+        operationname: operationName,
+        time,
+        dbevent,
+        env,
+        variables,
+        bodyshopid,
+        useremail,
+      },
     });
-
     res.sendStatus(200);
   } catch (error) {
-    console.log("error", error);
-    res.status(400).send(error);
+    logger.log("ioevent-error", "trace", user, null, {
+      operationname: operationName,
+      time,
+      dbevent,
+      env,
+      variables,
+      bodyshopid,
+      useremail,
+    });
+    res.sendStatus(200);
   }
 };

server/job/job-lifecycle.js

@@ -3,6 +3,7 @@ const queries = require("../graphql-client/queries");
 const moment = require("moment");
 const durationToHumanReadable = require("../utils/durationToHumanReadable");
 const calculateStatusDuration = require("../utils/calculateStatusDuration");
+const getLifecycleStatusColor = require("../utils/getLifecycleStatusColor");
 
 const jobLifecycle = async (req, res) => {
     // Grab the jobids and statuses from the request body
@@ -28,12 +29,12 @@ const jobLifecycle = async (req, res) => {
             jobIDs,
             transitions: []
         });
-
     }
 
     const transitionsByJobId = _.groupBy(resp.transitions, 'jobid');
 
     const groupedTransitions = {};
+    const allDurations = [];
 
     for (let jobId in transitionsByJobId) {
         let lifecycle = transitionsByJobId[jobId].map(transition => {
@@ -53,15 +54,57 @@ const jobLifecycle = async (req, res) => {
             return transition;
         });
 
+        const durations = calculateStatusDuration(lifecycle, statuses);
+
         groupedTransitions[jobId] = {
-            lifecycle: lifecycle,
-            durations: calculateStatusDuration(lifecycle, statuses),
+            lifecycle,
+            durations
         };
+
+        if (durations?.summations) {
+            allDurations.push(durations.summations);
+        }
     }
 
+    const finalSummations = [];
+    const flatGroupedAllDurations = _.groupBy(allDurations.flat(),'status');
+
+    const finalStatusCounts = Object.keys(flatGroupedAllDurations).reduce((acc, status) => {
+        acc[status] = flatGroupedAllDurations[status].length;
+        return acc;
+    }, {});
+    // Calculate total value of all statuses
+    const finalTotal = Object.values(flatGroupedAllDurations).reduce((total, statusArr) => {
+        return total + statusArr.reduce((acc, curr) => acc + curr.value, 0);
+    }, 0);
+
+    Object.keys(flatGroupedAllDurations).forEach(status => {
+        const value = flatGroupedAllDurations[status].reduce((acc, curr) => acc + curr.value, 0);
+        const humanReadable = durationToHumanReadable(moment.duration(value));
+        const percentage = (value / finalTotal) * 100;
+        const color = getLifecycleStatusColor(status);
+        const roundedPercentage = `${Math.round(percentage)}%`;
+        finalSummations.push({
+            status,
+            value,
+            humanReadable,
+            percentage,
+            color,
+            roundedPercentage
+        });
+    });
+
     return res.status(200).json({
         jobIDs,
         transition: groupedTransitions,
+        durations: {
+            jobs: jobIDs.length,
+            summations: finalSummations,
+            totalStatuses: finalSummations.length,
+            total: finalTotal,
+            statusCounts: finalStatusCounts,
+            humanReadable:  durationToHumanReadable(moment.duration(finalTotal))
+        }
     });
 }
 

server/utils/calculateStatusDuration.js

@@ -1,15 +1,7 @@
 const durationToHumanReadable = require("./durationToHumanReadable");
 const moment = require("moment");
+const getLifecycleStatusColor = require("./getLifecycleStatusColor");
 const _ = require("lodash");
-const crypto = require('crypto');
-
-const getColor = (key) => {
-    const hash = crypto.createHash('sha256');
-    hash.update(key);
-    const hashedKey = hash.digest('hex');
-    const num = parseInt(hashedKey, 16);
-    return '#' + (num % 16777215).toString(16).padStart(6, '0');
-};
 
 const calculateStatusDuration = (transitions, statuses) => {
     let statusDuration = {};
@@ -33,26 +25,16 @@ const calculateStatusDuration = (transitions, statuses) => {
         if (!transition.prev_value) {
             statusDuration[transition.value] = {
                 value: duration,
-                humanReadable: transition.duration_readable
+                humanReadable: durationToHumanReadable(moment.duration(duration))
             };
-        } else if (!transition.next_value) {
+        }  else {
             if (statusDuration[transition.value]) {
                 statusDuration[transition.value].value += duration;
-                statusDuration[transition.value].humanReadable = transition.duration_readable;
+                statusDuration[transition.value].humanReadable = durationToHumanReadable(moment.duration(statusDuration[transition.value].value));
             } else {
                 statusDuration[transition.value] = {
                     value: duration,
-                    humanReadable: transition.duration_readable
-                };
-            }
-        } else {
-            if (statusDuration[transition.value]) {
-                statusDuration[transition.value].value += duration;
-                statusDuration[transition.value].humanReadable = transition.duration_readable;
-            } else {
-                statusDuration[transition.value] = {
-                    value: duration,
-                    humanReadable: transition.duration_readable
+                    humanReadable: durationToHumanReadable(moment.duration(duration))
                 };
             }
         }
@@ -79,7 +61,7 @@ const calculateStatusDuration = (transitions, statuses) => {
                 value,
                 humanReadable,
                 percentage: statusDuration[status].percentage,
-                color: getColor(status),
+                color: getLifecycleStatusColor(status),
                 roundedPercentage: `${Math.round(statusDuration[status].percentage)}%`
             });
         }

server/utils/getLifecycleStatusColor.js

@@ -0,0 +1,11 @@
+const crypto = require('crypto');
+
+const getLifecycleStatusColor = (key) => {
+    const hash = crypto.createHash('sha256');
+    hash.update(key);
+    const hashedKey = hash.digest('hex');
+    const num = parseInt(hashedKey, 16);
+    return '#' + (num % 16777215).toString(16).padStart(6, '0');
+};
+
+module.exports = getLifecycleStatusColor;