From 542eca586764a267d9d0d3bfa6061d18b449d023 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 12 Apr 2023 12:44:19 -0700
Subject: [PATCH] Claim Tasks WIP.

---
 bodyshop_translations.babel                   | 274 +++++++++++-
 .../employee-team-search-select.component.jsx |  33 ++
 .../jobs-detail-header-actions.component.jsx  |  18 +
 .../shop-employees-form.component.jsx         |   4 +-
 .../shop-info/shop-info.rbac.component.jsx    |  12 +
 .../shop-employee-teams-member.component.jsx  |   7 +
 .../shop-employee-teams.form.component.jsx    | 421 ++++++++++++++++++
 .../shop-teams/shop-employee-teams.list.jsx   |  71 +++
 .../shop-teams/shop-teams.container.jsx       |  43 ++
 .../time-ticket-list-team-pay.component.jsx   |   1 +
 .../time-ticket-task-modal.component.jsx      | 223 ++++++++++
 .../time-ticket-task-modal.container.jsx      | 125 ++++++
 .../time-ticket-task-selector.component.jsx   |  30 ++
 client/src/graphql/employee_teams.queries.js  |  90 ++++
 .../pages/manage/manage.page.component.jsx    |   6 +
 client/src/pages/shop/shop.page.component.jsx |   5 +
 client/src/redux/modals/modals.reducer.js     |   1 +
 client/src/redux/modals/modals.selectors.js   |   4 +
 client/src/translations/en_us/common.json     |  14 +
 client/src/translations/es/common.json        |  14 +
 client/src/translations/fr/common.json        |  14 +
 hasura/metadata/tables.yaml                   | 176 ++++++++
 .../down.sql                                  |   1 +
 .../up.sql                                    |  18 +
 .../down.sql                                  |   1 +
 .../up.sql                                    |  18 +
 26 files changed, 1621 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/employee-team-search-select/employee-team-search-select.component.jsx
 create mode 100644 client/src/components/shop-teams/shop-employee-teams-member.component.jsx
 create mode 100644 client/src/components/shop-teams/shop-employee-teams.form.component.jsx
 create mode 100644 client/src/components/shop-teams/shop-employee-teams.list.jsx
 create mode 100644 client/src/components/shop-teams/shop-teams.container.jsx
 create mode 100644 client/src/components/time-ticket-task-modal/time-ticket-task-modal.component.jsx
 create mode 100644 client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx
 create mode 100644 client/src/components/time-ticket-task-selector/time-ticket-task-selector.component.jsx
 create mode 100644 client/src/graphql/employee_teams.queries.js
 create mode 100644 hasura/migrations/1681155844658_create_table_public_employee_teams/down.sql
 create mode 100644 hasura/migrations/1681155844658_create_table_public_employee_teams/up.sql
 create mode 100644 hasura/migrations/1681156265693_create_table_public_employee_team_members/down.sql
 create mode 100644 hasura/migrations/1681156265693_create_table_public_employee_team_members/up.sql

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 23707d6e7..afba43fec 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -6116,6 +6116,32 @@
                                                     </concept_node>
                                                 </children>
                                             </folder_node>
+                                            <folder_node>
+                                                <name>employee_teams</name>
+                                                <children>
+                                                    <concept_node>
+                                                        <name>page</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>employees</name>
                                                 <children>
@@ -9404,6 +9430,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>employee_teams</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>employees</name>
                                         <definition_loaded>false</definition_loaded>
@@ -14583,6 +14630,84 @@
                             </folder_node>
                         </children>
                     </folder_node>
+                    <folder_node>
+                        <name>employee_teams</name>
+                        <children>
+                            <folder_node>
+                                <name>actions</name>
+                                <children>
+                                    <concept_node>
+                                        <name>new</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>active</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>name</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>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>employees</name>
                         <children>
@@ -33806,6 +33931,27 @@
                             <folder_node>
                                 <name>errors</name>
                                 <children>
+                                    <concept_node>
+                                        <name>deleting</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>noaccess</name>
                                         <definition_loaded>false</definition_loaded>
@@ -34367,6 +34513,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>deleteconfirm</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>existing_owners</name>
                                         <definition_loaded>false</definition_loaded>
@@ -34477,6 +34644,27 @@
                             <folder_node>
                                 <name>successes</name>
                                 <children>
+                                    <concept_node>
+                                        <name>delete</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>save</name>
                                         <definition_loaded>false</definition_loaded>
@@ -43926,6 +44114,27 @@
                             <folder_node>
                                 <name>actions</name>
                                 <children>
+                                    <concept_node>
+                                        <name>claimtasks</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>clockin</name>
                                         <definition_loaded>false</definition_loaded>
@@ -47292,6 +47501,27 @@
                             <folder_node>
                                 <name>errors</name>
                                 <children>
+                                    <concept_node>
+                                        <name>deleting</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>noaccess</name>
                                         <definition_loaded>false</definition_loaded>
@@ -47916,6 +48146,27 @@
                             <folder_node>
                                 <name>labels</name>
                                 <children>
+                                    <concept_node>
+                                        <name>deleteconfirm</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>fromvehicle</name>
                                         <definition_loaded>false</definition_loaded>
@@ -48005,6 +48256,27 @@
                             <folder_node>
                                 <name>successes</name>
                                 <children>
+                                    <concept_node>
+                                        <name>delete</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>save</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/employee-team-search-select/employee-team-search-select.component.jsx b/client/src/components/employee-team-search-select/employee-team-search-select.component.jsx
new file mode 100644
index 000000000..3166a35d0
--- /dev/null
+++ b/client/src/components/employee-team-search-select/employee-team-search-select.component.jsx
@@ -0,0 +1,33 @@
+import { useQuery } from "@apollo/client";
+import { Select } from "antd";
+import React, { forwardRef } from "react";
+import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
+import AlertComponent from "../alert/alert.component";
+
+//To be used as a form element only.
+
+const EmployeeTeamSearchSelect = ({ ...props }, ref) => {
+  const { loading, error, data } = useQuery(QUERY_TEAMS);
+
+  if (error) return <AlertComponent message={JSON.stringify(error)} />;
+  return (
+    <Select
+      showSearch
+      allowClear
+      loading={loading}
+      style={{
+        width: 400,
+      }}
+      options={
+        data
+          ? data.employee_teams.map((e) => ({
+              value: JSON.stringify(e),
+              label: e.name,
+            }))
+          : []
+      }
+      {...props}
+    />
+  );
+};
+export default forwardRef(EmployeeTeamSearchSelect);
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index 879fb7426..8f0c2235b 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -47,6 +47,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "jobCosting" })),
   setTimeTicketContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+  setTimeTicketTaskContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicketTask" })),
 });
 
 export function JobsDetailHeaderActions({
@@ -60,6 +62,7 @@ export function JobsDetailHeaderActions({
   setJobCostingContext,
   jobRO,
   setTimeTicketContext,
+  setTimeTicketTaskContext,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -244,6 +247,21 @@ export function JobsDetailHeaderActions({
       >
         {t("timetickets.actions.enter")}
       </Menu.Item>
+      <Menu.Item
+        key="claimtimetickettasks"
+        disabled={
+          !job.converted ||
+          (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced)
+        }
+        onClick={() => {
+          setTimeTicketTaskContext({
+            actions: {},
+            context: { jobId: job.id },
+          });
+        }}
+      >
+        {t("timetickets.actions.claimtasks")}
+      </Menu.Item>
       <Menu.Item
         key="enterpayments"
         disabled={!job.converted}
diff --git a/client/src/components/shop-employees/shop-employees-form.component.jsx b/client/src/components/shop-employees/shop-employees-form.component.jsx
index 82fafb1aa..782c0dff8 100644
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -11,7 +11,7 @@ import {
   Switch,
   Table,
 } from "antd";
-import { useForm } from "antd/es/form/Form";
+
 import moment from "moment";
 import querystring from "query-string";
 import React, { useEffect } from "react";
@@ -46,7 +46,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ShopEmployeesFormComponent({ bodyshop }) {
   const { t } = useTranslation();
-  const [form] = useForm();
+  const [form] = Form.useForm();
   const history = useHistory();
   const search = querystring.parse(useLocation().search);
   const [deleteVacation] = useMutation(DELETE_VACATION);
diff --git a/client/src/components/shop-info/shop-info.rbac.component.jsx b/client/src/components/shop-info/shop-info.rbac.component.jsx
index 291369255..5d7c244cc 100644
--- a/client/src/components/shop-info/shop-info.rbac.component.jsx
+++ b/client/src/components/shop-info/shop-info.rbac.component.jsx
@@ -388,6 +388,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.employee_teams.page")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "employee_teams:page"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.owners.list")}
           rules={[
diff --git a/client/src/components/shop-teams/shop-employee-teams-member.component.jsx b/client/src/components/shop-teams/shop-employee-teams-member.component.jsx
new file mode 100644
index 000000000..c2d9d0523
--- /dev/null
+++ b/client/src/components/shop-teams/shop-employee-teams-member.component.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function ShopEmployeeTeamMember({teamMember}) {
+  return (
+    <div>ShopEmployeeTeamMember</div>
+  )
+}
diff --git a/client/src/components/shop-teams/shop-employee-teams.form.component.jsx b/client/src/components/shop-teams/shop-employee-teams.form.component.jsx
new file mode 100644
index 000000000..b9ecdb848
--- /dev/null
+++ b/client/src/components/shop-teams/shop-employee-teams.form.component.jsx
@@ -0,0 +1,421 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { useMutation, useQuery } from "@apollo/client";
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  Switch,
+  notification,
+} from "antd";
+
+import querystring from "query-string";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+import {
+  INSERT_EMPLOYEE_TEAM,
+  QUERY_EMPLOYEE_TEAM_BY_ID,
+  UPDATE_EMPLOYEE_TEAM,
+} from "../../graphql/employee_teams.queries";
+import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const history = useHistory();
+  const search = querystring.parse(useLocation().search);
+
+  const { error, data } = useQuery(QUERY_EMPLOYEE_TEAM_BY_ID, {
+    variables: { id: search.employeeTeamId },
+    skip: !search.employeeTeamId || search.employeeTeamId === "new",
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
+  useEffect(() => {
+    if (data && data.employee_teams_by_pk)
+      form.setFieldsValue(data.employee_teams_by_pk);
+    else {
+      form.resetFields();
+    }
+  }, [form, data, search.employeeTeamId]);
+
+  const [updateEmployeeTeam] = useMutation(UPDATE_EMPLOYEE_TEAM);
+  const [insertEmployeeTeam] = useMutation(INSERT_EMPLOYEE_TEAM);
+
+  const handleFinish = async ({ employee_team_members, ...values }) => {
+    if (search.employeeTeamId && search.employeeTeamId !== "new") {
+      //Update a record.
+      logImEXEvent("shop_employee_update");
+
+      const result = await updateEmployeeTeam({
+        variables: {
+          employeeTeamId: search.employeeTeamId,
+          employeeTeam: values,
+          teamMemberUpdates: employee_team_members
+            .filter((e) => e.id)
+            .map((e) => {
+              delete e.__typename;
+              return { where: { id: { _eq: e.id } }, _set: e };
+            }),
+          teamMemberInserts: employee_team_members
+            .filter((e) => e.id === null || e.id === undefined)
+            .map((e) => ({ ...e, teamid: search.employeeTeamId })),
+          teamMemberDeletes:
+            data.employee_teams_by_pk.employee_team_members.filter(
+              (e) => !employee_team_members.find((etm) => etm.id === e.id)
+            ),
+        },
+      });
+      if (!result.errors) {
+        notification["success"]({
+          message: t("employees.successes.save"),
+        });
+      } else {
+        notification["error"]({
+          message: t("employees.errors.save", {
+            message: JSON.stringify(error),
+          }),
+        });
+      }
+    } else {
+      //New record, insert it.
+      logImEXEvent("shop_employee_insert");
+
+      insertEmployeeTeam({
+        variables: {
+          employeeTeam: {
+            ...values,
+            employee_team_members: { data: employee_team_members },
+            bodyshopid: bodyshop.id,
+          },
+        },
+        refetchQueries: ["QUERY_TEAMS"],
+      }).then((r) => {
+        search.employeeTeamId = r.data.insert_employee_teams_one.id;
+        history.push({ search: querystring.stringify(search) });
+        notification["success"]({
+          message: t("employees.successes.save"),
+        });
+      });
+    }
+  };
+
+  if (!search.employeeTeamId) return null;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Card
+      extra={
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.save")}
+        </Button>
+      }
+    >
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        layout="vertical"
+        form={form}
+      >
+        <LayoutFormRow>
+          <Form.Item
+            name="name"
+            label={t("employee_teams.fields.name")}
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("employee_teams.fields.active")}
+            name="active"
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </LayoutFormRow>
+        <Form.List name={["employee_team_members"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                {fields.map((field, index) => (
+                  <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
+                    <Form.Item
+                      label={t("employees.fields.id")}
+                      key={`${index}`}
+                      name={[field.name, "id"]}
+                      hidden
+                    >
+                      <Input />
+                    </Form.Item>
+                    <LayoutFormRow grow>
+                      <Form.Item
+                        label={t("employee_teams.fields.employeeid")}
+                        key={`${index}`}
+                        name={[field.name, "employeeid"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <EmployeeSearchSelectComponent
+                          options={bodyshop.employees}
+                        />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("employee_teams.fields.percentage")}
+                        key={`${index}`}
+                        name={[field.name, "percentage"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <InputNumber min={0} max={100} />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAA")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAA"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAB")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAB"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAD")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAD"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAE")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAE"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAF")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAF"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAG")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAG"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAM")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAM"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAR")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAR"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAS")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAS"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAU")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAU"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA1")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA1"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA2")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA2"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA3")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA3"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA4")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA4"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <DeleteFilled
+                        onClick={() => {
+                          remove(field.name);
+                        }}
+                      />
+                      <FormListMoveArrows
+                        move={move}
+                        index={index}
+                        total={fields.length}
+                      />
+                    </LayoutFormRow>
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    {t("employee_teams.actions.newmember")}
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
+      </Form>
+    </Card>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShopEmployeeTeamsFormComponent);
diff --git a/client/src/components/shop-teams/shop-employee-teams.list.jsx b/client/src/components/shop-teams/shop-employee-teams.list.jsx
new file mode 100644
index 000000000..402f8c9bf
--- /dev/null
+++ b/client/src/components/shop-teams/shop-employee-teams.list.jsx
@@ -0,0 +1,71 @@
+import { Button, Table } from "antd";
+import queryString from "query-string";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory, useLocation } from "react-router-dom";
+
+export default function ShopEmployeeTeamsListComponent({
+  loading,
+  employee_teams,
+}) {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      search.employeeTeamId = record.id;
+      history.push({ search: queryString.stringify(search) });
+    } else {
+      delete search.employeeTeamId;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+  const columns = [
+    {
+      title: t("employee_teams.fields.name"),
+      dataIndex: "name",
+      key: "name",
+    },
+  ];
+
+  return (
+    <div>
+      <Table
+        title={() => {
+          return (
+            <Button
+              type="primary"
+              onClick={() => {
+                search.employeeTeamId = "new";
+                history.push({ search: queryString.stringify(search) });
+              }}
+            >
+              {t("employee_teams.actions.new")}
+            </Button>
+          );
+        }}
+        loading={loading}
+        pagination={{ position: "top" }}
+        columns={columns}
+        rowKey="id"
+        dataSource={employee_teams}
+        rowSelection={{
+          onSelect: (props) => {
+            search.employeeTeamId = props.id;
+            history.push({ search: queryString.stringify(search) });
+          },
+          type: "radio",
+          selectedRowKeys: [search.employeeTeamId],
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            },
+          };
+        }}
+      />
+    </div>
+  );
+}
diff --git a/client/src/components/shop-teams/shop-teams.container.jsx b/client/src/components/shop-teams/shop-teams.container.jsx
new file mode 100644
index 000000000..702f15e37
--- /dev/null
+++ b/client/src/components/shop-teams/shop-teams.container.jsx
@@ -0,0 +1,43 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
+import ShopEmployeeTeamsListComponent from "./shop-employee-teams.list";
+import ShopEmployeeTeamsFormComponent from "./shop-employee-teams.form.component";
+import { Col, Row } from "antd";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+function ShopTeamsContainer({ bodyshop }) {
+  const { loading, error, data } = useQuery(QUERY_TEAMS, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <div>
+      <RbacWrapper action="employee_teams:page">
+        <Row gutter={[16, 16]}>
+          <Col span={6}>
+            <ShopEmployeeTeamsListComponent
+              employee_teams={data ? data.employee_teams : []}
+              loading={loading}
+            />
+          </Col>
+          <Col span={18}>
+            <ShopEmployeeTeamsFormComponent />
+          </Col>
+        </Row>
+      </RbacWrapper>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(ShopTeamsContainer);
diff --git a/client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx b/client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx
index ca13499d2..74e326faf 100644
--- a/client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx
@@ -124,6 +124,7 @@ export function TimeTicketListTeamPay({ bodyshop, context, actions }) {
           <Form.Item shouldUpdate noStyle>
             {({ getFieldsValue }) => {
               const formData = getFieldsValue();
+              console.log("🚀 ~ file: time-ticket-list-team-pay.component.jsx:127 ~ TimeTicketListTeamPay ~ formData:", formData)
               let data = [];
               let eligibleHours = 0;
               const theTeam = Teams.find((team) => team.name === formData.team);
diff --git a/client/src/components/time-ticket-task-modal/time-ticket-task-modal.component.jsx b/client/src/components/time-ticket-task-modal/time-ticket-task-modal.component.jsx
new file mode 100644
index 000000000..db11dc42f
--- /dev/null
+++ b/client/src/components/time-ticket-task-modal/time-ticket-task-modal.component.jsx
@@ -0,0 +1,223 @@
+import { Button, Form, Input, InputNumber, Radio } 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";
+import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
+import EmployeeTeamSearchSelectComponent from "../employee-team-search-select/employee-team-search-select.component";
+import FormDatePickerComponent from "../form-date-picker/form-date-picker.component";
+import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketTaskModalComponent);
+
+export function TimeTicketTaskModalComponent({
+  bodyshop,
+  form,
+  employeeAutoCompleteOptions,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <LayoutFormRow grow noDivider>
+        <Form.Item shouldUpdate>
+          {() => (
+            <Form.Item
+              name="jobid"
+              label={t("timetickets.fields.ro_number")}
+              rules={[
+                {
+                  required: true,
+                  //message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <JobSearchSelectComponent
+                convertedOnly={!bodyshop.tt_allow_post_to_invoiced}
+                notExported={!bodyshop.tt_allow_post_to_invoiced}
+              />
+            </Form.Item>
+          )}
+        </Form.Item>
+        <Form.Item name="employeeid" label={t("timetickets.fields.employee")}>
+          <EmployeeSearchSelectComponent
+            options={employeeAutoCompleteOptions}
+            allowClear
+            onSelect={(value) => {
+              const emps =
+                employeeAutoCompleteOptions &&
+                employeeAutoCompleteOptions.filter((e) => e.id === value)[0];
+              form.setFieldsValue({ flat_rate: emps && emps.flat_rate });
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          name="employeeteamid"
+          label={t("timetickets.fields.employee_team")}
+        >
+          <EmployeeTeamSearchSelectComponent />
+        </Form.Item>
+        <Form.Item
+          name="hourstype"
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Radio.Group>
+            <Radio value="LAB">Body</Radio>
+            <Radio value="LAR">Refinish</Radio>
+            <Radio value="LAM">Mechanical</Radio>
+            <Radio value="LAF">Frame</Radio>
+            <Radio value="LAG">Glass</Radio>
+          </Radio.Group>
+        </Form.Item>
+
+        <Form.Item
+          name="percent"
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <InputNumber min={0} max={100} precision={1} addonAfter="%" />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <Form.List name={["timetickets"]}>
+        {(fields, { add, remove, move }) => {
+          return (
+            <div>
+              {fields.map((field, index) => (
+                <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
+                  <LayoutFormRow grow>
+                    <Form.Item
+                      label={t("timetickets.fields.employeeid")}
+                      key={`${index}`}
+                      name={[field.name, "employeeid"]}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <EmployeeSearchSelectComponent
+                        options={bodyshop.employees}
+                      />
+                    </Form.Item>
+                    <Form.Item
+                      label={t("timetickets.fields.date")}
+                      key={`${index}`}
+                      name={[field.name, "date"]}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <FormDatePickerComponent />
+                    </Form.Item>
+                    <Form.Item
+                      label={t("timetickets.fields.productivehrs")}
+                      key={`${index}`}
+                      name={[field.name, "productivehrs"]}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <InputNumber min={0} />
+                    </Form.Item>
+                    <Form.Item
+                      label={t("timetickets.fields.actualhrs")}
+                      key={`${index}`}
+                      name={[field.name, "actualhrs"]}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <InputNumber min={0} />
+                    </Form.Item>
+                    <Form.Item
+                      label={t("timetickets.fields.rate")}
+                      key={`${index}`}
+                      name={[field.name, "rate"]}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <InputNumber />
+                    </Form.Item>
+                    <Form.Item
+                      label={t("timetickets.fields.cost_center")}
+                      key={`${index}`}
+                      name={[field.name, "cost_center"]}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                    <Form.Item
+                      label={t("timetickets.fields.memo")}
+                      key={`${index}`}
+                      name={[field.name, "memo"]}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                  </LayoutFormRow>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => {
+                    add();
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  {t("employee_teams.actions.newmember")}
+                </Button>
+              </Form.Item>
+            </div>
+          );
+        }}
+      </Form.List>
+    </div>
+  );
+}
diff --git a/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx b/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx
new file mode 100644
index 000000000..31e909cf7
--- /dev/null
+++ b/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx
@@ -0,0 +1,125 @@
+import React from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
+import { Modal, Form } from "antd";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
+import { useLazyQuery, useQuery } from "@apollo/client";
+import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
+import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import Dinero from "dinero.js";
+
+const mapStateToProps = createStructuredSelector({
+  timeTicketTasksModal: selectTimeTicketTasks,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("timeTicketTask")),
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTickeTaskModalContainer);
+
+export function TimeTickeTaskModalContainer({
+  bodyshop,
+  timeTicketTasksModal,
+  toggleModalVisible,
+}) {
+  const [form] = Form.useForm();
+  const { context, visible } = timeTicketTasksModal;
+  const { data: EmployeeAutoCompleteData } = useQuery(QUERY_ACTIVE_EMPLOYEES, {
+    skip: !visible,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+  //Query the Job Information and Prefill the Form.
+  const [queryJobInfo, { loading, data: lineTicketData }] = useLazyQuery(
+    GET_JOB_INFO_DRAW_CALCULATIONS,
+    {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+    }
+  );
+
+  async function handleFinish(values) {}
+
+  const handleFieldsChange = async (changed, allFields) => {
+    const formData = form.getFieldsValue();
+    if (changed[0].name[0] === "jobid") {
+      await queryJobInfo({ variables: { id: changed[0].value } });
+    }
+
+    if (
+      !formData.jobid ||
+      !formData.employeeteamid ||
+      !formData.hourstype ||
+      !formData.percent
+    ) {
+      console.log("Not everything populated.");
+      return;
+    }
+    let data = [];
+    let eligibleHours = 0;
+
+    const theTeam = JSON.parse(formData.employeeteamid);
+
+    if (theTeam) {
+      eligibleHours =
+        lineTicketData.joblines.reduce(
+          (acc, val) =>
+            acc + (formData.hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0),
+          0
+        ) * (formData.percent / 100 || 0);
+
+      data = theTeam.employee_team_members.map((e) => {
+        return {
+          employeeid: e.id,
+          date: 0,
+          percentage: e.percentage,
+          rate: e.labor_rates[formData.hourstype],
+          cost_center:
+            bodyshop.md_responsibility_centers.defaults.costs[
+              formData.hourstype
+            ],
+          productivehrs:
+            Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100,
+          pay: Dinero({
+            amount: Math.round((e.labor_rates[formData.hourstype] || 0) * 100),
+          })
+            .multiply(
+              Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100
+            )
+            .toFormat("$0.00"),
+        };
+      });
+      form.setFieldsValue({ timetickets: data });
+    }
+  };
+  return (
+    <Modal
+      destroyOnClose
+      open={visible}
+      onCancel={() => toggleModalVisible()}
+      width="80%"
+    >
+      <Form
+        autoComplete={"off"}
+        form={form}
+        layout="vertical"
+        onHandleFinish={handleFinish}
+        onFieldsChange={handleFieldsChange}
+      >
+        <TimeTicketTaskModalComponent
+          form={form}
+          employeeAutoCompleteOptions={
+            EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
+          }
+        />
+      </Form>
+    </Modal>
+  );
+}
diff --git a/client/src/components/time-ticket-task-selector/time-ticket-task-selector.component.jsx b/client/src/components/time-ticket-task-selector/time-ticket-task-selector.component.jsx
new file mode 100644
index 000000000..c974d3fe3
--- /dev/null
+++ b/client/src/components/time-ticket-task-selector/time-ticket-task-selector.component.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+import { Button, Dropdown } from "antd";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketTaskCollector);
+
+export function TimeTicketTaskCollector({ form, bodyshop }) {
+  const { t } = useTranslation();
+
+  const items = [];
+
+  return (
+    <Dropdown menu={{ items }}>
+      <Button>{t("timetickets.actions.tasks")}</Button>
+    </Dropdown>
+  );
+}
diff --git a/client/src/graphql/employee_teams.queries.js b/client/src/graphql/employee_teams.queries.js
new file mode 100644
index 000000000..842fb8353
--- /dev/null
+++ b/client/src/graphql/employee_teams.queries.js
@@ -0,0 +1,90 @@
+import { gql } from "@apollo/client";
+
+export const QUERY_TEAMS = gql`
+  query QUERY_TEAMS {
+    employee_teams(order_by: { name: asc }) {
+      id
+      name
+      employee_team_members {
+        id
+        labor_rates
+        percentage
+      }
+    }
+  }
+`;
+
+export const UPDATE_EMPLOYEE_TEAM = gql`
+  mutation UPDATE_EMPLOYEE_TEAM(
+    $employeeTeamId: uuid!
+    $employeeTeam: employee_teams_set_input
+    $teamMemberDeletes: [uuid!]
+    $teamMemberUpdates: [employee_team_members_updates!]!
+    $teamMemberInserts: [employee_team_members_insert_input!]!
+  ) {
+    update_employee_team_members_many(updates: $teamMemberUpdates) {
+      returning {
+        id
+        labor_rates
+        employeeid
+        percentage
+      }
+    }
+    delete_employee_team_members(where: { id: { _in: $teamMemberDeletes } }) {
+      affected_rows
+    }
+    insert_employee_team_members(objects: $teamMemberInserts) {
+      returning {
+        id
+        labor_rates
+        employeeid
+        percentage
+      }
+    }
+    update_employee_teams_by_pk(
+      pk_columns: { id: $employeeTeamId }
+      _set: $employeeTeam
+    ) {
+      active
+      name
+      id
+      employee_team_members {
+        percentage
+        labor_rates
+        id
+      }
+    }
+  }
+`;
+
+export const INSERT_EMPLOYEE_TEAM = gql`
+  mutation INSERT_EMPLOYEE_TEAM($employeeTeam: employee_teams_insert_input!) {
+    insert_employee_teams_one(object: $employeeTeam) {
+      active
+      name
+      id
+      employee_team_members {
+        employeeid
+        percentage
+        labor_rates
+        id
+      }
+    }
+  }
+`;
+
+export const QUERY_EMPLOYEE_TEAM_BY_ID = gql`
+  query QUERY_EMPLOYEE_TEAM_BY_ID($id: uuid!) {
+    employee_teams_by_pk(id: $id) {
+      id
+      name
+      active
+      employee_team_members {
+        employeeid
+        percentage
+        labor_rates
+        id
+      }
+    }
+  }
+`;
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index f8ed14fcd..d117aaeec 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -94,6 +94,11 @@ const BillEnterModalContainer = lazy(() =>
 const TimeTicketModalContainer = lazy(() =>
   import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
+const TimeTicketModalTask = lazy(() =>
+  import(
+    "../../components/time-ticket-task-modal/time-ticket-task-modal.container"
+  )
+);
 const PaymentModalContainer = lazy(() =>
   import("../../components/payment-modal/payment-modal.container")
 );
@@ -201,6 +206,7 @@ export function Manage({ match, conflict, bodyshop }) {
       <ReportCenterModal />
       <EmailOverlayContainer />
       <TimeTicketModalContainer />
+      <TimeTicketModalTask />
       <PrintCenterModalContainer />
       <Route exact path={`${match.path}/_test`} component={TestComponent} />
       <Route exact path={`${match.path}`} component={ManageRootPage} />
diff --git a/client/src/pages/shop/shop.page.component.jsx b/client/src/pages/shop/shop.page.component.jsx
index 7c9e4d5b2..a6e2f71ef 100644
--- a/client/src/pages/shop/shop.page.component.jsx
+++ b/client/src/pages/shop/shop.page.component.jsx
@@ -14,6 +14,8 @@ import {
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ShopInfoUsersComponent from "../../components/shop-users/shop-users.component";
+import ShopTeamsContainer from "../../components/shop-teams/shop-teams.container";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -44,6 +46,9 @@ export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
         <Tabs.TabPane tab={t("bodyshop.labels.employees")} key="employees">
           <ShopEmployeesContainer />
         </Tabs.TabPane>
+        <Tabs.TabPane tab={t("bodyshop.labels.employee_teams")} key="teams">
+          <ShopTeamsContainer />
+        </Tabs.TabPane>
         <Tabs.TabPane tab={t("bodyshop.labels.licensing")} key="licensing">
           <ShopInfoUsersComponent />
         </Tabs.TabPane>
diff --git a/client/src/redux/modals/modals.reducer.js b/client/src/redux/modals/modals.reducer.js
index 72859b08f..66720833c 100644
--- a/client/src/redux/modals/modals.reducer.js
+++ b/client/src/redux/modals/modals.reducer.js
@@ -16,6 +16,7 @@ const INITIAL_STATE = {
   schedule: { ...baseModal },
   partsOrder: { ...baseModal },
   timeTicket: { ...baseModal },
+  timeTicketTask: { ...baseModal },
   printCenter: { ...baseModal },
   reconciliation: { ...baseModal },
   payment: { ...baseModal },
diff --git a/client/src/redux/modals/modals.selectors.js b/client/src/redux/modals/modals.selectors.js
index 82d4f706d..e1053bf79 100644
--- a/client/src/redux/modals/modals.selectors.js
+++ b/client/src/redux/modals/modals.selectors.js
@@ -36,6 +36,10 @@ export const selectTimeTicket = createSelector(
   [selectModals],
   (modals) => modals.timeTicket
 );
+export const selectTimeTicketTasks = createSelector(
+  [selectModals],
+  (modals) => modals.timeTicketTask
+);
 
 export const selectPrintCenter = createSelector(
   [selectModals],
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index d3bdcdcbf..41fdaa016 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -374,6 +374,9 @@
 						"export": "CSI -> Export",
 						"page": "CSI -> Page"
 					},
+					"employee_teams": {
+						"page": "Employee Teams -> List"
+					},
 					"employees": {
 						"page": "Employees -> List"
 					},
@@ -572,6 +575,7 @@
 					"title": "DMS"
 				},
 				"emaillater": "Email Later",
+				"employee_teams": "Employee Teams",
 				"employees": "Employees",
 				"estimators": "Estimators",
 				"filehandlers": "File Handlers",
@@ -905,6 +909,15 @@
 				"sent": "Email sent successfully."
 			}
 		},
+		"employee_teams": {
+			"actions": {
+				"new": "New Team"
+			},
+			"fields": {
+				"active": "Active",
+				"name": "Team Name"
+			}
+		},
 		"employees": {
 			"actions": {
 				"addvacation": "Add Vacation",
@@ -2603,6 +2616,7 @@
 		},
 		"timetickets": {
 			"actions": {
+				"claimtasks": "Claim Tasks",
 				"clockin": "Clock In",
 				"clockout": "Clock Out",
 				"enter": "Enter New Time Ticket",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 7f0385f80..11e2e5b35 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -374,6 +374,9 @@
 						"export": "",
 						"page": ""
 					},
+					"employee_teams": {
+						"page": ""
+					},
 					"employees": {
 						"page": ""
 					},
@@ -572,6 +575,7 @@
 					"title": ""
 				},
 				"emaillater": "",
+				"employee_teams": "",
 				"employees": "",
 				"estimators": "",
 				"filehandlers": "",
@@ -905,6 +909,15 @@
 				"sent": "Correo electrónico enviado con éxito."
 			}
 		},
+		"employee_teams": {
+			"actions": {
+				"new": ""
+			},
+			"fields": {
+				"active": "",
+				"name": ""
+			}
+		},
 		"employees": {
 			"actions": {
 				"addvacation": "",
@@ -2603,6 +2616,7 @@
 		},
 		"timetickets": {
 			"actions": {
+				"claimtasks": "",
 				"clockin": "",
 				"clockout": "",
 				"enter": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 172a44d34..74ca00248 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -374,6 +374,9 @@
 						"export": "",
 						"page": ""
 					},
+					"employee_teams": {
+						"page": ""
+					},
 					"employees": {
 						"page": ""
 					},
@@ -572,6 +575,7 @@
 					"title": ""
 				},
 				"emaillater": "",
+				"employee_teams": "",
 				"employees": "",
 				"estimators": "",
 				"filehandlers": "",
@@ -905,6 +909,15 @@
 				"sent": "E-mail envoyé avec succès."
 			}
 		},
+		"employee_teams": {
+			"actions": {
+				"new": ""
+			},
+			"fields": {
+				"active": "",
+				"name": ""
+			}
+		},
 		"employees": {
 			"actions": {
 				"addvacation": "",
@@ -2603,6 +2616,7 @@
 		},
 		"timetickets": {
 			"actions": {
+				"claimtasks": "",
 				"clockin": "",
 				"clockout": "",
 				"enter": "",
diff --git a/hasura/metadata/tables.yaml b/hasura/metadata/tables.yaml
index a576c160e..0055e4b7a 100644
--- a/hasura/metadata/tables.yaml
+++ b/hasura/metadata/tables.yaml
@@ -761,6 +761,13 @@
           table:
             name: email_audit_trail
             schema: public
+    - name: employee_teams
+      using:
+        foreign_key_constraint_on:
+          column: bodyshopid
+          table:
+            name: employee_teams
+            schema: public
     - name: employees
       using:
         foreign_key_constraint_on:
@@ -1945,6 +1952,165 @@
                 - active:
                     _eq: true
         check: null
+- table:
+    name: employee_team_members
+    schema: public
+  object_relationships:
+    - name: employee
+      using:
+        foreign_key_constraint_on: employeeid
+    - name: employee_team
+      using:
+        foreign_key_constraint_on: teamid
+  insert_permissions:
+    - role: user
+      permission:
+        check:
+          employee_team:
+            bodyshop:
+              associations:
+                _and:
+                  - user:
+                      authid:
+                        _eq: X-Hasura-User-Id
+                  - active:
+                      _eq: true
+        columns:
+          - labor_rates
+          - percentage
+          - created_at
+          - updated_at
+          - employeeid
+          - id
+          - teamid
+  select_permissions:
+    - role: user
+      permission:
+        columns:
+          - labor_rates
+          - percentage
+          - created_at
+          - updated_at
+          - employeeid
+          - id
+          - teamid
+        filter:
+          employee_team:
+            bodyshop:
+              associations:
+                _and:
+                  - user:
+                      authid:
+                        _eq: X-Hasura-User-Id
+                  - active:
+                      _eq: true
+  update_permissions:
+    - role: user
+      permission:
+        columns:
+          - labor_rates
+          - percentage
+          - created_at
+          - updated_at
+          - employeeid
+          - id
+          - teamid
+        filter:
+          employee_team:
+            bodyshop:
+              associations:
+                _and:
+                  - user:
+                      authid:
+                        _eq: X-Hasura-User-Id
+                  - active:
+                      _eq: true
+        check: null
+  delete_permissions:
+    - role: user
+      permission:
+        backend_only: false
+        filter:
+          employee_team:
+            bodyshop:
+              associations:
+                _and:
+                  - user:
+                      authid:
+                        _eq: X-Hasura-User-Id
+                  - active:
+                      _eq: true
+- table:
+    name: employee_teams
+    schema: public
+  object_relationships:
+    - name: bodyshop
+      using:
+        foreign_key_constraint_on: bodyshopid
+  array_relationships:
+    - name: employee_team_members
+      using:
+        foreign_key_constraint_on:
+          column: teamid
+          table:
+            name: employee_team_members
+            schema: public
+  insert_permissions:
+    - role: user
+      permission:
+        check:
+          bodyshop:
+            associations:
+              _and:
+                - user:
+                    authid:
+                      _eq: X-Hasura-User-Id
+                - active:
+                    _eq: true
+        columns:
+          - active
+          - name
+          - created_at
+          - updated_at
+          - bodyshopid
+          - id
+  select_permissions:
+    - role: user
+      permission:
+        columns:
+          - active
+          - name
+          - created_at
+          - updated_at
+          - bodyshopid
+          - id
+        filter:
+          bodyshop:
+            associations:
+              _and:
+                - user:
+                    authid:
+                      _eq: X-Hasura-User-Id
+                - active:
+                    _eq: true
+  update_permissions:
+    - role: user
+      permission:
+        columns:
+          - active
+          - bodyshopid
+          - name
+          - updated_at
+        filter:
+          bodyshop:
+            associations:
+              _and:
+                - user:
+                    authid:
+                      _eq: X-Hasura-User-Id
+                - active:
+                    _eq: true
+        check: null
 - table:
     name: employee_vacation
     schema: public
@@ -2045,6 +2211,13 @@
           table:
             name: allocations
             schema: public
+    - name: employee_team_members
+      using:
+        foreign_key_constraint_on:
+          column: employeeid
+          table:
+            name: employee_team_members
+            schema: public
     - name: employee_vacations
       using:
         foreign_key_constraint_on:
@@ -2493,6 +2666,7 @@
                       _eq: true
         columns:
           - act_price
+          - act_price_before_ppc
           - ah_detail_line
           - alt_co_id
           - alt_overrd
@@ -2559,6 +2733,7 @@
       permission:
         columns:
           - act_price
+          - act_price_before_ppc
           - ah_detail_line
           - alt_co_id
           - alt_overrd
@@ -2637,6 +2812,7 @@
       permission:
         columns:
           - act_price
+          - act_price_before_ppc
           - ah_detail_line
           - alt_co_id
           - alt_overrd
diff --git a/hasura/migrations/1681155844658_create_table_public_employee_teams/down.sql b/hasura/migrations/1681155844658_create_table_public_employee_teams/down.sql
new file mode 100644
index 000000000..1639caf73
--- /dev/null
+++ b/hasura/migrations/1681155844658_create_table_public_employee_teams/down.sql
@@ -0,0 +1 @@
+DROP TABLE "public"."employee_teams";
diff --git a/hasura/migrations/1681155844658_create_table_public_employee_teams/up.sql b/hasura/migrations/1681155844658_create_table_public_employee_teams/up.sql
new file mode 100644
index 000000000..994e15280
--- /dev/null
+++ b/hasura/migrations/1681155844658_create_table_public_employee_teams/up.sql
@@ -0,0 +1,18 @@
+CREATE TABLE "public"."employee_teams" ("id" uuid NOT NULL DEFAULT gen_random_uuid(), "created_at" timestamptz NOT NULL DEFAULT now(), "updated_at" timestamptz NOT NULL DEFAULT now(), "bodyshopid" uuid NOT NULL, "name" text NOT NULL, "active" boolean NOT NULL DEFAULT true, PRIMARY KEY ("id") , FOREIGN KEY ("bodyshopid") REFERENCES "public"."bodyshops"("id") ON UPDATE cascade ON DELETE cascade);
+CREATE OR REPLACE FUNCTION "public"."set_current_timestamp_updated_at"()
+RETURNS TRIGGER AS $$
+DECLARE
+  _new record;
+BEGIN
+  _new := NEW;
+  _new."updated_at" = NOW();
+  RETURN _new;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER "set_public_employee_teams_updated_at"
+BEFORE UPDATE ON "public"."employee_teams"
+FOR EACH ROW
+EXECUTE PROCEDURE "public"."set_current_timestamp_updated_at"();
+COMMENT ON TRIGGER "set_public_employee_teams_updated_at" ON "public"."employee_teams" 
+IS 'trigger to set value of column "updated_at" to current timestamp on row update';
+CREATE EXTENSION IF NOT EXISTS pgcrypto;
diff --git a/hasura/migrations/1681156265693_create_table_public_employee_team_members/down.sql b/hasura/migrations/1681156265693_create_table_public_employee_team_members/down.sql
new file mode 100644
index 000000000..14ab424ce
--- /dev/null
+++ b/hasura/migrations/1681156265693_create_table_public_employee_team_members/down.sql
@@ -0,0 +1 @@
+DROP TABLE "public"."employee_team_members";
diff --git a/hasura/migrations/1681156265693_create_table_public_employee_team_members/up.sql b/hasura/migrations/1681156265693_create_table_public_employee_team_members/up.sql
new file mode 100644
index 000000000..e6a32938f
--- /dev/null
+++ b/hasura/migrations/1681156265693_create_table_public_employee_team_members/up.sql
@@ -0,0 +1,18 @@
+CREATE TABLE "public"."employee_team_members" ("id" uuid NOT NULL DEFAULT gen_random_uuid(), "created_at" timestamptz NOT NULL DEFAULT now(), "updated_at" timestamptz NOT NULL DEFAULT now(), "teamid" uuid NOT NULL, "employeeid" uuid NOT NULL, "labor_rates" jsonb NOT NULL DEFAULT jsonb_build_object(), "percentage" numeric NOT NULL DEFAULT 0, PRIMARY KEY ("id") , FOREIGN KEY ("teamid") REFERENCES "public"."employee_teams"("id") ON UPDATE cascade ON DELETE cascade, FOREIGN KEY ("employeeid") REFERENCES "public"."employees"("id") ON UPDATE cascade ON DELETE cascade);
+CREATE OR REPLACE FUNCTION "public"."set_current_timestamp_updated_at"()
+RETURNS TRIGGER AS $$
+DECLARE
+  _new record;
+BEGIN
+  _new := NEW;
+  _new."updated_at" = NOW();
+  RETURN _new;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER "set_public_employee_team_members_updated_at"
+BEFORE UPDATE ON "public"."employee_team_members"
+FOR EACH ROW
+EXECUTE PROCEDURE "public"."set_current_timestamp_updated_at"();
+COMMENT ON TRIGGER "set_public_employee_team_members_updated_at" ON "public"."employee_team_members" 
+IS 'trigger to set value of column "updated_at" to current timestamp on row update';
+CREATE EXTENSION IF NOT EXISTS pgcrypto;