Tech Console improvements.

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

@@ -42,7 +42,7 @@ const colSpan = {
   },
 };
 
-export function JobsDetailHeader({ job, bodyshop }) {
+export function JobsDetailHeader({ job, bodyshop, disabled }) {
   const { t } = useTranslation();
 
   const jobInPostProduction = useMemo(() => {
@@ -84,7 +84,7 @@ export function JobsDetailHeader({ job, bodyshop }) {
         </Card>
       </Col>
       <Col {...colSpan}>
-        <Link to={`/manage/owners/${job.owner.id}`}>
+        <Link to={disabled ? "#" : `/manage/owners/${job.owner.id}`}>
           <Card
             className="ant-card-grid-hoverable"
             style={{ height: "100%" }}
@@ -109,7 +109,11 @@ export function JobsDetailHeader({ job, bodyshop }) {
         </Link>
       </Col>
       <Col {...colSpan}>
-        <Link to={job.vehicle && `/manage/vehicles/${job.vehicle.id}`}>
+        <Link
+          to={
+            disabled ? "#" : job.vehicle && `/manage/vehicles/${job.vehicle.id}`
+          }
+        >
           <Card
             className="ant-card-grid-hoverable"
             style={{ height: "100%" }}

client/src/components/layout-form-row/layout-form-row.component.jsx

@@ -6,6 +6,7 @@ export default function LayoutFormRow({
   header,
   children,
   grow = false,
+  noDivider = false,
   ...restProps
 }) {
   if (!!!children.length) {
@@ -44,9 +45,11 @@ export default function LayoutFormRow({
   //{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
   return (
     <div className="imex-form-row" {...restProps}>
-      <Divider orientation="left" type="horizontal">
+      {!noDivider && (
-        {header}
+        <Divider orientation="left" type="horizontal">
-      </Divider>
+          {header}
+        </Divider>
+      )}
       <Row {...rowGutter}>
         {children.map(
           (c, idx) =>

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

@@ -51,11 +51,8 @@ export function PrintCenterJobsComponent({ printCenterModal }) {
           >
             <Row gutter={[16, 16]}>
               {Object.keys(grouped).map((key) => (
-                <Col md={12} sm={24}>
+                <Col md={12} sm={24} key={key}>
-                  <Card.Grid
+                  <Card.Grid style={{ width: "100%", height: "100%" }}>
-                    key={key}
-                    style={{ width: "100%", height: "100%" }}
-                  >
                     <Typography.Title level={4}>
                       {t(`printcenter.labels.groups.${key}`)}
                     </Typography.Title>

client/src/components/production-list-columns/production-list-columns.date.component.jsx

@@ -13,8 +13,8 @@ export default function ProductionListDate({ record, field }) {
   const [updateAlert] = useMutation(UPDATE_JOB);
 
   const handleChange = (date) => {
-    logImEXEvent("production_toggle_alert");
+    logImEXEvent("product_toggle_date", { field });
-    console.log("change");
+
     //e.stopPropagation();
     updateAlert({
       variables: {
@@ -27,7 +27,6 @@ export default function ProductionListDate({ record, field }) {
       if (record.refetch) record.refetch();
     });
   };
-  console.log("record[field]", record[field]);
 
   return (
     <div>

client/src/components/production-list-columns/production-list-columns.status.component.jsx

@@ -38,7 +38,7 @@ export function ProductionListColumnStatus({ record, bodyshop }) {
           style={{ maxHeight: "200px", overflowY: "auto" }}
           onClick={handleSetStatus}
         >
-          {bodyshop.md_ro_statuses.statuses.map((item) => (
+          {bodyshop.md_ro_statuses.production_statuses.map((item) => (
             <Menu.Item key={item}>{item}</Menu.Item>
           ))}
         </Menu>

client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx

@@ -1,4 +1,4 @@
-import { Form, Select } from "antd";
+import { Divider, Form, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,6 +7,7 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import JobsDetailLaborContainer from "../jobs-detail-labor/jobs-detail-labor.container";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -18,39 +19,41 @@ export function TechClockInComponent({ form, bodyshop, technician }) {
   const emps = bodyshop.employees.filter((e) => e.id === technician.id)[0];
   return (
     <div>
-      <Form.Item
+      <LayoutFormRow grow noDivider>
-        name="jobid"
+        <Form.Item
-        label={t("jobs.fields.ro_number")}
+          name="jobid"
-        rules={[
+          label={t("jobs.fields.ro_number")}
-          {
+          rules={[
-            required: true,
+            {
-            message: t("general.validation.required"),
+              required: true,
-          },
+              message: t("general.validation.required"),
-        ]}
+            },
-      >
+          ]}
-        <JobSearchSelect />
+        >
-      </Form.Item>
+          <JobSearchSelect />
-
+        </Form.Item>
-      <Form.Item
-        name="cost_center"
-        label={t("timetickets.fields.cost_center")}
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Select>
-          {emps &&
-            emps.rates.map((item) => (
-              <Select.Option key={item.cost_center}>
-                {item.cost_center}
-              </Select.Option>
-            ))}
-        </Select>
-      </Form.Item>
 
+        <Form.Item
+          name="cost_center"
+          label={t("timetickets.fields.cost_center")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select>
+            {emps &&
+              emps.rates.map((item) => (
+                <Select.Option key={item.cost_center}>
+                  {item.cost_center}
+                </Select.Option>
+              ))}
+          </Select>
+        </Form.Item>
+      </LayoutFormRow>
+      <Divider />
       <Form.Item
         shouldUpdate={(prevValues, curValues) =>
           prevValues.jobid !== curValues.jobid

client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx

@@ -1,7 +1,7 @@
+import { useMutation } from "@apollo/client";
 import { Button, Card, Form, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
-import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -60,20 +60,23 @@ export function TechClockInContainer({ technician, bodyshop }) {
         message: t("timetickets.successes.clockedin"),
       });
     }
+    form.resetFields();
     setLoading(false);
   };
 
   return (
-    <div>
+    <Card
-      <Card title={t("timetickets.labels.clockintojob")}>
+      title={t("timetickets.labels.clockintojob")}
-        <Form form={form} layout="vertical" onFinish={handleFinish}>
+      extra={
-          <Button type="primary" htmlType="submit" loading={loading}>
+        <Button type="primary" onClick={() => form.submit()} loading={loading}>
-            {t("timetickets.actions.clockin")}
+          {t("timetickets.actions.clockin")}
-          </Button>
+        </Button>
-          <TechClockInComponent form={form} />
+      }
-        </Form>
+    >
-      </Card>
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
-    </div>
+        <TechClockInComponent form={form} />
+      </Form>
+    </Card>
   );
 }
 export default connect(mapStateToProps, null)(TechClockInContainer);

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -1,6 +1,6 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Drawer, Grid, PageHeader, Tabs, Tag } from "antd";
+import { Button, Divider, Drawer, Grid, PageHeader, Tabs, Tag } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -10,6 +10,7 @@ import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import AlertComponent from "../alert/alert.component";
 import JobLinesContainer from "../job-detail-lines/job-lines.container";
+import JobsDetailHeader from "../jobs-detail-header/jobs-detail-header.component";
 import JobsDocumentsGalleryContainer from "../jobs-documents-gallery/jobs-documents-gallery.container";
 import JobNotesContainer from "../jobs-notes/jobs-notes.container";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -78,20 +79,8 @@ export function JobDetailCards({ setPrintCenterContext }) {
       {error ? <AlertComponent message={error.message} type="error" /> : null}
       {data ? (
         <PageHeader
-          ghost={true}
+          onBack={() => window.history.back()}
-          tags={[
+          title={data.jobs_by_pk.ro_number || t("general.labels.na")}
-            <OwnerTagPopoverComponent key="owner" job={data.jobs_by_pk} />,
-            <VehicleTagPopoverComponent key="vehicle" job={data.jobs_by_pk} />,
-            <Tag
-              color="#f50"
-              key="production"
-              style={{ display: data.jobs_by_pk.inproduction ? "" : "none" }}
-            >
-              {t("jobs.labels.inproduction")}
-            </Tag>,
-          ]}
-          title={t("jobs.fields.ro_number") || t("general.labels.na")}
-          subTitle={data.jobs_by_pk.status}
           extra={
             <Button
               onClick={() => {
@@ -110,6 +99,8 @@ export function JobDetailCards({ setPrintCenterContext }) {
             </Button>
           }
         >
+          <JobsDetailHeader job={data.jobs_by_pk} disabled />
+          <Divider type="horizontal" />
           <Tabs size="large">
             <Tabs.TabPane key="lines" tab={t("jobs.labels.lines")}>
               <JobLinesContainer

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

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -177,47 +177,47 @@ export function TechLookupJobsList({ bodyshop }) {
   ];
 
   return (
-    <Table
+    <Card
-      loading={loading}
+      extra={
-      pagination={false}
+        <Space wrap>
-      columns={columns}
+          <Button onClick={() => refetch()}>
-      rowKey="id"
+            <SyncOutlined />
-      dataSource={jobs}
+          </Button>
-      scroll={{ x: true }}
+          <Input.Search
-      title={() => {
+            placeholder={t("general.labels.search")}
-        return (
+            onChange={(e) => {
-          <div className="imex-table-header">
+              setSearchText(e.target.value);
-            <Button onClick={() => refetch()}>
+            }}
-              <SyncOutlined />
+            value={searchText}
-            </Button>
+            enterButton
-            <Input.Search
+          />
-              className="imex-table-header__search"
+        </Space>
-              placeholder={t("general.labels.search")}
+      }
-              onChange={(e) => {
+    >
-                setSearchText(e.target.value);
+      <Table
-              }}
+        loading={loading}
-              value={searchText}
+        pagination={false}
-              enterButton
+        columns={columns}
-            />
+        rowKey="id"
-          </div>
+        dataSource={jobs}
-        );
+        scroll={{ x: true }}
-      }}
+        rowSelection={{
-      rowSelection={{
+          onSelect: (record) => {
-        onSelect: (record) => {
-          handleOnRowClick(record);
-        },
-        selectedRowKeys: [selected],
-        type: "radio",
-      }}
-      onChange={handleTableChange}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
             handleOnRowClick(record);
           },
-        };
+          selectedRowKeys: [selected],
-      }}
+          type: "radio",
-    />
+        }}
+        onChange={handleTableChange}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            },
+          };
+        }}
+      />
+    </Card>
   );
 }
 

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -54,11 +54,8 @@ export default function TimeTicketList({
       key: "employee",
       sorter: (a, b) => alphaSort(a.employee.last_name, b.employee.last_name),
       sortOrder: state.sortedInfo.columnKey === "vin" && state.sortedInfo.order,
-      render: (text, record) => (
+      render: (text, record) =>
-        <Link
+        `${record.employee.first_name} ${record.employee.last_name}`,
-          to={`/manage/employees/${record.employee.id}`}
-        >{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
-      ),
     },
     {
       title: t("timetickets.fields.cost_center"),

client/src/graphql/bodyshop.queries.js

@@ -84,6 +84,7 @@ export const QUERY_BODYSHOP = gql`
       jobsizelimit
       employees {
         id
+        active
         first_name
         last_name
         employee_number
@@ -165,6 +166,7 @@ export const UPDATE_SHOP = gql`
         employees {
           id
           first_name
+          active
           last_name
           employee_number
           rates

client/src/pages/tech-job-clock/tech-job-clock.component.jsx

@@ -1,3 +1,4 @@
+import { Divider } from "antd";
 import React from "react";
 import TechClockInFormContainer from "../../components/tech-job-clock-in-form/tech-job-clock-in-form.container";
 import TechClockedInList from "../../components/tech-job-clocked-in-list/tech-job-clocked-in-list.component";
@@ -6,6 +7,7 @@ export default function TechClockComponent() {
   return (
     <div>
       <TechClockInFormContainer />
+      <Divider />
       <TechClockedInList />
     </div>
   );