Added shift clock framework + login on tech console BOD-97 BOD-188

2020-07-16 10:17:23 -07:00
parent bf74d9a042
commit 6a8b59c7e6
67 changed files with 1791 additions and 217 deletions
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -155,6 +155,9 @@ export function ShopEmployeesFormComponent({
        ]}>
        <InputNumber />
      </Form.Item>
+      <Form.Item label={t("employees.fields.user_email")} name='user_email'>
+        <Input />
+      </Form.Item>
    </Form>
  );
 }
--- a/client/src/components/shop-employees/shop-employees.container.jsx
+++ b/client/src/components/shop-employees/shop-employees.container.jsx
@@ -8,14 +8,14 @@ import {
  DELETE_EMPLOYEE,
  INSERT_EMPLOYEES,
  QUERY_EMPLOYEES,
-  UPDATE_EMPLOYEE
+  UPDATE_EMPLOYEE,
 } from "../../graphql/employees.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import ShopEmployeeComponent from "./shop-employees.component";

 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
 });

 function ShopEmployeesContainer({ bodyshop }) {
@@ -23,69 +23,75 @@ function ShopEmployeesContainer({ bodyshop }) {
  const { t } = useTranslation();
  const employeeState = useState(null);
  const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, {
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
  });

  const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
  const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
  const [deleteEmployee] = useMutation(DELETE_EMPLOYEE);
-  const handleDelete = id => {
+  const handleDelete = (id) => {
    deleteEmployee({ variables: { id: id } })
-      .then(r => {
+      .then((r) => {
        notification["success"]({
-          message: t("employees.successes.delete")
+          message: t("employees.successes.delete"),
        });
        //TODO Better way to reset the field decorators?
        employeeState[1](null);
-        refetch().then(r => form.resetFields());
+        refetch().then((r) => form.resetFields());
      })
-      .catch(error => {
+      .catch((error) => {
        notification["error"]({
-          message: t("employees.errors.delete")
+          message: t("employees.errors.delete", {
+            message: JSON.stringify(error),
+          }),
        });
      });
  };

-  const handleFinish = values => {
+  const handleFinish = (values) => {
    console.log("values", values);
    if (employeeState[0].id) {
      //Update a record.
      updateEmployee({
-        variables: { id: employeeState[0].id, employee: values }
+        variables: { id: employeeState[0].id, employee: values },
      })
-        .then(r => {
+        .then((r) => {
          notification["success"]({
-            message: t("employees.successes.save")
+            message: t("employees.successes.save"),
          });
          //TODO Better way to reset the field decorators?
          employeeState[1](null);
-          refetch().then(r => form.resetFields());
+          refetch().then((r) => form.resetFields());
        })
-        .catch(error => {
+        .catch((error) => {
          notification["error"]({
-            message: t("employees.errors.save")
+            message: t("employees.errors.save", {
+              message: JSON.stringify(error),
+            }),
          });
        });
    } else {
      //New record, insert it.
      insertEmployees({
-        variables: { employees: [{ ...values, shopid: bodyshop.id }] }
-      }).then(r => {
+        variables: { employees: [{ ...values, shopid: bodyshop.id }] },
+      }).then((r) => {
        notification["success"]({
-          message: t("employees.successes.save")
+          message: t("employees.successes.save"),
        });
        //TODO Better way to reset the field decorators?
        employeeState[1](null);
-        refetch().catch(error => {
+        refetch().catch((error) => {
          notification["error"]({
-            message: t("employees.errors.save")
+            message: t("employees.errors.save", {
+              message: JSON.stringify(error),
+            }),
          });
        });
      });
    }
  };

-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;

  return (
    <ShopEmployeeComponent
--- a/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx
+++ b/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx
@@ -1,5 +1,6 @@
-import { Button, Form, notification, Card } from "antd";
-import React from "react";
+import { Button, Card, Form, notification } from "antd";
+import axios from "axios";
+import React, { useState } from "react";
 import { useMutation } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -16,29 +17,35 @@ const mapStateToProps = createStructuredSelector({

 export function TechClockInContainer({ technician, bodyshop }) {
  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
    refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
  });
  const { t } = useTranslation();

  const handleFinish = async (values) => {
+    setLoading(true);
+    const theTime = (await axios.post("/utils/time")).data;
    const result = await insertTimeTicket({
      variables: {
-        timeTicketInput: {
-          employeeid: technician.id,
-          date: new Date(),
-          clockon: new Date(),
-          jobid: values.jobid,
-          cost_center: technician.cost_center,
-          ciecacode: Object.keys(
-            bodyshop.md_responsibility_centers.defaults.costs
-          ).find((key) => {
-            return (
-              bodyshop.md_responsibility_centers.defaults.costs[key] ===
-              values.cost_center
-            );
-          }),
-        },
+        timeTicketInput: [
+          {
+            bodyshopid: bodyshop.id,
+            employeeid: technician.id,
+            date: theTime,
+            clockon: theTime,
+            jobid: values.jobid,
+            cost_center: technician.cost_center,
+            ciecacode: Object.keys(
+              bodyshop.md_responsibility_centers.defaults.costs
+            ).find((key) => {
+              return (
+                bodyshop.md_responsibility_centers.defaults.costs[key] ===
+                values.cost_center
+              );
+            }),
+          },
+        ],
      },
    });

@@ -53,13 +60,14 @@ export function TechClockInContainer({ technician, bodyshop }) {
        message: t("timetickets.successes.clockedin"),
      });
    }
+    setLoading(false);
  };

  return (
    <div>
      <Card title={t("timetickets.labels.clockintojob")}>
-        <Form form={form} layout="vertical" onFinish={handleFinish}>
-          <Button type="primary" htmlType="submit">
+        <Form form={form} layout='vertical' onFinish={handleFinish}>
+          <Button type='primary' htmlType='submit' loading={loading}>
            {t("timetickets.actions.clockin")}
          </Button>
          <TechClockInComponent form={form} />
--- a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
+++ b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
@@ -11,7 +11,7 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
-
+import axios from "axios";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -27,6 +27,7 @@ export function TechClockOffButton({
  technician,
  timeTicketId,
  completedCallback,
+  isShiftTicket,
  otherBtnProps,
 }) {
  const [loading, setLoading] = useState(false);
@@ -40,7 +41,10 @@ export function TechClockOffButton({
    const result = await updateTimeticket({
      variables: {
        timeticketId: timeTicketId,
-        timeticket: { clockoff: new Date(), ...values },
+        timeticket: {
+          clockoff: (await axios.post("/utils/time")).data,
+          ...values,
+        },
      },
    });

@@ -64,65 +68,76 @@ export function TechClockOffButton({
      <div>
        <Form
          form={form}
-          layout="vertical"
+          layout='vertical'
          onFinish={handleFinish}
          initialValues={{
-            cost_center: technician ? technician.cost_center : null,
-          }}
-        >
+            cost_center: isShiftTicket
+              ? "timetickets.labels.shift"
+              : technician
+              ? technician.cost_center
+              : null,
+          }}>
+          {!isShiftTicket ? (
+            <div>
+              <Form.Item
+                label={t("timetickets.fields.actualhrs")}
+                name='actualhrs'
+                rules={[
+                  {
+                    required: true,
+                    message: t("general.validation.required"),
+                  },
+                ]}>
+                <InputNumber precision={1} />
+              </Form.Item>
+              <Form.Item
+                label={t("timetickets.fields.productivehrs")}
+                name='productivehrs'
+                rules={[
+                  {
+                    required: true,
+                    message: t("general.validation.required"),
+                  },
+                ]}>
+                <InputNumber precision={1} />
+              </Form.Item>
+            </div>
+          ) : null}
+
          <Form.Item
-            label={t("timetickets.fields.actualhrs")}
-            name="actualhrs"
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <InputNumber precision={1} />
-          </Form.Item>
-          <Form.Item
-            label={t("timetickets.fields.productivehrs")}
-            name="productivehrs"
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <InputNumber precision={1} />
-          </Form.Item>
-          <Form.Item
-            name="cost_center"
+            name='cost_center'
            label={t("timetickets.fields.cost_center")}
            rules={[
              {
                required: true,
                message: t("general.validation.required"),
              },
-            ]}
-          >
-            <Select>
-              {bodyshop.md_responsibility_centers.costs.map((i, idx) => (
-                <Select.Option key={idx} value={i.name}>
-                  {i.name}
+            ]}>
+            <Select disabled={isShiftTicket}>
+              {isShiftTicket ? (
+                <Select.Option value='timetickets.labels.shift'>
+                  {t("timetickets.labels.shift")}
                </Select.Option>
-              ))}
+              ) : (
+                bodyshop.md_responsibility_centers.costs.map((i, idx) => (
+                  <Select.Option key={idx} value={i.name}>
+                    {i.name}
+                  </Select.Option>
+                ))
+              )}
            </Select>
          </Form.Item>
-          <Button type="primary" htmlType="submit">
+          <Button type='primary' htmlType='submit' loading={loading}>
            {t("general.actions.save")}
          </Button>
-          <TechJobClockoutDelete timeTicketId={timeTicketId} />
+          <TechJobClockoutDelete completedCallback={completedCallback} timeTicketId={timeTicketId} />
        </Form>
      </div>
    </Card>
  );

  return (
-    <Popover content={overlay} trigger="click">
+    <Popover content={overlay} trigger='click'>
      <Button loading={loading} {...otherBtnProps}>
        {t("timetickets.actions.clockout")}
      </Button>
--- a/client/src/components/tech-job-clock-out-delete/tech-job-clock-out-delete.component.jsx
+++ b/client/src/components/tech-job-clock-out-delete/tech-job-clock-out-delete.component.jsx
@@ -5,7 +5,10 @@ import { DELETE_TIME_TICKET } from "../../graphql/timetickets.queries";
 import { useTranslation } from "react-i18next";
 import { useMutation } from "@apollo/react-hooks";

-export default function TechJobClockoutDelete({ timeTicketId }) {
+export default function TechJobClockoutDelete({
+  timeTicketId,
+  completedCallback,
+}) {
  const [deleteTimeTicket] = useMutation(DELETE_TIME_TICKET);
  const { t } = useTranslation();
  const handleDelete = async () => {
@@ -25,6 +28,7 @@ export default function TechJobClockoutDelete({ timeTicketId }) {
        message: t("timetickets.successes.deleted"),
      });
    }
+    if (completedCallback) completedCallback();
  };

  return (
@@ -32,8 +36,7 @@ export default function TechJobClockoutDelete({ timeTicketId }) {
      title={t("timetickets.labels.deleteconfirm")}
      okButtonProps={{ type: "danger" }}
      okText={t("general.actions.delete")}
-      onConfirm={handleDelete}
-    >
+      onConfirm={handleDelete}>
      <DeleteFilled style={{ margin: "1rem", color: "red" }} />
    </Popconfirm>
  );
--- a/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx
+++ b/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx
@@ -2,17 +2,17 @@ import { Card, List, Typography } from "antd";
 import React from "react";
 import { useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
 import DataLabel from "../data-label/data-label.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
-import { selectTechnician } from "../../redux/tech/tech.selectors";

-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
 });
--- a/client/src/components/tech-sider/tech-sider.component.jsx
+++ b/client/src/components/tech-sider/tech-sider.component.jsx
@@ -2,6 +2,7 @@ import Icon, { SearchOutlined } from "@ant-design/icons";
 import { Layout, Menu } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { FaBusinessTime } from "react-icons/fa";
 import { FiLogIn, FiLogOut } from "react-icons/fi";
 import { MdTimer } from "react-icons/md";
 import { connect } from "react-redux";
@@ -9,6 +10,7 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { techLogout } from "../../redux/tech/tech.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+
 const { Sider } = Layout;

 const mapStateToProps = createStructuredSelector({
@@ -27,36 +29,39 @@ export function TechSider({ technician, techLogout }) {

  return (
    <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
-      <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
+      <Menu theme='dark' defaultSelectedKeys={["1"]} mode='inline'>
        <Menu.Item
-          key="1"
+          key='1'
          disabled={!!technician}
-          icon={<Icon component={FiLogIn} />}
-        >
+          icon={<Icon component={FiLogIn} />}>
          <Link to={`/tech/login`}>{t("menus.tech.login")}</Link>
        </Menu.Item>
-        <Menu.Item key="2" disabled={!!!technician} icon={<SearchOutlined />}>
+        <Menu.Item key='2' disabled={!!!technician} icon={<SearchOutlined />}>
          <Link to={`/tech/joblookup`}>{t("menus.tech.joblookup")}</Link>
        </Menu.Item>
        <Menu.Item
-          key="3"
+          key='3'
          disabled={!!!technician}
-          icon={<Icon component={MdTimer} />}
-        >
-          <Link to={`/tech/jobclockin`}>{t("menus.tech.jobclockin")}</Link>
+          icon={<Icon component={FaBusinessTime} />}>
+          <Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
        </Menu.Item>
-        <Menu.Item key="5" disabled={!!!technician} icon={<SearchOutlined />}>
+        <Menu.Item
+          key='4'
+          disabled={!!!technician}
+          icon={<Icon component={MdTimer} />}>
+          <Link to={`/tech/shiftclock`}>{t("menus.tech.shiftclockin")}</Link>
+        </Menu.Item>
+        <Menu.Item key='5' disabled={!!!technician} icon={<SearchOutlined />}>
          <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
        </Menu.Item>
-        <Menu.Item key="6" disabled={!!!technician} icon={<SearchOutlined />}>
+        <Menu.Item key='6' disabled={!!!technician} icon={<SearchOutlined />}>
          <Link to={`/tech/board`}> {t("menus.tech.productionboard")}</Link>
        </Menu.Item>
        <Menu.Item
-          key="7"
+          key='7'
          disabled={!!!technician}
          onClick={() => techLogout()}
-          icon={<Icon component={FiLogOut} />}
-        >
+          icon={<Icon component={FiLogOut} />}>
          {t("menus.tech.logout")}
        </Menu.Item>
      </Menu>
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -19,15 +19,14 @@ export default function TimeTicketModalComponent({
    <div>
      <div style={{ display: "flex" }}>
        <Form.Item
-          name="jobid"
+          name='jobid'
          label={t("timetickets.fields.ro_number")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
-          ]}
-        >
+          ]}>
          <JobSearchSelect
            options={roAutoCompleteOptions}
            onBlur={() => {
@@ -40,15 +39,14 @@ export default function TimeTicketModalComponent({
          />
        </Form.Item>
        <Form.Item
-          name="employeeid"
+          name='employeeid'
          label={t("timetickets.fields.employee")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
-          ]}
-        >
+          ]}>
          <EmployeeSearchSelect options={employeeAutoCompleteOptions} />
        </Form.Item>
      </div>
@@ -56,71 +54,65 @@ export default function TimeTicketModalComponent({
      <div style={{ display: "flex" }}>
        <Form.Item
          label={t("timetickets.fields.date")}
-          name="date"
+          name='date'
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
-          ]}
-        >
+          ]}>
          <DatePicker />
        </Form.Item>
        <Form.Item
          label={t("timetickets.fields.productivehrs")}
-          name="productivehrs"
+          name='productivehrs'
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
-          ]}
-        >
-          <InputNumber />
+          ]}>
+          <InputNumber min={0} precision={1} />
        </Form.Item>
        <Form.Item
          label={t("timetickets.fields.actualhrs")}
-          name="actualhrs"
+          name='actualhrs'
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
-          ]}
-        >
-          <InputNumber />
+          ]}>
+          <InputNumber min={0} precision={1} />
        </Form.Item>
        <Form.Item
-          name="cost_center"
+          name='cost_center'
          label={t("timetickets.fields.cost_center")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
-          ]}
-        >
+          ]}>
          <Select
            style={{ width: "150px" }}
            onChange={() => {
              console.log("Changed.");
-            }}
-          >
+            }}>
            {responsibilityCenters.costs.map((item) => (
              <Select.Option key={item.name}>{item.name}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
-          name="ciecacode"
+          name='ciecacode'
          label={t("timetickets.fields.ciecacode")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
-          ]}
-        >
+          ]}>
          <Input disabled />
        </Form.Item>
      </div>
--- a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
@@ -59,7 +59,7 @@ export function TimeTicketModalContainer({
    } else {
      insertTicket({
        variables: {
-          timeTicketInput: [values],
+          timeTicketInput: [{ ...values, bodyshop: bodyshop.id }],
        },
      })
        .then(handleMutationSuccess)
@@ -108,22 +108,21 @@ export function TimeTicketModalContainer({
      );
      form.setFieldsValue({
        cost_center: emps.length > 0 ? emps[0].cost_center : "",
-        ciecacode: Object.keys(
-          bodyshop.md_responsibility_centers.defaults
-        ).find(
-          (key) =>
-            bodyshop.md_responsibility_centers.defaults[key] ===
-            emps[0].cost_center
-        ),
+        ciecacode:
+          Object.keys(bodyshop.md_responsibility_centers.defaults.costs).find(
+            (key) =>
+              bodyshop.md_responsibility_centers.defaults.costs[key] ===
+              emps[0].cost_center
+          ) || "LAB",
      });
    }
    if (!!changedFields.cost_center && !!EmployeeAutoCompleteData) {
      form.setFieldsValue({
        ciecacode: Object.keys(
-          bodyshop.md_responsibility_centers.defaults
+          bodyshop.md_responsibility_centers.defaults.costs
        ).find(
          (key) =>
-            bodyshop.md_responsibility_centers.defaults[key] ===
+            bodyshop.md_responsibility_centers.defaults.costs[key] ===
            changedFields.cost_center
        ),
      });
@@ -152,18 +151,16 @@ export function TimeTicketModalContainer({
          </Button>
          {timeTicketModal.context && timeTicketModal.context.id ? null : (
            <Button
-              type="primary"
+              type='primary'
              onClick={() => {
                setEnterAgain(true);
-              }}
-            >
+              }}>
              {t("general.actions.saveandnew")}
            </Button>
          )}
        </span>
      }
-      destroyOnClose
-    >
+      destroyOnClose>
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
@@ -178,8 +175,7 @@ export function TimeTicketModalContainer({
              }
            : { jobid: timeTicketModal.context.jobId || null }
        }
-        onValuesChange={handleFieldsChange}
-      >
+        onValuesChange={handleFieldsChange}>
        <TimeTicketModalComponent
          form={form}
          roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
--- a/client/src/components/time-ticket-shift-active/time-ticket-shift-active.component.jsx
+++ b/client/src/components/time-ticket-shift-active/time-ticket-shift-active.component.jsx
@@ -0,0 +1,50 @@
+import { Card, List, Typography } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import DataLabel from "../data-label/data-label.component";
+import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
+
+export default function TimeTicketShiftActive({ timetickets, refetch }) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      {timetickets.length > 0 ? (
+        <div>
+          <Typography.Title level={2}>
+            {t("timetickets.labels.shiftalreadyclockedon")}
+          </Typography.Title>
+          <List
+            grid={{
+              gutter: 32,
+              xs: 1,
+              sm: 2,
+              md: 3,
+              lg: 4,
+              xl: 5,
+              xxl: 6,
+            }}
+            dataSource={timetickets || []}
+            renderItem={(ticket) => (
+              <List.Item>
+                <Card
+                  title={t(ticket.memo)}
+                  actions={[
+                    <TechClockOffButton
+                      timeTicketId={ticket.id}
+                      completedCallback={refetch}
+                      isShiftTicket
+                    />,
+                  ]}>
+                  <DataLabel label={t("timetickets.fields.clockon")}>
+                    <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
+                  </DataLabel>
+                </Card>
+              </List.Item>
+            )}></List>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx
+++ b/client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx
@@ -0,0 +1,53 @@
+import { Form, InputNumber, Select } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function TimeTicketShiftFormComponent({ bodyshop, form }) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Form.Item
+        name='memo'
+        label={t("timetickets.fields.memo")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}>
+        <Select>
+          <Select.Option value='timetickets.labels.amshift'>
+            {t("timetickets.labels.amshift")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.ambreak'>
+            {t("timetickets.labels.ambreak")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.lunch'>
+            {t("timetickets.labels.lunch")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.pmshift'>
+            {t("timetickets.labels.pmshift")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.pmbreak'>
+            {t("timetickets.labels.pmbreak")}
+          </Select.Option>
+        </Select>
+      </Form.Item>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketShiftFormComponent);
--- a/client/src/components/time-ticket-shift-form/time-ticket-shift-form.container.jsx
+++ b/client/src/components/time-ticket-shift-form/time-ticket-shift-form.container.jsx
@@ -0,0 +1,90 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, Form, notification } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import TimeTicektShiftComponent from "./time-ticket-shift-form.component";
+import axios from "axios";
+import moment from "moment";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function TimeTicektShiftContainer({
+  bodyshop,
+  technician,
+  isTechConsole,
+}) {
+  const [form] = Form.useForm();
+  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET);
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    console.log(values);
+    const theTime = moment((await axios.post("/utils/time")).data);
+
+    const result = await insertTimeTicket({
+      variables: {
+        timeTicketInput: [
+          {
+            bodyshopid: bodyshop.id,
+            employeeid: isTechConsole
+              ? technician.id
+              : bodyshop.associations[0].user.employee.id,
+            cost_center: "timetickets.labels.shift",
+            clockon: theTime,
+            date: theTime,
+            memo: values.memo,
+          },
+        ],
+      },
+      awaitRefetchQueries: true,
+      refetchQueries: ["QUERY_ACTIVE_SHIFT_TIME_TICKETS"],
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("timetickets.errors.clockingin", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    } else {
+      notification["success"]({
+        message: t("timetickets.successes.clockedin"),
+      });
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div>
+      The form TimeTicektShiftContainer
+      <Form
+        form={form}
+        layout='vertical'
+        autoComplete='no'
+        onFinish={handleFinish}
+        initialValues={{ cost_center: t("timetickets.labels.shift") }}>
+        <TimeTicektShiftComponent form={form} />
+        <Button htmlType='submit' loading={loading}>
+          {t("timetickets.actions.clockin")}
+        </Button>
+      </Form>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicektShiftContainer);
--- a/client/src/components/time-ticket-shift/time-ticket-shift.container.jsx
+++ b/client/src/components/time-ticket-shift/time-ticket-shift.container.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_ACTIVE_SHIFT_TIME_TICKETS } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import TimeTicketShiftActive from "../time-ticket-shift-active/time-ticket-shift-active.component";
+import TimeTicketShiftFormContainer from "../time-ticket-shift-form/time-ticket-shift-form.container";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function TimeTicketShiftContainer({
+  bodyshop,
+  technician,
+  isTechConsole,
+}) {
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ACTIVE_SHIFT_TIME_TICKETS,
+    {
+      variables: {
+        employeeId: isTechConsole
+          ? technician.id
+          : bodyshop.associations[0].user.employee.id,
+      },
+    }
+  );
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return (
+    <div>
+      {data.timetickets.length > 0 ? (
+        <TimeTicketShiftActive
+          timetickets={data ? data.timetickets : []}
+          refetch={refetch}
+        />
+      ) : (
+        <TimeTicketShiftFormContainer isTechConsole={isTechConsole} />
+      )}
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketShiftContainer);