Tech Console improvements.

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
-        name="jobid"
-        label={t("jobs.fields.ro_number")}
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <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>
+      <LayoutFormRow grow noDivider>
+        <Form.Item
+          name="jobid"
+          label={t("jobs.fields.ro_number")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <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>
+      </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 title={t("timetickets.labels.clockintojob")}>
-        <Form form={form} layout="vertical" onFinish={handleFinish}>
-          <Button type="primary" htmlType="submit" loading={loading}>
-            {t("timetickets.actions.clockin")}
-          </Button>
-          <TechClockInComponent form={form} />
-        </Form>
-      </Card>
-    </div>
+    <Card
+      title={t("timetickets.labels.clockintojob")}
+      extra={
+        <Button type="primary" onClick={() => form.submit()} loading={loading}>
+          {t("timetickets.actions.clockin")}
+        </Button>
+      }
+    >
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        <TechClockInComponent form={form} />
+      </Form>
+    </Card>
   );
 }
 export default connect(mapStateToProps, null)(TechClockInContainer);