From 8e12320c19c64a55d7681b816ef7d4cbf97ecd00 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 15 Apr 2020 15:39:05 -0700
Subject: [PATCH] BOD-23 Added labor pages tab + finalized time ticket tab +
 created allocation calculations

---
 bodyshop_translations.babel                   | 217 +++++++++++++++++-
 .../employee-search-select.component.jsx      |  11 +-
 .../job-detail-cards.component.jsx            |   2 +-
 .../job-detail-cards.vehicle.component.jsx    |   6 +-
 .../jobs-detail-labor.component.jsx           |  30 +++
 .../jobs-detail-labor.container.jsx           |  49 ++--
 .../labor-allocations-table.component.jsx     |  54 +++++
 .../labor-allocations-table.utility.js        |  29 +++
 ...p-info.responsibilitycenters.component.jsx |   2 +-
 .../time-ticket-enter-button.component.jsx    |  30 +++
 .../time-ticket-list.component.jsx            |  94 ++++++++
 .../time-ticket-modal.component.jsx           |  91 +++++---
 .../time-ticket-modal.container.jsx           | 155 +++++++++----
 .../components/header/header.component.jsx    |   4 +-
 .../appointment-confirmation.template.jsx     |   2 +-
 client/src/graphql/jobs-lines.queries.js      |  22 +-
 client/src/graphql/timetickets.queries.js     |  16 ++
 client/src/translations/en_us/common.json     |  14 +-
 client/src/translations/es/common.json        |  14 +-
 client/src/translations/fr/common.json        |  14 +-
 20 files changed, 724 insertions(+), 132 deletions(-)
 create mode 100644 client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx
 create mode 100644 client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
 create mode 100644 client/src/components/labor-allocations-table/labor-allocations-table.utility.js
 create mode 100644 client/src/components/time-ticket-enter-button/time-ticket-enter-button.component.jsx
 create mode 100644 client/src/components/time-ticket-list/time-ticket-list.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index d8304ef62..b23fcd446 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.6.1">
+<babeledit_project be_version="2.6.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -8567,6 +8567,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>hrs_claimed</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>hrs_total</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>job</name>
                                         <definition_loaded>false</definition_loaded>
@@ -8588,6 +8630,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>laborallocations</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>lines</name>
                                         <definition_loaded>false</definition_loaded>
@@ -10866,9 +10929,119 @@
                     <folder_node>
                         <name>timetickets</name>
                         <children>
+                            <folder_node>
+                                <name>actions</name>
+                                <children>
+                                    <concept_node>
+                                        <name>enter</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>fields</name>
                                 <children>
+                                    <concept_node>
+                                        <name>actualhrs</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>ciecacode</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>cost_center</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>date</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>employee</name>
                                         <definition_loaded>false</definition_loaded>
@@ -10890,6 +11063,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>productivehrs</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>ro_number</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>
diff --git a/client/src/components/employee-search-select/employee-search-select.component.jsx b/client/src/components/employee-search-select/employee-search-select.component.jsx
index f73429be2..58fdbdd22 100644
--- a/client/src/components/employee-search-select/employee-search-select.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select.component.jsx
@@ -5,7 +5,13 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 const { Option } = Select;
 //To be used as a form element only.
 
-const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
+const EmployeeSearchSelect = ({
+  value,
+  onChange,
+  options,
+  onSelect,
+  onBlur,
+}) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
   useEffect(() => {
@@ -24,6 +30,7 @@ const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
       onChange={setOption}
       optionFilterProp="search"
       onSelect={onSelect}
+      onBlur={onBlur}
     >
       {options
         ? options.map((o) => (
@@ -39,7 +46,7 @@ const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
                 <Tag color="red">
                   <CurrencyFormatter>{o.base_rate}</CurrencyFormatter>
                 </Tag>
-                <Tag color="red">
+                <Tag color="green">
                   {o.flat_rate
                     ? t("timetickets.labels.flat_rate")
                     : t("timetickets.labels.straight_time")}
diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index 0b126c300..d6a9cef70 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -78,7 +78,7 @@ export function JobDetailCards({
                 ? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
                 : `${t("jobs.fields.est_number")} ${
                     data.jobs_by_pk.est_number
-                  }`}{" "}
+                  }`}
             </Link>
           )
         }
diff --git a/client/src/components/job-detail-cards/job-detail-cards.vehicle.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.vehicle.component.jsx
index f32c57ea7..3a3f2388e 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.vehicle.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.vehicle.component.jsx
@@ -13,9 +13,9 @@ export default function JobDetailCardsVehicleComponent({ loading, data }) {
     >
       {data ? (
         <span>
-          {data.vehicle?.v_model_yr || t("general.labels.na")}{" "}
-          {data.vehicle?.v_make_desc || t("general.labels.na")}{" "}
-          {data.vehicle?.v_model_desc || t("general.labels.na")}
+          {` ${data.vehicle?.v_model_yr || t("general.labels.na")} ${
+            data.vehicle?.v_make_desc || t("general.labels.na")
+          } ${data.vehicle?.v_model_desc || t("general.labels.na")}`}
         </span>
       ) : null}
     </CardTemplate>
diff --git a/client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx b/client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx
new file mode 100644
index 000000000..eb1a88945
--- /dev/null
+++ b/client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component";
+import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
+import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
+import { useTranslation } from "react-i18next";
+export default function JobsDetailLaborContainer({
+  jobId,
+  joblines,
+  timetickets,
+  refetch,
+  loading,
+}) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <TimeTicketEnterButton actions={{ refetch }} context={{ jobid: jobId }}>
+        {t("timetickets.actions.enter")}
+      </TimeTicketEnterButton>
+      <LaborAllocationsTableComponent
+        joblines={joblines}
+        timetickets={timetickets}
+      />
+      <TimeTicketList
+        loading={loading}
+        timetickets={timetickets}
+        refetch={refetch}
+      />
+    </div>
+  );
+}
diff --git a/client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx b/client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx
index 52f33e1c7..51f631a26 100644
--- a/client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx
+++ b/client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx
@@ -1,45 +1,24 @@
-import React from "react";
-import { Button } from "antd";
-
-import { connect } from "react-redux";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import AlertComponent from "../alert/alert.component";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { useQuery } from "@apollo/react-hooks";
-import { QUERY_TICKETS_BY_JOBID } from "../../graphql/timetickets.queries";
+import React from "react";
+import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
+import AlertComponent from "../alert/alert.component";
+import JobsDetailLaborComponent from "./jobs-detail-labor.component";
 
-const mapDispatchToProps = (dispatch) => ({
-  setTimeTicketContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
-});
-
-export function JobsDetailLaborContainer({ jobId, setTimeTicketContext }) {
-  const { loading, error, data, refetch } = useQuery(QUERY_TICKETS_BY_JOBID, {
-    variables: { jobid: jobId },
+export default function JobsDetailLaborContainer({ jobId }) {
+  const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
+    variables: { id: jobId },
     skip: !!!jobId,
   });
 
-  if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <div>
-      {jobId}
-      <Button
-        onClick={() => {
-          setTimeTicketContext({
-            actions: { refetch },
-            context: {
-              jobId,
-            },
-          });
-        }}
-      >
-        TEST - Open Time Ticket Modal
-      </Button>
-      {JSON.stringify(data)}
-    </div>
+    <JobsDetailLaborComponent
+      loading={loading}
+      jobId={jobId}
+      timetickets={data ? data.timetickets : []}
+      joblines={data ? data.joblines : []}
+      refetch={refetch}
+    />
   );
 }
-
-export default connect(null, mapDispatchToProps)(JobsDetailLaborContainer);
diff --git a/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
new file mode 100644
index 000000000..95946e919
--- /dev/null
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from "react";
+import { Typography, Row, Col } from "antd";
+import { useTranslation } from "react-i18next";
+import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function LaborAllocationsTable({ joblines, timetickets, bodyshop }) {
+  const { t } = useTranslation();
+
+  const [totals, setTotals] = useState([]);
+  useEffect(() => {
+    if (!!joblines && !!timetickets && !!bodyshop);
+    setTotals(
+      CalculateAllocationsTotals(
+        bodyshop.md_responsibility_centers,
+        joblines,
+        timetickets
+      )
+    );
+  }, [joblines, timetickets, bodyshop]);
+
+  return (
+    <div>
+      <Typography.Title level={3}>
+        {t("jobs.labels.laborallocations")}
+      </Typography.Title>
+
+      <Row>
+        <Col span={12}>
+          <strong>{t("timetickets.fields.cost_center")}</strong>
+        </Col>
+        <Col span={6}>
+          <strong>{t("jobs.labels.hrs_total")}</strong>
+        </Col>
+        <Col span={6}>
+          <strong>{t("jobs.labels.hrs_claimed")}</strong>
+        </Col>
+      </Row>
+      {totals.map((t, idx) => (
+        <Row key={idx}>
+          <Col span={12}>{t.cost_center}</Col>
+          <Col span={6}>{t.total}</Col>
+          <Col span={6}>{t.claimed}</Col>
+        </Row>
+      ))}
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(LaborAllocationsTable);
diff --git a/client/src/components/labor-allocations-table/labor-allocations-table.utility.js b/client/src/components/labor-allocations-table/labor-allocations-table.utility.js
new file mode 100644
index 000000000..5db9d60ae
--- /dev/null
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.utility.js
@@ -0,0 +1,29 @@
+export const CalculateAllocationsTotals = (
+  responsibilitycenters,
+  joblines,
+  timetickets
+) => {
+  const jobCodes = joblines
+    .map((item) => item.mod_lbr_ty)
+    .filter((value, index, self) => self.indexOf(value) === index && !!value);
+  const ticketCodes = timetickets
+    .map((item) => item.cieca_code)
+    .filter((value, index, self) => self.indexOf(value) === index && !!value);
+  const allCodes = [...jobCodes, ...ticketCodes];
+
+  const r = allCodes.reduce((acc, value) => {
+    acc.push({
+      opcode: value,
+      cost_center: responsibilitycenters.defaults[value],
+      total: joblines.reduce((acc2, val2) => {
+        return val2.mod_lbr_ty === value ? acc2 + val2.mod_lb_hrs : acc2;
+      }, 0),
+      claimed: timetickets.reduce((acc3, val3) => {
+        return val3.ciecacode === value ? acc3 + val3.productivehrs : acc3;
+      }, 0),
+    });
+    return acc;
+  }, []);
+
+  return r;
+};
diff --git a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
index fe7fa6b89..9dea09c1c 100644
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -262,7 +262,7 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
                   <Select.Option key={idx}>{item}</Select.Option>
                 ))}
               </Select>
-            </Form.Item>{" "}
+            </Form.Item>
             <Form.Item
               label={t("bodyshop.fields.responsibilitycenters.las")}
               rules={[
diff --git a/client/src/components/time-ticket-enter-button/time-ticket-enter-button.component.jsx b/client/src/components/time-ticket-enter-button/time-ticket-enter-button.component.jsx
new file mode 100644
index 000000000..5e589045a
--- /dev/null
+++ b/client/src/components/time-ticket-enter-button/time-ticket-enter-button.component.jsx
@@ -0,0 +1,30 @@
+import { Button } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+const mapDispatchToProps = (dispatch) => ({
+  setTimeTicketContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+});
+
+export function TimeTicketEnterButton({
+  actions,
+  context,
+  setTimeTicketContext,
+  children,
+}) {
+  return (
+    <Button
+      onClick={() => {
+        setTimeTicketContext({
+          actions,
+          context,
+        });
+      }}
+    >
+      {children}
+    </Button>
+  );
+}
+export default connect(null, mapDispatchToProps)(TimeTicketEnterButton);
diff --git a/client/src/components/time-ticket-list/time-ticket-list.component.jsx b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
new file mode 100644
index 000000000..2ca0ad1d5
--- /dev/null
+++ b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
@@ -0,0 +1,94 @@
+import { Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { alphaSort } from "../../utils/sorters";
+import { DateFormatter } from "../../utils/DateFormatter";
+import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
+
+export default function TimeTicketList({ loading, timetickets, refetch }) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("timetickets.fields.date"),
+      dataIndex: "date",
+      key: "date",
+      sorter: (a, b) => (a.date = b.date),
+      sortOrder:
+        state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
+      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
+    },
+    {
+      title: t("timetickets.fields.employee"),
+      dataIndex: "employee",
+      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) => (
+        <Link
+          to={`/manage/employees/${record.employee.id}`}
+        >{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
+      ),
+    },
+    {
+      title: t("timetickets.fields.cost_center"),
+      dataIndex: "cost_center",
+      key: "cost_center",
+      sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+    },
+    {
+      title: t("timetickets.fields.productivehrs"),
+      dataIndex: "productivehrs",
+      key: "productivehrs",
+      sorter: (a, b) => a.productivehrs - b.productivehrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "productivehrs" &&
+        state.sortedInfo.order,
+    },
+    {
+      title: t("timetickets.fields.actualhrs"),
+      dataIndex: "actualhrs",
+      key: "actualhrs",
+      sorter: (a, b) => a.actualhrs - b.actualhrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "actualhrs" && state.sortedInfo.order,
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <TimeTicketEnterButton
+          actions={{ refetch }}
+          context={{ id: record.id, timeticket: record }}
+        >
+          {t("general.actions.edit")}
+        </TimeTicketEnterButton>
+      ),
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Table
+      loading={loading}
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map((item) => ({ ...item }))}
+      rowKey="id"
+      dataSource={timetickets}
+      onChange={handleTableChange}
+    />
+  );
+}
diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
index 8847c6271..7cc40ae49 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -1,15 +1,16 @@
-import { DatePicker, Form, Input, Switch } from "antd";
+import { DatePicker, Form, InputNumber, Input, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import JobSearchSelect from "../job-search-select/job-search-select.component";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 
 export default function TimeTicketModalComponent({
   form,
   roAutoCompleteOptions,
   employeeAutoCompleteOptions,
-  loadJobLines,
+  loadLineTicketData,
+  lineTicketData,
   responsibilityCenters,
 }) {
   const { t } = useTranslation();
@@ -19,7 +20,7 @@ export default function TimeTicketModalComponent({
       <div style={{ display: "flex" }}>
         <Form.Item
           name="jobid"
-          label={t("invoices.fields.ro_number")}
+          label={t("timetickets.fields.ro_number")}
           rules={[
             {
               required: true,
@@ -31,7 +32,7 @@ export default function TimeTicketModalComponent({
             options={roAutoCompleteOptions}
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null) {
-                loadJobLines({
+                loadLineTicketData({
                   variables: { id: form.getFieldValue("jobid") },
                 });
               }
@@ -51,21 +52,10 @@ export default function TimeTicketModalComponent({
           <EmployeeSearchSelect options={employeeAutoCompleteOptions} />
         </Form.Item>
       </div>
+
       <div style={{ display: "flex" }}>
         <Form.Item
-          label={t("invoices.fields.invoice_number")}
-          name="invoice_number"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("invoices.fields.date")}
+          label={t("timetickets.fields.date")}
           name="date"
           rules={[
             {
@@ -77,15 +67,8 @@ export default function TimeTicketModalComponent({
           <DatePicker />
         </Form.Item>
         <Form.Item
-          label={t("invoices.fields.is_credit_memo")}
-          name="is_credit_memo"
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label={t("invoices.fields.total")}
-          name="total"
+          label={t("timetickets.fields.productivehrs")}
+          name="productivehrs"
           rules={[
             {
               required: true,
@@ -93,7 +76,52 @@ export default function TimeTicketModalComponent({
             },
           ]}
         >
-          <CurrencyInput />
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("timetickets.fields.actualhrs")}
+          name="actualhrs"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          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}>{item}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="ciecacode"
+          label={t("timetickets.fields.ciecacode")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input disabled />
         </Form.Item>
       </div>
 
@@ -104,6 +132,11 @@ export default function TimeTicketModalComponent({
       >
         Get Them Values
       </button>
+
+      <LaborAllocationsTable
+        joblines={lineTicketData.joblines}
+        timetickets={lineTicketData.timetickets}
+      />
     </div>
   );
 }
diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
index 099eedd2e..c433838e7 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
@@ -1,17 +1,22 @@
 import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
-import { Form, Modal, notification, Button } from "antd";
-import React, { useState, useEffect } from "react";
+import { Button, Form, Modal, notification } from "antd";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
+import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
+import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
 import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import {
+  INSERT_NEW_TIME_TICKET,
+  UPDATE_TIME_TICKET,
+} from "../../graphql/timetickets.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectTimeTicket } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import TimeTicketModalComponent from "./time-ticket-modal.component";
-import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
-import { GET_JOB_LINES_BY_PK_MINIMAL } from "../../graphql/jobs-lines.queries";
+import moment from "moment";
+
 const mapStateToProps = createStructuredSelector({
   timeTicketModal: selectTimeTicket,
   bodyshop: selectBodyshop,
@@ -20,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
 });
 
-function TimeTicketModalContainer({
+export function TimeTicketModalContainer({
   timeTicketModal,
   toggleModalVisible,
   bodyshop,
@@ -28,52 +33,60 @@ function TimeTicketModalContainer({
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const [enterAgain, setEnterAgain] = useState(false);
-  // const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
-
+  const [insertTicket] = useMutation(INSERT_NEW_TIME_TICKET);
+  const [updateTicket] = useMutation(UPDATE_TIME_TICKET);
   const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
     variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
     skip: !timeTicketModal.visible,
   });
-
   const { data: EmployeeAutoCompleteData } = useQuery(QUERY_EMPLOYEES, {
     skip: !timeTicketModal.visible,
   });
-
-  const [loadJobLines, { data: jobLinesData }] = useLazyQuery(
-    GET_JOB_LINES_BY_PK_MINIMAL
+  const [loadLineTicketData, { data: lineTicketData }] = useLazyQuery(
+    GET_LINE_TICKET_BY_PK
   );
 
   const handleFinish = (values) => {
-    // insertInvoice({
-    //   variables: {
-    //     invoice: [
-    //       Object.assign({}, values, {
-    //         invoicelines: { data: values.invoicelines },
-    //       }),
-    //     ],
-    //   },
-    // })
-    //   .then((r) => {
-    //     notification["success"]({
-    //       message: t("invoices.successes.created"),
-    //     });
-    //     if (timeTicketModal.actions.refetch)
-    //       timeTicketModal.actions.refetch();
-    //     if (enterAgain) {
-    //       form.resetFields();
-    //     } else {
-    //       toggleModalVisible();
-    //     }
-    //     setEnterAgain(false);
-    //   })
-    //   .catch((error) => {
-    //     setEnterAgain(false);
-    //     notification["error"]({
-    //       message: t("invoices.errors.creating", {
-    //         message: JSON.stringify(error),
-    //       }),
-    //     });
-    //   });
+    if (timeTicketModal.context.id) {
+      updateTicket({
+        variables: {
+          timeticketId: timeTicketModal.context.id,
+          timeticket: values,
+        },
+      })
+        .then(handleMutationSuccess)
+        .catch(handleMutationError);
+    } else {
+      insertTicket({
+        variables: {
+          timeTicketInput: [values],
+        },
+      })
+        .then(handleMutationSuccess)
+        .catch(handleMutationError);
+    }
+  };
+
+  const handleMutationSuccess = (response) => {
+    notification["success"]({
+      message: t("timetickets.successes.created"),
+    });
+    if (timeTicketModal.actions.refetch) timeTicketModal.actions.refetch();
+    if (enterAgain) {
+      form.resetFields();
+    } else {
+      toggleModalVisible();
+    }
+    setEnterAgain(false);
+  };
+
+  const handleMutationError = (error) => {
+    setEnterAgain(false);
+    notification["error"]({
+      message: t("timetickets.errors.creating", {
+        message: JSON.stringify(error),
+      }),
+    });
   };
 
   const handleCancel = () => {
@@ -84,6 +97,39 @@ function TimeTicketModalContainer({
     if (enterAgain) form.submit();
   }, [enterAgain, form]);
 
+  useEffect(() => {
+    if (timeTicketModal.visible) form.resetFields();
+  }, [timeTicketModal.visible, form]);
+
+  const handleFieldsChange = (changedFields, allFields) => {
+    if (!!changedFields.employeeid && !!EmployeeAutoCompleteData) {
+      const emps = EmployeeAutoCompleteData.employees.filter(
+        (e) => e.id === changedFields.employeeid
+      );
+      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
+        ),
+      });
+    }
+    if (!!changedFields.cost_center && !!EmployeeAutoCompleteData) {
+      form.setFieldsValue({
+        ciecacode: Object.keys(
+          bodyshop.md_responsibility_centers.defaults
+        ).find(
+          (key) =>
+            bodyshop.md_responsibility_centers.defaults[key] ===
+            changedFields.cost_center
+        ),
+      });
+    }
+  };
+
   return (
     <Modal
       title={
@@ -96,6 +142,7 @@ function TimeTicketModalContainer({
       okText={t("general.actions.save")}
       onOk={() => form.submit()}
       onCancel={handleCancel}
+      forceRender
       afterClose={() => form.resetFields()}
       footer={
         <span>
@@ -121,13 +168,17 @@ function TimeTicketModalContainer({
         onFinish={handleFinish}
         autoComplete={"off"}
         form={form}
-        onFinishFailed={() => {
-          setEnterAgain(false);
-          console.log("Finish failed");
-        }}
-        initialValues={{
-          jobid: timeTicketModal.context.jobId || null,
-        }}
+        initialValues={
+          timeTicketModal.context.timeticket
+            ? {
+                ...timeTicketModal.context.timeticket,
+                date: timeTicketModal.context.timeticket.date
+                  ? moment(timeTicketModal.context.date)
+                  : null,
+              }
+            : { jobid: timeTicketModal.context.jobId || null }
+        }
+        onValuesChange={handleFieldsChange}
       >
         <TimeTicketModalComponent
           form={form}
@@ -136,10 +187,12 @@ function TimeTicketModalContainer({
             EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
           }
           responsibilityCenters={bodyshop.md_responsibility_centers || null}
-          loadJobLines={loadJobLines}
+          loadLineTicketData={loadLineTicketData}
+          lineTicketData={
+            lineTicketData ? lineTicketData : { joblines: [], timetickets: [] }
+          }
         />
       </Form>
-      {JSON.stringify(jobLinesData)}
     </Modal>
   );
 }
diff --git a/client/src/emails/components/header/header.component.jsx b/client/src/emails/components/header/header.component.jsx
index 8136aba6b..ea6aedc29 100644
--- a/client/src/emails/components/header/header.component.jsx
+++ b/client/src/emails/components/header/header.component.jsx
@@ -5,7 +5,7 @@ export default function Header({ bodyshop }) {
     <table>
       <tr>
         <td>
-          <img alt='' src={bodyshop.logo_img_path} />
+          <img alt="" src={bodyshop.logo_img_path} />
         </td>
         <td>
           <div>
@@ -13,7 +13,7 @@ export default function Header({ bodyshop }) {
           </div>
           <div>{`${bodyshop.address1} ${bodyshop.address2} ${bodyshop.city} ${bodyshop.state} ${bodyshop.zip_post}`}</div>
           <div>
-            <a href={`mailto:${bodyshop.email}`}>{bodyshop.email}</a>{" "}
+            <a href={`mailto:${bodyshop.email}`}>{bodyshop.email}</a>
             {` |  ${bodyshop.ph1}`}
           </div>
         </td>
diff --git a/client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx b/client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx
index 1f3d81aa8..a329a56b3 100644
--- a/client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx
+++ b/client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx
@@ -33,7 +33,7 @@ export default function AppointmentConfirmationEmail({ data }) {
       <strong>Appointment Reminder</strong>
       <p> Dear {`${appointment.job.ownr_fn} ${appointment.job.ownr_ln}`},</p>
       <p>
-        You have an appointment at {data.bodyshops[0].shopname} on{" "}
+        You have an appointment at {data.bodyshops[0].shopname} on
         <DateTimeFormatter>{appointment.start}</DateTimeFormatter>.
       </p>
       <p>Thank you from the team at {data.bodyshops[0].shopname}</p>
diff --git a/client/src/graphql/jobs-lines.queries.js b/client/src/graphql/jobs-lines.queries.js
index c7f843d5e..e07ffe7e8 100644
--- a/client/src/graphql/jobs-lines.queries.js
+++ b/client/src/graphql/jobs-lines.queries.js
@@ -45,9 +45,9 @@ export const GET_JOB_LINES_BY_PK = gql`
   }
 `;
 
-export const GET_JOB_LINES_BY_PK_MINIMAL = gql`
-  query GET_JOB_LINES_BY_PK_MINIMAL($id: uuid!) {
-    joblines(where: { jobid: { _eq: $id } }, order_by: { unq_seq: asc }) {
+export const GET_LINE_TICKET_BY_PK = gql`
+  query GET_LINE_TICKET_BY_PK($id: uuid!) {
+    joblines(where: { jobid: { _eq: $id } }) {
       id
       line_desc
       part_type
@@ -62,6 +62,22 @@ export const GET_JOB_LINES_BY_PK_MINIMAL = gql`
       lbr_amt
       op_code_desc
     }
+    timetickets(where: { jobid: { _eq: $id } }) {
+      actualhrs
+      ciecacode
+      cost_center
+      date
+      id
+      jobid
+      employeeid
+      employee {
+        id
+        first_name
+        last_name
+        employee_number
+      }
+      productivehrs
+    }
   }
 `;
 
diff --git a/client/src/graphql/timetickets.queries.js b/client/src/graphql/timetickets.queries.js
index 0493615ba..eb43189a6 100644
--- a/client/src/graphql/timetickets.queries.js
+++ b/client/src/graphql/timetickets.queries.js
@@ -30,3 +30,19 @@ export const INSERT_NEW_TIME_TICKET = gql`
     }
   }
 `;
+
+export const UPDATE_TIME_TICKET = gql`
+  mutation UPDATE_TIME_TICKET(
+    $timeticketId: uuid!
+    $timeticket: timetickets_set_input!
+  ) {
+    update_timetickets(
+      where: { id: { _eq: $timeticketId } }
+      _set: $timeticket
+    ) {
+      returning {
+        id
+      }
+    }
+  }
+`;
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 867dad4c4..648bc6630 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -548,7 +548,10 @@
 				"creating_new_job": "Creating new job...",
 				"documents": "Documents",
 				"existing_jobs": "Existing Jobs",
+				"hrs_claimed": "Hours Claimed",
+				"hrs_total": "Hours Total",
 				"job": "Job Details",
+				"laborallocations": "Labor Allocations",
 				"lines": "Estimate Lines",
 				"notes": "Notes",
 				"override_header": "Override estimate header on import?",
@@ -713,8 +716,17 @@
 			}
 		},
 		"timetickets": {
+			"actions": {
+				"enter": "Enter New Time Ticket"
+			},
 			"fields": {
-				"employee": "Employee"
+				"actualhrs": "Actual Hours",
+				"ciecacode": "CIECA Code",
+				"cost_center": "Cost Center",
+				"date": "Ticket Date",
+				"employee": "Employee",
+				"productivehrs": "Productive Hours",
+				"ro_number": "Job to Post Against"
 			},
 			"labels": {
 				"edit": "Edit Time Ticket",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 4797e15e7..2f46796ab 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -548,7 +548,10 @@
 				"creating_new_job": "Creando nuevo trabajo ...",
 				"documents": "documentos",
 				"existing_jobs": "Empleos existentes",
+				"hrs_claimed": "",
+				"hrs_total": "",
 				"job": "",
+				"laborallocations": "",
 				"lines": "Líneas estimadas",
 				"notes": "Notas",
 				"override_header": "¿Anular encabezado estimado al importar?",
@@ -713,8 +716,17 @@
 			}
 		},
 		"timetickets": {
+			"actions": {
+				"enter": ""
+			},
 			"fields": {
-				"employee": ""
+				"actualhrs": "",
+				"ciecacode": "",
+				"cost_center": "",
+				"date": "",
+				"employee": "",
+				"productivehrs": "",
+				"ro_number": ""
 			},
 			"labels": {
 				"edit": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index e0b14233a..031c9e226 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -548,7 +548,10 @@
 				"creating_new_job": "Création d'un nouvel emploi ...",
 				"documents": "Les documents",
 				"existing_jobs": "Emplois existants",
+				"hrs_claimed": "",
+				"hrs_total": "",
 				"job": "",
+				"laborallocations": "",
 				"lines": "Estimer les lignes",
 				"notes": "Remarques",
 				"override_header": "Remplacer l'en-tête d'estimation à l'importation?",
@@ -713,8 +716,17 @@
 			}
 		},
 		"timetickets": {
+			"actions": {
+				"enter": ""
+			},
 			"fields": {
-				"employee": ""
+				"actualhrs": "",
+				"ciecacode": "",
+				"cost_center": "",
+				"date": "",
+				"employee": "",
+				"productivehrs": "",
+				"ro_number": ""
 			},
 			"labels": {
 				"edit": "",