Merged in feature/IO-2385-Tech-Console-Attendance-Report (pull request #943)

IO-2385 Tech Console to print Attendance Report from Shift Clock

client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx

@@ -23,36 +23,40 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
 
   const appt = []; // Flatten Data
   data.scheduled_in_today.forEach((item) => {
-    var i = {
-      canceled: item.canceled,
-      id: item.id,
-      alt_transport: item.job.alt_transport,
-      clm_no: item.job.clm_no,
-      jobid: item.job.jobid,
-      ins_co_nm: item.job.ins_co_nm,
-      iouparent: item.job.iouparent,
-      ownerid: item.job.ownerid,
-      ownr_co_nm: item.job.ownr_co_nm,
-      ownr_ea: item.job.ownr_ea,
-      ownr_fn: item.job.ownr_fn,
-      ownr_ln: item.job.ownr_ln,
-      ownr_ph1: item.job.ownr_ph1,
-      ownr_ph2: item.job.ownr_ph2,
-      production_vars: item.job.production_vars,
-      ro_number: item.job.ro_number,
-      suspended: item.job.suspended,
-      v_make_desc: item.job.v_make_desc,
-      v_model_desc: item.job.v_model_desc,
-      v_model_yr: item.job.v_model_yr,
-      v_vin: item.job.v_vin,
-      vehicleid: item.job.vehicleid,
-      note: item.note,
-      start: moment(item.start).format("hh:mm a"),
-      title: item.title,
-    };
-    appt.push(i);
+    if (item.job) {
+      var i = {
+        canceled: item.canceled,
+        id: item.id,
+        alt_transport: item.job.alt_transport,
+        clm_no: item.job.clm_no,
+        jobid: item.job.jobid,
+        ins_co_nm: item.job.ins_co_nm,
+        iouparent: item.job.iouparent,
+        ownerid: item.job.ownerid,
+        ownr_co_nm: item.job.ownr_co_nm,
+        ownr_ea: item.job.ownr_ea,
+        ownr_fn: item.job.ownr_fn,
+        ownr_ln: item.job.ownr_ln,
+        ownr_ph1: item.job.ownr_ph1,
+        ownr_ph2: item.job.ownr_ph2,
+        production_vars: item.job.production_vars,
+        ro_number: item.job.ro_number,
+        suspended: item.job.suspended,
+        v_make_desc: item.job.v_make_desc,
+        v_model_desc: item.job.v_model_desc,
+        v_model_yr: item.job.v_model_yr,
+        v_vin: item.job.v_vin,
+        vehicleid: item.job.vehicleid,
+        note: item.note,
+        start: moment(item.start).format("hh:mm a"),
+        title: item.title,
+      };
+      appt.push(i);
+    }
+  });
+  appt.sort(function (a, b) {
+    return new moment(a.start) - new moment(b.start);
   });
-  appt.sort ( function (a, b) { return new Date(a.start) - new Date(b.start); });
 
   const columns = [
     {
@@ -182,7 +186,12 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
   };
 
   return (
-    <Card title={t("dashboard.titles.scheduledintoday", {date: moment().startOf("day").format("MM/DD/YYYY")})} {...cardProps}>
+    <Card
+      title={t("dashboard.titles.scheduledintoday", {
+        date: moment().startOf("day").format("MM/DD/YYYY"),
+      })}
+      {...cardProps}
+    >
       <div style={{ height: "100%" }}>
         <Table
           onChange={handleTableChange}

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { SEARCH_VENDOR_AUTOCOMPLETE_WITH_ADDR } from "../../graphql/vendors.queries";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
@@ -14,14 +13,13 @@ import VendorSearchSelect from "../vendor-search-select/vendor-search-select.com
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  technician: selectTechnician,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(Jobd3RdPartyModal);
 
-export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
+export function Jobd3RdPartyModal({ bodyshop, jobId, job }) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -214,9 +212,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
             ]}
           >
             <Radio.Group>
-              {!technician ? (
-                <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
-              ) : null}
+              <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
               <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
             </Radio.Group>
           </Form.Item>

client/src/components/job-at-change/schedule-event.component.jsx

@@ -29,11 +29,11 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -208,46 +208,56 @@ export function ScheduleEventComponent({
             <Button>{t("appointments.actions.sendreminder")}</Button>
           </Dropdown>
         ) : null}
-        <Popover
-          trigger="click"
-          disabled={event.arrived}
-          content={
-            <Form
-              layout="vertical"
-              onFinish={({ lost_sale_reason }) => {
-                handleCancel({ id: event.id, lost_sale_reason });
-              }}
-            >
-              <Form.Item
-                name="lost_sale_reason"
-                label={t("jobs.fields.lost_sale_reason")}
-                rules={[
-                  {
-                    required: true,
-                    //message: t("general.validation.required"),
-                  },
-                ]}
-              >
-                <Select
-                  options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
-                    label: lsr,
-                    value: lsr,
-                  }))}
-                />
-              </Form.Item>
-              <Button htmlType="submit">
-                {t("appointments.actions.cancel")}
-              </Button>
-            </Form>
-          }
-        >
+        {event.arrived ? (
           <Button
             // onClick={() => handleCancel(event.id)}
             disabled={event.arrived}
           >
             {t("appointments.actions.cancel")}
           </Button>
-        </Popover>
+        ) : (
+          <Popover
+            trigger="click"
+            disabled={event.arrived}
+            content={
+              <Form
+                layout="vertical"
+                onFinish={({ lost_sale_reason }) => {
+                  handleCancel({ id: event.id, lost_sale_reason });
+                }}
+              >
+                <Form.Item
+                  name="lost_sale_reason"
+                  label={t("jobs.fields.lost_sale_reason")}
+                  rules={[
+                    {
+                      required: true,
+                      //message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <Select
+                    options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
+                      label: lsr,
+                      value: lsr,
+                    }))}
+                  />
+                </Form.Item>
+                <Button htmlType="submit">
+                  {t("appointments.actions.cancel")}
+                </Button>
+              </Form>
+            }
+          >
+            <Button
+              // onClick={() => handleCancel(event.id)}
+              disabled={event.arrived}
+            >
+              {t("appointments.actions.cancel")}
+            </Button>
+          </Popover>
+        )}
+
         {event.isintake ? (
           <Button
             disabled={event.arrived}

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

@@ -137,63 +137,67 @@ export function JobsDetailHeaderActions({
       <Menu.Item
         disabled={job.status !== bodyshop.md_ro_statuses.default_scheduled}
       >
-        <Popover
-          trigger="click"
-          disabled={job.status !== bodyshop.md_ro_statuses.default_scheduled}
-          content={
-            <Form
-              layout="vertical"
-              onFinish={async ({ lost_sale_reason }) => {
-                const jobUpdate = await cancelAllAppointments({
-                  variables: {
-                    jobid: job.id,
-                    job: {
-                      date_scheduled: null,
-                      scheduled_in: null,
-                      scheduled_completion: null,
-                      lost_sale_reason,
-                      status: bodyshop.md_ro_statuses.default_imported,
+        {job.status !== bodyshop.md_ro_statuses.default_scheduled ? (
+          t("menus.jobsactions.cancelallappointments")
+        ) : (
+          <Popover
+            trigger="click"
+            disabled={job.status !== bodyshop.md_ro_statuses.default_scheduled}
+            content={
+              <Form
+                layout="vertical"
+                onFinish={async ({ lost_sale_reason }) => {
+                  const jobUpdate = await cancelAllAppointments({
+                    variables: {
+                      jobid: job.id,
+                      job: {
+                        date_scheduled: null,
+                        scheduled_in: null,
+                        scheduled_completion: null,
+                        lost_sale_reason,
+                        status: bodyshop.md_ro_statuses.default_imported,
+                      },
                     },
-                  },
-                });
-                if (!jobUpdate.errors) {
-                  notification["success"]({
-                    message: t("appointments.successes.canceled"),
                   });
-                  return;
-                }
-              }}
-            >
-              <Form.Item
-                name="lost_sale_reason"
-                label={t("jobs.fields.lost_sale_reason")}
-                rules={[
-                  {
-                    required: true,
-                    //message: t("general.validation.required"),
-                  },
-                ]}
+                  if (!jobUpdate.errors) {
+                    notification["success"]({
+                      message: t("appointments.successes.canceled"),
+                    });
+                    return;
+                  }
+                }}
               >
-                <Select
-                  options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
-                    label: lsr,
-                    value: lsr,
-                  }))}
-                />
-              </Form.Item>
-              <Button
-                htmlType="submit"
-                disabled={
-                  job.status !== bodyshop.md_ro_statuses.default_scheduled
-                }
-              >
-                {t("appointments.actions.cancel")}
-              </Button>
-            </Form>
-          }
-        >
-          {t("menus.jobsactions.cancelallappointments")}
-        </Popover>
+                <Form.Item
+                  name="lost_sale_reason"
+                  label={t("jobs.fields.lost_sale_reason")}
+                  rules={[
+                    {
+                      required: true,
+                      //message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <Select
+                    options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
+                      label: lsr,
+                      value: lsr,
+                    }))}
+                  />
+                </Form.Item>
+                <Button
+                  htmlType="submit"
+                  disabled={
+                    job.status !== bodyshop.md_ro_statuses.default_scheduled
+                  }
+                >
+                  {t("appointments.actions.cancel")}
+                </Button>
+              </Form>
+            }
+          >
+            {t("menus.jobsactions.cancelallappointments")}
+          </Popover>
+        )}
       </Menu.Item>
       <Menu.Item
         disabled={
@@ -239,7 +243,12 @@ export function JobsDetailHeaderActions({
 
           setTimeTicketContext({
             actions: {},
-            context: { jobId: job.id },
+            context: {
+              jobId: job.id,
+              created_by: currentUser.displayName
+                ? currentUser.email.concat(" | ", currentUser.displayName)
+                : currentUser.email,
+            },
           });
         }}
       >

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

@@ -6,6 +6,7 @@ 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 OwnerDetailUpdateJobsComponent from "../owner-detail-update-jobs/owner-detail-update-jobs.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -15,6 +16,15 @@ const mapStateToProps = createStructuredSelector({
 function OwnerDetailJobsComponent({ bodyshop, owner }) {
   const { t } = useTranslation();
   const [selectedJobs, setSelectedJobs] = useState([]);
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+  
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
@@ -26,6 +36,9 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
           {record.ro_number || t("general.labels.na")}
         </Link>
       ),
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
     },
     {
       title: t("jobs.fields.vehicle"),
@@ -46,11 +59,17 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
       key: "clm_no",
+      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
     },
     {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
+      sorter: (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
     },
 
     {
@@ -60,6 +79,9 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
       render: (text, record) => (
         <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
       ),
+      sorter: (a, b) => a.clm_total - b.clm_total,
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
     },
   ];
 
@@ -80,6 +102,7 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
         scroll={{ x: true }}
         rowKey="id"
         dataSource={owner.jobs}
+        onChange={handleTableChange}
         rowSelection={{
           onSelect: (record, selected, selectedRows) => {
             setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []);

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

@@ -113,6 +113,8 @@ export function PartsOrderListTableComponent({
                   id: pol.id,
                   line_desc: pol.line_desc,
                   quantity: pol.quantity,
+                  act_price: pol.act_price,
+                  oem_partno: pol.oem_partno,
                 };
               }),
             },

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

@@ -79,6 +79,20 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
                       >
                         <Input />
                       </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.oem_partno")}
+                        key={`${index}oem_partno`}
+                        name={[field.name, "oem_partno"]}
+                      >
+                        <Input disabled />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.act_price")}
+                        key={`${index}act_price`}
+                        name={[field.name, "act_price"]}
+                      >
+                        <Input disabled />
+                      </Form.Item>
                       <Form.Item
                         label={t("joblines.fields.location")}
                         key={`${index}location`}

client/src/components/print-center-item/print-center-item.component.jsx

@@ -5,13 +5,11 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { selectPrintCenter } from "../../redux/modals/modals.selectors";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 const mapStateToProps = createStructuredSelector({
   printCenterModal: selectPrintCenter,
   bodyshop: selectBodyshop,
-  technician: selectTechnician,
 });
 const mapDispatchToProps = (dispatch) => ({
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
@@ -24,7 +22,6 @@ export function PrintCenterItemComponent({
   id,
   bodyshop,
   disabled,
-  technician,
 }) {
   const [loading, setLoading] = useState(false);
   const { context } = printCenterModal;
@@ -47,24 +44,19 @@ export function PrintCenterItemComponent({
       <Space wrap>
         {item.title}
         <PrinterOutlined onClick={renderToNewWindow} />
-        {!technician ? (
-          <MailOutlined
-            onClick={() => {
-              GenerateDocument(
-                {
-                  name: item.key,
-                  variables: { id: id },
-                },
-                {
-                  to: context.job && context.job.ownr_ea,
-                  subject: item.subject,
-                },
-                "e",
-                id
-              );
-            }}
-          />
-        ) : null}
+        <MailOutlined
+          onClick={() => {
+            GenerateDocument(
+              {
+                name: item.key,
+                variables: { id: id },
+              },
+              { to: context.job && context.job.ownr_ea, subject: item.subject },
+              "e",
+              id
+            );
+          }}
+        />
         {loading && <Spin />}
       </Space>
     </li>

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

@@ -1,33 +1,31 @@
-import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Descriptions, Drawer, PageHeader, Space } from "antd";
+import { Descriptions, Drawer, Space, PageHeader, Button } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
-import JobAtChange from "../job-at-change/job-at-change.component";
 import JobDetailCardsDocumentsComponent from "../job-detail-cards/job-detail-cards.documents.component";
 import JobDetailCardsNotesComponent from "../job-detail-cards/job-detail-cards.notes.component";
 import JobDetailCardsPartsComponent from "../job-detail-cards/job-detail-cards.parts.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
-import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add-button.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
+import JobAtChange from "../job-at-change/job-at-change.component";
+import { PrinterFilled } from "@ant-design/icons";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add-button.component";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  technician: selectTechnician,
 });
 const mapDispatchToProps = (dispatch) => ({
   setPrintCenterContext: (context) =>
@@ -42,7 +40,6 @@ export function ProductionListDetail({
   bodyshop,
   jobs,
   setPrintCenterContext,
-  technician,
 }) {
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
@@ -69,9 +66,7 @@ export function ProductionListDetail({
           title={theJob.ro_number}
           extra={
             <Space wrap>
-              {!technician ? (
-                <ProductionRemoveButton jobId={theJob.id} />
-              ) : null}
+              <ProductionRemoveButton jobId={theJob.id} />{" "}
               <Button
                 onClick={() => {
                   setPrintCenterContext({
@@ -87,9 +82,7 @@ export function ProductionListDetail({
                 <PrinterFilled />
                 {t("jobs.actions.printCenter")}
               </Button>
-              {!technician ? (
-                <ScoreboardAddButton job={data ? data.jobs_by_pk : {}} />
-              ) : null}
+              <ScoreboardAddButton job={data ? data.jobs_by_pk : {}} />
             </Space>
           }
         />

client/src/components/tech-job-print-tickets/tech-job-print-tickets.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Card, DatePicker, Form, Popover, Radio, Space } from "antd";
+import { Button, Card, DatePicker, Form, Popover, Space } from "antd";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -69,7 +69,7 @@ export function TechJobPrintTickets({ technician, event, attendacePrint }) {
               ? Templates.attendance_employee.subject
               : Templates.timetickets_employee.subject,
         },
-        values.sendby // === "email" ? "e" : "p"
+        "p"
       );
     } catch (error) {
       console.log(error);
@@ -99,25 +99,10 @@ export function TechJobPrintTickets({ technician, event, attendacePrint }) {
               format={"MM/DD/YYYY"}
             />
           </Form.Item>
-          <Form.Item dependencies={["dates"]}>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("general.labels.sendby")}
-                  name="sendby"
-                  initialValue="p"
-                >
-                  <Radio.Group>
-                    <Radio value="e">{t("general.labels.email")}</Radio>
-                    <Radio value="p">{t("general.labels.print")}</Radio>
-                  </Radio.Group>
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
+
           <Space wrap>
             <Button type="primary" onClick={() => form.submit()}>
-              {t("reportcenter.actions.generate")}
+              {t("general.actions.print")}
             </Button>
             <Button
               onClick={() => {
@@ -140,7 +125,7 @@ export function TechJobPrintTickets({ technician, event, attendacePrint }) {
   return (
     <Popover content={overlay} visible={visibility}>
       <Button loading={loading} onClick={handleClick}>
-        {t("general.labels.reports")}
+        {t("general.actions.print")}
       </Button>
     </Popover>
   );

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

@@ -6,8 +6,9 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component";
+import { alphaSort, statusSort } from "../../utils/sorters";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -16,6 +17,14 @@ const mapStateToProps = createStructuredSelector({
 export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
   const { t } = useTranslation();
   const [selectedJobs, setSelectedJobs] = useState([]);
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
 
   const columns = [
     {
@@ -28,6 +37,9 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
           {record.ro_number || t("general.labels.na")}
         </Link>
       ),
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
     },
     {
       title: t("jobs.fields.owner"),
@@ -43,11 +55,17 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
       key: "clm_no",
+      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
     },
     {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
+      sorter: (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
     },
 
     {
@@ -57,6 +75,9 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       render: (text, record) => (
         <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
       ),
+      sorter: (a, b) => a.clm_total - b.clm_total,
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
     },
   ];
 
@@ -76,6 +97,7 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
         rowKey="id"
         scroll={{ x: true }}
         dataSource={vehicle.jobs}
+        onChange={handleTableChange}
         rowSelection={{
           onSelect: (record, selected, selectedRows) => {
             setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []);

client/src/graphql/owners.queries.js

@@ -69,7 +69,7 @@ export const QUERY_OWNER_BY_ID = gql`
       preferred_contact
       note
       tax_number
-      jobs {
+      jobs(order_by: { date_open: desc }) {
         id
         ro_number
         clm_no

client/src/graphql/vehicles.queries.js

@@ -28,11 +28,10 @@ export const QUERY_VEHICLE_BY_ID = gql`
       updated_at
       trim_color
       notes
-      jobs {
+      jobs(order_by: { date_open: desc }) {
         id
         ro_number
         ownr_fn
-
         ownr_ln
         owner {
           id

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

@@ -1,24 +1,21 @@
 import { BackTop, Layout } from "antd";
-import React, { Suspense, lazy, useEffect } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Redirect, Route, Switch } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 
-import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import TechHeader from "../../components/tech-header/tech-header.component";
 import TechSider from "../../components/tech-sider/tech-sider.component";
-import UpdateAlert from "../../components/update-alert/update-alert.component";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import "./tech.page.styles.scss";
+import UpdateAlert from "../../components/update-alert/update-alert.component";
 const TimeTicketModalContainer = lazy(() =>
   import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
-const EmailOverlayContainer = lazy(() =>
-  import("../../components/email-overlay/email-overlay.container.jsx")
-);
 const PrintCenterModalContainer = lazy(() =>
   import("../../components/print-center-modal/print-center-modal.container")
 );
@@ -72,7 +69,6 @@ export function TechPage({ technician, match }) {
             >
               <FeatureWrapper featureName="tech-console">
                 <TimeTicketModalContainer />
-                <EmailOverlayContainer />
                 <PrintCenterModalContainer />
                 <Switch>
                   <Route

client/src/translations/en_us/common.json

@@ -1092,7 +1092,6 @@
 				"passwordsdonotmatch": "The passwords you have entered do not match.",
 				"print": "Print",
 				"refresh": "Refresh",
-				"reports": "Reports",
 				"required": "Required",
 				"saturday": "Saturday",
 				"search": "Search...",

client/src/translations/es/common.json

@@ -1092,7 +1092,6 @@
 				"passwordsdonotmatch": "",
 				"print": "",
 				"refresh": "",
-				"reports": "",
 				"required": "",
 				"saturday": "",
 				"search": "Buscar...",

client/src/translations/fr/common.json

@@ -1092,7 +1092,6 @@
 				"passwordsdonotmatch": "",
 				"print": "",
 				"refresh": "",
-				"reports": "",
 				"required": "",
 				"saturday": "",
 				"search": "Chercher...",

client/src/utils/TemplateConstants.js

@@ -1135,6 +1135,10 @@ export const TemplateList = (type, context) => {
             key: "timetickets_employee",
             idtype: "employee",
             disabled: false,
+            rangeFilter: {
+              object: i18n.t("reportcenter.labels.objects.timetickets"),
+              field: i18n.t("timetickets.fields.date"),
+            },
             group: "payroll",
           },
           attendance_detail: {