From f187a2106ca3cce7c28cc6d0701f5534a14955e4 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Mon, 20 Jul 2020 08:55:01 -0700
Subject: [PATCH] WIP Time Ticket Summary BOD-191

---
 bodyshop_translations.babel                   | 170 +++++++++++++++++-
 .../time-tickets-dates-selector.component.jsx |  33 ++++
 .../time-ticket-list.component.jsx            |  67 ++++++-
 .../time-ticket-modal.container.jsx           |   2 +-
 ...me-tickets-summary-employees.component.jsx | 131 ++++++++++++++
 .../time-tickets-summary.component.jsx        |  14 ++
 client/src/firebase/firebase.utils.js         |   4 +-
 client/src/graphql/timetickets.queries.js     |  34 +++-
 .../pages/manage/manage.page.component.jsx    |  11 +-
 .../time-tickets/time-tickets.container.jsx   |  62 +++++++
 client/src/redux/modals/modals.reducer.js     |   4 +-
 client/src/translations/en_us/common.json     |  10 +-
 client/src/translations/es/common.json        |  10 +-
 client/src/translations/fr/common.json        |  10 +-
 14 files changed, 544 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
 create mode 100644 client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
 create mode 100644 client/src/components/time-tickets-summary/time-tickets-summary.component.jsx
 create mode 100644 client/src/pages/time-tickets/time-tickets.container.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 7230abcb3..16e072825 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.6.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.6.1">
     <!--
 
     BabelEdit project file
@@ -17509,6 +17509,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>printemployee</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>
@@ -17556,6 +17577,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>creating</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>deleting</name>
                                         <definition_loaded>false</definition_loaded>
@@ -17624,6 +17666,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>clockhours</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>clockoff</name>
                                         <definition_loaded>false</definition_loaded>
@@ -17860,6 +17923,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>clockhours</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>clockintojob</name>
                                         <definition_loaded>false</definition_loaded>
@@ -17944,6 +18028,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>jobhours</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>lunch</name>
                                         <definition_loaded>false</definition_loaded>
@@ -18138,6 +18243,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>created</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>deleted</name>
                                         <definition_loaded>false</definition_loaded>
@@ -18799,6 +18925,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>timetickets</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>vehicle-details</name>
                                         <definition_loaded>false</definition_loaded>
@@ -19431,6 +19578,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>timetickets</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>vehicledetail</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx b/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
new file mode 100644
index 000000000..3e99707ec
--- /dev/null
+++ b/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
@@ -0,0 +1,33 @@
+import { DatePicker } from "antd";
+import moment from "moment";
+import queryString from "query-string";
+import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
+
+export default function TimeTicketsDatesSelector() {
+  const searchParams = queryString.parse(useLocation().search);
+  const { start, end } = searchParams;
+  const history = useHistory();
+
+  const handleChange = (dates) => {
+    const [start, end] = dates;
+
+    if (!!start && !!end) {
+      history.push({
+        search: queryString.stringify({
+          start: start.format("YYYY-MM-DD"),
+          end: end.format("YYYY-MM-DD"),
+        }),
+      });
+    }
+  };
+
+  return (
+    <div>
+      <DatePicker.RangePicker
+        defaultValue={[moment(start), moment(end)]}
+        onCalendarChange={handleChange}
+      />
+    </div>
+  );
+}
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
index 37cacfadb..3fdaaf052 100644
--- a/client/src/components/time-ticket-list/time-ticket-list.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
@@ -5,6 +5,9 @@ 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";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import moment from "moment";
+import { onlyUnique } from "../../utils/arrayHelper";
 
 export default function TimeTicketList({
   loading,
@@ -37,8 +40,7 @@ export default function TimeTicketList({
       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>
+          to={`/manage/employees/${record.employee.id}`}>{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
       ),
     },
     {
@@ -48,6 +50,17 @@ export default function TimeTicketList({
       sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        timetickets
+          .map((l) => l.cost_center)
+          .filter(onlyUnique)
+          .map((s) => {
+            return {
+              text: s, //|| "No Status*",
+              value: [s],
+            };
+          }) || [],
+      onFilter: (value, record) => value.includes(record.cost_center),
     },
     {
       title: t("timetickets.fields.productivehrs"),
@@ -66,6 +79,49 @@ export default function TimeTicketList({
       sortOrder:
         state.sortedInfo.columnKey === "actualhrs" && state.sortedInfo.order,
     },
+    {
+      title: t("timetickets.fields.clockon"),
+      dataIndex: "clockon",
+      key: "clockon",
+      sorter: (a, b) => a.clockon - b.clockon,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockon" && state.sortedInfo.order,
+      render: (text, record) => (
+        <DateTimeFormatter>{record.clockon}</DateTimeFormatter>
+      ),
+    },
+    {
+      title: t("timetickets.fields.clockoff"),
+      dataIndex: "clockoff",
+      key: "clockoff",
+      sorter: (a, b) => a.clockoff - b.clockoff,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockoff" && state.sortedInfo.order,
+      render: (text, record) => (
+        <DateTimeFormatter>{record.clockoff}</DateTimeFormatter>
+      ),
+    },
+    {
+      title: t("timetickets.fields.clockhours"),
+      dataIndex: "clockoff",
+      key: "clockoff",
+      sorter: (a, b) => a.clockoff - b.clockoff,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockoff" && state.sortedInfo.order,
+      render: (text, record) => {
+        if (record.clockoff && record.clockon)
+          return (
+            <div>
+              {moment(record.clockoff)
+                .diff(moment(record.clockon), "hours", true)
+                .toFixed(2)}
+            </div>
+          );
+        else {
+          return null;
+        }
+      },
+    },
     {
       title: t("general.labels.actions"),
       dataIndex: "actions",
@@ -75,8 +131,7 @@ export default function TimeTicketList({
         return (
           <TimeTicketEnterButton
             actions={{ refetch }}
-            context={{ id: record.id, timeticket: record }}
-          >
+            context={{ id: record.id, timeticket: record }}>
             {t("general.actions.edit")}
           </TimeTicketEnterButton>
         );
@@ -91,10 +146,10 @@ export default function TimeTicketList({
   return (
     <Table
       loading={loading}
-      size="small"
+      size='small'
       pagination={{ position: "top" }}
       columns={columns.map((item) => ({ ...item }))}
-      rowKey="id"
+      rowKey='id'
       dataSource={timetickets}
       onChange={handleTableChange}
     />
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 db5ea8a59..a4fb2ba54 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
@@ -59,7 +59,7 @@ export function TimeTicketModalContainer({
     } else {
       insertTicket({
         variables: {
-          timeTicketInput: [{ ...values, bodyshop: bodyshop.id }],
+          timeTicketInput: [{ ...values, bodyshopid: bodyshop.id }],
         },
       })
         .then(handleMutationSuccess)
diff --git a/client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx b/client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
new file mode 100644
index 000000000..91f5ef77b
--- /dev/null
+++ b/client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
@@ -0,0 +1,131 @@
+import React from "react";
+import { Statistic, Space, List, Button, Typography } from "antd";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import { useTranslation } from "react-i18next";
+import moment from "moment";
+
+export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
+  const { t } = useTranslation();
+
+  //Group everything by employee
+  //Then sum the individual time TimeTicketsSummary.
+
+  //Calculate job based tickets.
+  const jobTicketsByEmployee = {};
+  timetickets
+    .filter((i) => i.cost_center !== "timetickets.labels.shift")
+    .map((tt) => {
+      if (!!!jobTicketsByEmployee[tt.employeeid]) {
+        jobTicketsByEmployee[tt.employeeid] = [];
+      }
+      jobTicketsByEmployee[tt.employeeid].push(tt);
+    });
+  const jobTickets = Object.keys(jobTicketsByEmployee).map(function (key) {
+    return {
+      employee: jobTicketsByEmployee[key][0].employee,
+      tickets: jobTicketsByEmployee[key],
+    };
+  });
+
+  //Calculate shift based tickets.
+  const shiftTicketsByEmployee = {};
+  timetickets
+    .filter((i) => i.cost_center === "timetickets.labels.shift")
+    .map((tt) => {
+      if (!!!shiftTicketsByEmployee[tt.employeeid]) {
+        shiftTicketsByEmployee[tt.employeeid] = [];
+      }
+      shiftTicketsByEmployee[tt.employeeid].push(tt);
+    });
+  const shiftTickets = Object.keys(shiftTicketsByEmployee).map(function (key) {
+    return {
+      employee: shiftTicketsByEmployee[key][0].employee,
+      tickets: shiftTicketsByEmployee[key],
+    };
+  });
+
+  return (
+    <div>
+      <List
+        header={
+          <Typography.Title level={3}>
+            {t("timetickets.labels.jobhours")}
+          </Typography.Title>
+        }
+        itemLayout='horizontal'
+        dataSource={jobTickets}
+        renderItem={(item) => (
+          <List.Item
+            actions={[
+              <Button>{t("timetickets.actions.printemployee")}</Button>,
+            ]}>
+            <LoadingSkeleton loading={loading}>
+              <List.Item.Meta
+                title={
+                  <a href='https://ant.design'>{`${item.employee.first_name} ${item.employee.last_name}`}</a>
+                }
+                // description='Ant Design, a design language for background applications, is refined by Ant UED Team'
+              />
+              <Space>
+                <Statistic
+                  title={t("timetickets.fields.actualhrs")}
+                  precision={1}
+                  value={item.tickets.reduce(
+                    (acc, val) => acc + val.actualhrs,
+                    0
+                  )}
+                />
+                <Statistic
+                  title={t("timetickets.fields.productivehrs")}
+                  precision={1}
+                  value={item.tickets.reduce(
+                    (acc, val) => acc + val.productivehrs,
+                    0
+                  )}
+                />
+              </Space>
+            </LoadingSkeleton>
+          </List.Item>
+        )}
+      />
+      <List
+        header={
+          <Typography.Title level={3}>
+            {t("timetickets.labels.clockhours")}
+          </Typography.Title>
+        }
+        itemLayout='horizontal'
+        dataSource={shiftTickets}
+        renderItem={(item) => (
+          <List.Item
+            actions={[
+              <Button>{t("timetickets.actions.printemployee")}</Button>,
+            ]}>
+            <LoadingSkeleton loading={loading}>
+              <List.Item.Meta
+                title={
+                  <a href='https://ant.design'>{`${item.employee.first_name} ${item.employee.last_name}`}</a>
+                }
+                // description='Ant Design, a design language for background applications, is refined by Ant UED Team'
+              />
+              <Statistic
+                title={t("timetickets.fields.clockhours")}
+                precision={2}
+                value={item.tickets.reduce(
+                  (acc, val) =>
+                    acc +
+                    moment(item.clockoff).diff(
+                      moment(item.clockon),
+                      "hours",
+                      true
+                    ),
+                  0
+                )}
+              />
+            </LoadingSkeleton>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+}
diff --git a/client/src/components/time-tickets-summary/time-tickets-summary.component.jsx b/client/src/components/time-tickets-summary/time-tickets-summary.component.jsx
new file mode 100644
index 000000000..70b557c70
--- /dev/null
+++ b/client/src/components/time-tickets-summary/time-tickets-summary.component.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import TimeTicketsSummaryEmployees from "../time-tickets-summary-employees/time-tickets-summary-employees.component";
+
+export default function TimeTicketsSummary({ loading, timetickets }) {
+  console.log("ordera ds");
+  return (
+    <div>
+      <TimeTicketsSummaryEmployees
+        loading={loading}
+        timetickets={timetickets}
+      />
+    </div>
+  );
+}
diff --git a/client/src/firebase/firebase.utils.js b/client/src/firebase/firebase.utils.js
index 2c8e25ba7..bc0f56536 100644
--- a/client/src/firebase/firebase.utils.js
+++ b/client/src/firebase/firebase.utils.js
@@ -47,8 +47,8 @@ try {
 
 export { messaging };
 
-export const logImEXEvent = (eventName, additionalParams) => {
-  const state = store.getState();
+export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
+  const state = stateProp || store.getState();
   const eventParams = {
     shop:
       (state.user && state.user.bodyshop && state.user.bodyshop.shopname) ||
diff --git a/client/src/graphql/timetickets.queries.js b/client/src/graphql/timetickets.queries.js
index 793a6df1e..410635fc3 100644
--- a/client/src/graphql/timetickets.queries.js
+++ b/client/src/graphql/timetickets.queries.js
@@ -19,6 +19,36 @@ export const QUERY_TICKETS_BY_JOBID = gql`
   }
 `;
 
+export const QUERY_TIME_TICKETS_IN_RANGE = gql`
+  query QUERY_TIME_TICKETS_IN_RANGE($start: date!, $end: date!) {
+    timetickets(where: { date: { _gte: $start, _lte: $end } }) {
+      actualhrs
+      ciecacode
+      clockoff
+      clockon
+      cost_center
+      created_at
+      date
+      id
+      rate
+      productivehrs
+      memo
+      job {
+        id
+        ro_number
+      }
+      employeeid
+      employee {
+        id
+        employee_number
+        first_name
+        cost_center
+        last_name
+      }
+    }
+  }
+`;
+
 export const INSERT_NEW_TIME_TICKET = gql`
   mutation INSERT_NEW_TIME_TICKET(
     $timeTicketInput: [timetickets_insert_input!]!
@@ -72,7 +102,7 @@ export const QUERY_ACTIVE_TIME_TICKETS = gql`
           clockoff: { _is_null: true }
           employeeid: { _eq: $employeeId }
           clockon: { _is_null: false }
-          jobid: {_is_null: false}
+          jobid: { _is_null: false }
         }
       }
     ) {
@@ -102,7 +132,7 @@ export const QUERY_ACTIVE_SHIFT_TIME_TICKETS = gql`
           clockoff: { _is_null: true }
           employeeid: { _eq: $employeeId }
           clockon: { _is_null: false }
-          jobid: {_is_null: true}
+          jobid: { _is_null: true }
         }
       }
     ) {
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index ac1efe7be..69df941fa 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -118,7 +118,10 @@ const PaymentsAll = lazy(() =>
 );
 const ShiftClock = lazy(() => import("../shift-clock/shift-clock.page"));
 const Scoreboard = lazy(() =>
-  import("../scoreboard/scoreboard.page.container.jsx")
+  import("../scoreboard/scoreboard.page.container")
+);
+const TimeTicketsAll = lazy(() =>
+  import("../time-tickets/time-tickets.container")
 );
 
 const { Content } = Layout;
@@ -329,6 +332,12 @@ export function Manage({ match, conflict }) {
                 path={`${match.path}/scoreboard`}
                 component={Scoreboard}
               />
+
+              <Route
+                exact
+                path={`${match.path}/timetickets`}
+                component={TimeTicketsAll}
+              />
             </Suspense>
           )}
         </ErrorBoundary>
diff --git a/client/src/pages/time-tickets/time-tickets.container.jsx b/client/src/pages/time-tickets/time-tickets.container.jsx
new file mode 100644
index 000000000..e8e785e4d
--- /dev/null
+++ b/client/src/pages/time-tickets/time-tickets.container.jsx
@@ -0,0 +1,62 @@
+import { useQuery } from "@apollo/react-hooks";
+import moment from "moment";
+import queryString from "query-string";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-selector/time-tickets-dates-selector.component";
+import TimeTicketList from "../../components/time-ticket-list/time-ticket-list.component";
+import TimeTicketsSummary from "../../components/time-tickets-summary/time-tickets-summary.component";
+import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function TimeTicketsContainer({ bodyshop, setBreadcrumbs }) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.timetickets");
+    setBreadcrumbs([
+      {
+        link: "/manage/timetickets",
+        label: t("titles.bc.timetickets"),
+      },
+    ]);
+  }, [t, setBreadcrumbs]);
+
+  const searchParams = queryString.parse(useLocation().search);
+  const { start, end } = searchParams;
+
+  const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE, {
+    variables: {
+      start: start ? moment(start) : moment().startOf("week").subtract(7),
+      end: end ? moment(end) : moment().endOf("week"),
+    },
+  });
+
+  return (
+    <div>
+      <TimeTicketsDatesSelector />
+
+      <TimeTicketList
+        loading={loading}
+        timetickets={data ? data.timetickets : []}
+      />
+      <TimeTicketsSummary
+        loading={loading}
+        timetickets={data ? data.timetickets : []}
+      />
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketsContainer);
diff --git a/client/src/redux/modals/modals.reducer.js b/client/src/redux/modals/modals.reducer.js
index 24589d2e2..bb567c88c 100644
--- a/client/src/redux/modals/modals.reducer.js
+++ b/client/src/redux/modals/modals.reducer.js
@@ -25,7 +25,7 @@ const INITIAL_STATE = {
 const modalsReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case ModalsActionTypes.TOGGLE_MODAL_VISIBLE:
-      logImEXEvent("redux_toggle_modal_visible", { modal: action.payload });
+      //logImEXEvent("redux_toggle_modal_visible", { modal: action.payload });
       return {
         ...state,
         [action.payload]: {
@@ -34,7 +34,7 @@ const modalsReducer = (state = INITIAL_STATE, action) => {
         },
       };
     case ModalsActionTypes.SET_MODAL_CONTEXT:
-      logImEXEvent("redux_set_modal_context", { modal: action.payload.modal });
+      // logImEXEvent("redux_set_modal_context", { modal: action.payload.modal });
 
       return {
         ...state,
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 3d1648127..70dccc45c 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1112,16 +1112,19 @@
 			"actions": {
 				"clockin": "Clock In",
 				"clockout": "Clock Out",
-				"enter": "Enter New Time Ticket"
+				"enter": "Enter New Time Ticket",
+				"printemployee": "Print Time Tickets"
 			},
 			"errors": {
 				"clockingin": "Error while clocking in. {{message}}",
 				"clockingout": "Error while clocking out. {{message}}",
+				"creating": "Error creating time ticket. {{message}}",
 				"deleting": "Error deleting time ticket. {{message}}"
 			},
 			"fields": {
 				"actualhrs": "Actual Hours",
 				"ciecacode": "CIECA Code",
+				"clockhours": "Clock Hours",
 				"clockoff": "Clock Off",
 				"clockon": "Clocked In",
 				"cost_center": "Cost Center",
@@ -1135,10 +1138,12 @@
 				"alreadyclockedon": "You are already clocked in to the following job(s):",
 				"ambreak": "AM Break",
 				"amshift": "AM Shift",
+				"clockhours": "Clock Hours",
 				"clockintojob": "Clock In to Job",
 				"deleteconfirm": "Are you sure you want to delete this time ticket? This cannot be undone.",
 				"edit": "Edit Time Ticket",
 				"flat_rate": "Flat Rate",
+				"jobhours": "Job Related Time Tickets",
 				"lunch": "Lunch",
 				"new": "New Time Ticket",
 				"pmbreak": "PM Break",
@@ -1150,6 +1155,7 @@
 			"successes": {
 				"clockedin": "Clocked in successfully.",
 				"clockedout": "Clocked out successfully.",
+				"created": "Time ticket entered successfully.",
 				"deleted": "Time ticket deleted successfully."
 			}
 		},
@@ -1185,6 +1191,7 @@
 				"shop": "Manage my Shop ({{shopname}})",
 				"shop-csi": "CSI Responses",
 				"shop-templates": "Shop Templates",
+				"timetickets": "Time Tickets",
 				"vehicle-details": "Vehicle: {{vehicle}}",
 				"vehicles": "Vehicles"
 			},
@@ -1216,6 +1223,7 @@
 			"shop-csi": "CSI Responses | $t(titles.app)",
 			"shop-templates": "Shop Templates | $t(titles.app)",
 			"shop_vendors": "Vendors | $t(titles.app)",
+			"timetickets": "Time Tickets | $t(titles.app)",
 			"vehicledetail": "Vehicle Details {{vehicle}} | $t(titles.app)",
 			"vehicles": "All Vehicles | $t(titles.app)"
 		},
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 8dfc73c29..2e6f13ae6 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1112,16 +1112,19 @@
 			"actions": {
 				"clockin": "",
 				"clockout": "",
-				"enter": ""
+				"enter": "",
+				"printemployee": ""
 			},
 			"errors": {
 				"clockingin": "",
 				"clockingout": "",
+				"creating": "",
 				"deleting": ""
 			},
 			"fields": {
 				"actualhrs": "",
 				"ciecacode": "",
+				"clockhours": "",
 				"clockoff": "",
 				"clockon": "",
 				"cost_center": "",
@@ -1135,10 +1138,12 @@
 				"alreadyclockedon": "",
 				"ambreak": "",
 				"amshift": "",
+				"clockhours": "",
 				"clockintojob": "",
 				"deleteconfirm": "",
 				"edit": "",
 				"flat_rate": "",
+				"jobhours": "",
 				"lunch": "",
 				"new": "",
 				"pmbreak": "",
@@ -1150,6 +1155,7 @@
 			"successes": {
 				"clockedin": "",
 				"clockedout": "",
+				"created": "",
 				"deleted": ""
 			}
 		},
@@ -1185,6 +1191,7 @@
 				"shop": "",
 				"shop-csi": "",
 				"shop-templates": "",
+				"timetickets": "",
 				"vehicle-details": "",
 				"vehicles": ""
 			},
@@ -1216,6 +1223,7 @@
 			"shop-csi": "",
 			"shop-templates": "",
 			"shop_vendors": "Vendedores | $t(titles.app)",
+			"timetickets": "",
 			"vehicledetail": "Detalles del vehículo {{vehicle}} | $t(titles.app)",
 			"vehicles": "Todos los vehiculos | $t(titles.app)"
 		},
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 21465feec..e761b5176 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1112,16 +1112,19 @@
 			"actions": {
 				"clockin": "",
 				"clockout": "",
-				"enter": ""
+				"enter": "",
+				"printemployee": ""
 			},
 			"errors": {
 				"clockingin": "",
 				"clockingout": "",
+				"creating": "",
 				"deleting": ""
 			},
 			"fields": {
 				"actualhrs": "",
 				"ciecacode": "",
+				"clockhours": "",
 				"clockoff": "",
 				"clockon": "",
 				"cost_center": "",
@@ -1135,10 +1138,12 @@
 				"alreadyclockedon": "",
 				"ambreak": "",
 				"amshift": "",
+				"clockhours": "",
 				"clockintojob": "",
 				"deleteconfirm": "",
 				"edit": "",
 				"flat_rate": "",
+				"jobhours": "",
 				"lunch": "",
 				"new": "",
 				"pmbreak": "",
@@ -1150,6 +1155,7 @@
 			"successes": {
 				"clockedin": "",
 				"clockedout": "",
+				"created": "",
 				"deleted": ""
 			}
 		},
@@ -1185,6 +1191,7 @@
 				"shop": "",
 				"shop-csi": "",
 				"shop-templates": "",
+				"timetickets": "",
 				"vehicle-details": "",
 				"vehicles": ""
 			},
@@ -1216,6 +1223,7 @@
 			"shop-csi": "",
 			"shop-templates": "",
 			"shop_vendors": "Vendeurs | $t(titles.app)",
+			"timetickets": "",
 			"vehicledetail": "Détails du véhicule {{vehicle} | $t(titles.app)",
 			"vehicles": "Tous les véhicules | $t(titles.app)"
 		},