From 0849bbbba6cacef14a53205dc607cee07882a1bf Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Thu, 25 May 2023 10:14:17 -0700
Subject: [PATCH 1/3] Update translation laberl.

---
 .../tt-approve-button/tt-approve-button.component.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/tt-approve-button/tt-approve-button.component.jsx b/client/src/components/tt-approve-button/tt-approve-button.component.jsx
index 28aa3f47a..72abb1ab7 100644
--- a/client/src/components/tt-approve-button/tt-approve-button.component.jsx
+++ b/client/src/components/tt-approve-button/tt-approve-button.component.jsx
@@ -64,7 +64,7 @@ export function TtApproveButton({
       } else {
         notification.open({
           type: "success",
-          message: t("timetickets.successes.createdg"),
+          message: t("timetickets.successes.created"),
         });
       }
     } catch (error) {

From a56de72a6b3781d5d6f76bd46bbc5eb41e30bc6e Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Thu, 25 May 2023 11:44:01 -0700
Subject: [PATCH 2/3] Time Ticket Task Improvmenets.

---
 bodyshop_translations.babel                   | 154 +++++++++-
 .../components/header/header.component.jsx    |  12 +-
 .../jobs-detail-header-actions.component.jsx  |  33 ++-
 .../shop-info.task-presets.component.jsx      | 262 ++++++++++--------
 .../time-ticket-list.component.jsx            |  41 +--
 .../time-ticket-task-modal.component.jsx      |  93 ++++---
 .../time-ticket-task-modal.container.jsx      |  14 +-
 .../tt-approve-button.component.jsx           |  13 +-
 client/src/pages/shop/shop.page.component.jsx |   9 +-
 client/src/translations/en_us/common.json     |  18 +-
 client/src/translations/es/common.json        |  11 +-
 client/src/translations/fr/common.json        |  11 +-
 12 files changed, 449 insertions(+), 222 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index ffa7f2dd2..ab5b328f4 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -5608,6 +5608,27 @@
                                     <folder_node>
                                         <name>md_tasks_presets</name>
                                         <children>
+                                            <concept_node>
+                                                <name>enable_tasks</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>hourstype</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -5692,6 +5713,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>use_approvals</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>
                                     <concept_node>
@@ -8389,6 +8431,27 @@
                                     <folder_node>
                                         <name>ssbuckets</name>
                                         <children>
+                                            <concept_node>
+                                                <name>color</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>gte</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -40461,6 +40524,27 @@
                                             </folder_node>
                                         </children>
                                     </folder_node>
+                                    <concept_node>
+                                        <name>cardcolor</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>cardsettings</name>
                                         <definition_loaded>false</definition_loaded>
@@ -40671,6 +40755,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>legend</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>note</name>
                                         <definition_loaded>false</definition_loaded>
@@ -47825,6 +47930,53 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>labels</name>
+                                <children>
+                                    <concept_node>
+                                        <name>approval_queue_in_use</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>calculate</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>
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index d39169401..2d624b29b 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -246,11 +246,13 @@ function Header({
               {t("menus.header.timetickets")}
             </Link>
           </Menu.Item>
-          <Menu.Item key="ttapprovals" icon={<FieldTimeOutlined />}>
-            <Link to="/manage/ttapprovals">
-              {t("menus.header.ttapprovals")}
-            </Link>
-          </Menu.Item>
+          {bodyshop?.md_tasks_presets?.use_approvals && (
+            <Menu.Item key="ttapprovals" icon={<FieldTimeOutlined />}>
+              <Link to="/manage/ttapprovals">
+                {t("menus.header.ttapprovals")}
+              </Link>
+            </Menu.Item>
+          )}
           <Menu.Item
             key="entertimetickets"
             icon={<Icon component={GiPlayerTime} />}
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 53400ccd7..2307782f9 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
@@ -247,21 +247,24 @@ 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>
+      {bodyshop.md_tasks_presets.enable_tasks && (
+        <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-info/shop-info.task-presets.component.jsx b/client/src/components/shop-info/shop-info.task-presets.component.jsx
index 7218f8056..aedf554bc 100644
--- a/client/src/components/shop-info/shop-info.task-presets.component.jsx
+++ b/client/src/components/shop-info/shop-info.task-presets.component.jsx
@@ -8,6 +8,7 @@ import {
   InputNumber,
   Row,
   Space,
+  Switch,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -18,127 +19,146 @@ export default function ShopInfoTaskPresets({ form }) {
   const { t } = useTranslation();
 
   return (
-    <LayoutFormRow header={t("bodyshop.labels.md_tasks_presets")}>
-      <Form.List name={["md_tasks_presets", "presets"]}>
-        {(fields, { add, remove, move }) => {
-          return (
-            <div>
-              {fields.map((field, index) => (
-                <Form.Item key={field.key}>
-                  <LayoutFormRow noDivider>
-                    <Form.Item
-                      label={t("bodyshop.fields.md_tasks_presets.name")}
-                      key={`${index}name`}
-                      name={[field.name, "name"]}
-                      rules={[
-                        {
-                          required: true,
-                          //message: t("general.validation.required"),
-                        },
-                      ]}
-                    >
-                      <Input />
-                    </Form.Item>
-                    <Form.Item
-                      label={t("bodyshop.fields.md_tasks_presets.hourstype")}
-                      key={`${index}hourstype`}
-                      name={[field.name, "hourstype"]}
-                      rules={[
-                        {
-                          required: true,
-                          //message: t("general.validation.required"),
-                        },
-                      ]}
-                    >
-                      <Checkbox.Group>
-                        <Row>
-                          <Col span={8}>
-                            <Checkbox
-                              value="LAB"
-                              style={{ lineHeight: "32px" }}
-                            >
-                              {t("joblines.fields.lbr_types.LAB")}
-                            </Checkbox>
-                          </Col>
-                          <Col span={8}>
-                            <Checkbox
-                              value="LAR"
-                              style={{ lineHeight: "32px" }}
-                            >
-                              {t("joblines.fields.lbr_types.LAR")}
-                            </Checkbox>
-                          </Col>
-                          <Col span={8}>
-                            <Checkbox
-                              value="LAM"
-                              style={{ lineHeight: "32px" }}
-                            >
-                              {t("joblines.fields.lbr_types.LAM")}
-                            </Checkbox>
-                          </Col>
-                          <Col span={8}>
-                            <Checkbox
-                              value="LAF"
-                              style={{ lineHeight: "32px" }}
-                            >
-                              {t("joblines.fields.lbr_types.LAF")}
-                            </Checkbox>
-                          </Col>
-                          <Col span={8}>
-                            <Checkbox
-                              value="LAG"
-                              style={{ lineHeight: "32px" }}
-                            >
-                              {t("joblines.fields.lbr_types.LAG")}
-                            </Checkbox>
-                          </Col>
-                        </Row>
-                      </Checkbox.Group>
-                    </Form.Item>
-                    <Form.Item
-                      label={t("bodyshop.fields.md_tasks_presets.percent")}
-                      key={`${index}percent`}
-                      name={[field.name, "percent"]}
-                    >
-                      <InputNumber min={0} max={100} />
-                    </Form.Item>
-                    <Form.Item
-                      label={t("bodyshop.fields.md_tasks_presets.memo")}
-                      key={`${index}memo`}
-                      name={[field.name, "memo"]}
-                    >
-                      <Input />
-                    </Form.Item>
-                    <Space wrap>
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
-                      <FormListMoveArrows
-                        move={move}
-                        index={index}
-                        total={fields.length}
-                      />
-                    </Space>
-                  </LayoutFormRow>
+    <>
+      <LayoutFormRow noDivider>
+        <Form.Item
+          label={t("bodyshop.fields.md_tasks_presets.enable_tasks")}
+          valuePropName="checked"
+          name={["md_tasks_presets", "enable_tasks"]}
+        >
+          <Switch />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.md_tasks_presets.use_approvals")}
+          valuePropName="checked"
+          name={["md_tasks_presets", "use_approvals"]}
+        >
+          <Switch />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow header={t("bodyshop.labels.md_tasks_presets")}>
+        <Form.List name={["md_tasks_presets", "presets"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                {fields.map((field, index) => (
+                  <Form.Item key={field.key}>
+                    <LayoutFormRow noDivider>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.name")}
+                        key={`${index}name`}
+                        name={[field.name, "name"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.hourstype")}
+                        key={`${index}hourstype`}
+                        name={[field.name, "hourstype"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Checkbox.Group>
+                          <Row>
+                            <Col span={8}>
+                              <Checkbox
+                                value="LAB"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAB")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={8}>
+                              <Checkbox
+                                value="LAR"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAR")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={8}>
+                              <Checkbox
+                                value="LAM"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAM")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={8}>
+                              <Checkbox
+                                value="LAF"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAF")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={8}>
+                              <Checkbox
+                                value="LAG"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAG")}
+                              </Checkbox>
+                            </Col>
+                          </Row>
+                        </Checkbox.Group>
+                      </Form.Item>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.percent")}
+                        key={`${index}percent`}
+                        name={[field.name, "percent"]}
+                      >
+                        <InputNumber min={0} max={100} />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.memo")}
+                        key={`${index}memo`}
+                        name={[field.name, "memo"]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Space wrap>
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </Space>
+                    </LayoutFormRow>
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    {t("bodyshop.actions.add_task_preset")}
+                  </Button>
                 </Form.Item>
-              ))}
-              <Form.Item>
-                <Button
-                  type="dashed"
-                  onClick={() => {
-                    add();
-                  }}
-                  style={{ width: "100%" }}
-                >
-                  {t("bodyshop.actions.add_task_preset")}
-                </Button>
-              </Form.Item>
-            </div>
-          );
-        }}
-      </Form.List>
-    </LayoutFormRow>
+              </div>
+            );
+          }}
+        </Form.List>
+      </LayoutFormRow>
+    </>
   );
 }
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 6cc2e3e3d..8f5cbba90 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
@@ -205,16 +205,15 @@ export function TimeTicketList({
         }
       },
     },
-    {
-      title: "Pay",
-      dataIndex: "pay",
-      key: "pay",
-      render: (text, record) =>
-        Dinero({ amount: Math.round(record.rate * 100) })
-          .multiply(record.flat_rate ? record.productivehrs : record.actualhrs)
-          .toFormat("$0.00"),
-    },
-
+    // {
+    //   title: "Pay",
+    //   dataIndex: "pay",
+    //   key: "pay",
+    //   render: (text, record) =>
+    //     Dinero({ amount: Math.round(record.rate * 100) })
+    //       .multiply(record.flat_rate ? record.productivehrs : record.actualhrs)
+    //       .toFormat("$0.00"),
+    // },
     {
       title: t("general.labels.actions"),
       dataIndex: "actions",
@@ -282,16 +281,18 @@ export function TimeTicketList({
             //      context={{ jobId: jobId }}
             //    />
           }
-          <Button
-            onClick={() => {
-              setTimeTicketTaskContext({
-                actions: {},
-                context: { jobid: jobId },
-              });
-            }}
-          >
-            {t("timetickets.actions.claimtasks")}
-          </Button>
+          {bodyshop.md_tasks_presets.enable_tasks && (
+            <Button
+              onClick={() => {
+                setTimeTicketTaskContext({
+                  actions: {},
+                  context: { jobid: jobId },
+                });
+              }}
+            >
+              {t("timetickets.actions.claimtasks")}
+            </Button>
+          )}
           {jobId &&
             (techConsole ? null : (
               <TimeTicketEnterButton
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
index 5612931e1..721311443 100644
--- 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
@@ -23,6 +23,7 @@ import JobSearchSelectComponent from "../job-search-select/job-search-select.com
 import { CalculateAllocationsTotals } from "../labor-allocations-table/labor-allocations-table.utility";
 import { LaborAllocationContainer } from "../time-ticket-modal/time-ticket-modal.component";
 import TimeTicketsTasksPresets from "../time-ticket-tasks-presets/time-ticket-tasks-presets.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -54,7 +55,12 @@ export function TimeTicketTaskModalComponent({
         calculateTimeTickets={calculateTimeTickets}
       />
       <Row gutter={[16, 16]}>
-        <Col lg={12} md={24}>
+        {bodyshop?.md_tasks_presets?.use_approvals && (
+          <Col span={24}>
+            <Alert message={t(".tt_approvals.labels.approval_queue_in_use")} />
+          </Col>
+        )}
+        <Col xl={12} lg={24}>
           <Form.Item
             name="jobid"
             label={t("timetickets.fields.ro_number")}
@@ -77,37 +83,37 @@ export function TimeTicketTaskModalComponent({
           >
             <EmployeeTeamSearchSelectComponent />
           </Form.Item>
-          <Space wrap>
-            <Form.Item
-              name="hourstype"
-              rules={[
-                {
-                  required: true,
-                  //message: t("general.validation.required"),
-                },
-              ]}
-            >
-              <Checkbox.Group>
-                <Space wrap>
-                  <Checkbox value="LAB" style={{ display: "flex" }}>
-                    Body
-                  </Checkbox>
-                  <Checkbox value="LAR" style={{ display: "flex" }}>
-                    Refinish
-                  </Checkbox>
-                  <Checkbox value="LAM" style={{ display: "flex" }}>
-                    Mechanical
-                  </Checkbox>
-                  <Checkbox value="LAF" style={{ display: "flex" }}>
-                    Frame
-                  </Checkbox>
-                  <Checkbox value="LAG" style={{ display: "flex" }}>
-                    Glass
-                  </Checkbox>
-                </Space>
-              </Checkbox.Group>
-            </Form.Item>
 
+          <Form.Item
+            name="hourstype"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Checkbox.Group>
+              <Space wrap>
+                <Checkbox value="LAB" style={{ display: "flex" }}>
+                  {t("jobs.fields.lab")}
+                </Checkbox>
+                <Checkbox value="LAR" style={{ display: "flex" }}>
+                  {t("jobs.fields.lar")}
+                </Checkbox>
+                <Checkbox value="LAM" style={{ display: "flex" }}>
+                  {t("jobs.fields.lam")}
+                </Checkbox>
+                <Checkbox value="LAF" style={{ display: "flex" }}>
+                  {t("jobs.fields.laf")}
+                </Checkbox>
+                <Checkbox value="LAG" style={{ display: "flex" }}>
+                  {t("jobs.fields.lag")}
+                </Checkbox>
+              </Space>
+            </Checkbox.Group>
+          </Form.Item>
+          <Space wrap align="start">
             <Form.Item
               name="percent"
               rules={[
@@ -119,10 +125,13 @@ export function TimeTicketTaskModalComponent({
             >
               <InputNumber min={0} max={100} precision={1} addonAfter="%" />
             </Form.Item>
+
+            <Button onClick={calculateTimeTickets}>
+              {t("tt_approvals.labels.calculate")}
+            </Button>
           </Space>
-          <Button onClick={calculateTimeTickets}>Calculate</Button>
         </Col>
-        <Col lg={12} md={24}>
+        <Col xl={12} lg={24}>
           <Form.Item shouldUpdate>
             {() => {
               const data = form.getFieldValue("timetickets");
@@ -167,11 +176,11 @@ export function TimeTicketTaskModalComponent({
                       dataIndex: "rate",
                       key: "rate",
                     },
-                    {
-                      title: "Pay",
-                      dataIndex: "pay",
-                      key: "pay",
-                    },
+                    // {
+                    //   title: "Pay",
+                    //   dataIndex: "pay",
+                    //   key: "pay",
+                    // },
                   ]}
                 />
               );
@@ -231,11 +240,9 @@ export function TimeTicketTaskModalComponent({
                     <Alert key={idx} message={e} />
                   ))}
                   <div
-                    style={
-                      {
-                        //display: "none"
-                      }
-                    }
+                    style={{
+                      display: "none",
+                    }}
                   >
                     {fields.map((field, index) => (
                       <Form.Item
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
index 09fffd9b2..f838f965a 100644
--- 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
@@ -52,12 +52,8 @@ export function TimeTickeTaskModalContainer({
     });
 
   async function handleFinish(values) {
-    console.log(
-      "🚀 ~ file: time-ticket-task-modal.container.jsx:55 ~ handleFinish ~ values:",
-      values
-    );
     try {
-      if (true) {
+      if (bodyshop.md_tasks_presets.use_approvals) {
         const result = await insertTimeTicketApproval({
           variables: {
             timeTicketInput: values.timetickets.map((ticket) => ({
@@ -88,6 +84,7 @@ export function TimeTickeTaskModalContainer({
               _.omit(ticket, "pay")
             ),
           },
+          refetchQueries: ["GET_LINE_TICKET_BY_PK"]
         });
         if (result.errors) {
           notification.open({
@@ -105,6 +102,13 @@ export function TimeTickeTaskModalContainer({
         }
       }
     } catch (error) {
+      console.log("🚀 ~ file: time-ticket-task-modal.container.jsx:104 ~ handleFinish ~ error:", error)
+      notification.open({
+        type: "error",
+        message: t("timetickets.errors.creating", {
+          message: JSON.stringify(error),
+        }),
+      });
     } finally {
     }
   }
diff --git a/client/src/components/tt-approve-button/tt-approve-button.component.jsx b/client/src/components/tt-approve-button/tt-approve-button.component.jsx
index 72abb1ab7..0ae9120b3 100644
--- a/client/src/components/tt-approve-button/tt-approve-button.component.jsx
+++ b/client/src/components/tt-approve-button/tt-approve-button.component.jsx
@@ -9,13 +9,16 @@ import { createStructuredSelector } from "reselect";
 import { INSERT_TIME_TICKET_AND_APPROVE } from "../../graphql/timetickets.queries";
 import { QUERY_TT_APPROVALS_BY_IDS } from "../../graphql/tt-approvals.queries";
 import {
+  selectAuthLevel,
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
+  authLevel: selectAuthLevel,
 });
 
 export function TtApproveButton({
@@ -23,6 +26,7 @@ export function TtApproveButton({
   currentUser,
   selectedTickets,
   disabled,
+  authLevel,
   loadingCallback,
   completedCallback,
   refetch,
@@ -83,7 +87,14 @@ export function TtApproveButton({
   };
 
   return (
-    <Button onClick={handleQbxml} loading={loading} disabled={disabled}>
+    <Button
+      onClick={handleQbxml}
+      loading={loading}
+      disabled={
+        disabled ||
+        !HasRbacAccess({ bodyshop, authLevel, action: "ttapprovals:approve" })
+      }
+    >
       {t("tt_approvals.actions.approveselected")}
     </Button>
   );
diff --git a/client/src/pages/shop/shop.page.component.jsx b/client/src/pages/shop/shop.page.component.jsx
index a6e2f71ef..2db5d63d0 100644
--- a/client/src/pages/shop/shop.page.component.jsx
+++ b/client/src/pages/shop/shop.page.component.jsx
@@ -46,9 +46,12 @@ 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>
+        {
+          bodyshop.md_tasks_presets.enable_tasks && 
+          <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/translations/en_us/common.json b/client/src/translations/en_us/common.json
index cdb142f65..716e0f4f3 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -341,10 +341,12 @@
 				"md_payment_types": "Payment Types",
 				"md_referral_sources": "Referral Sources",
 				"md_tasks_presets": {
+					"enable_tasks": "Enable Task Claiming",
 					"hourstype": "Hour Types",
 					"memo": "Time Ticket Memo",
 					"name": "Preset Name",
-					"percent": "Percent"
+					"percent": "Percent",
+					"use_approvals": "Use Time Ticket Approval Queue"
 				},
 				"messaginglabel": "Messaging Preset Label",
 				"messagingtext": "Messaging Preset Text",
@@ -521,12 +523,12 @@
 					"dailyhrslimit": "Daily Incoming Hours Limit"
 				},
 				"ssbuckets": {
+					"color": "Job Color",
 					"gte": "Greater Than/Equal to (hrs)",
 					"id": "ID",
 					"label": "Label",
 					"lt": "Less than (hrs)",
-					"target": "Target (count)",
-					"color": "Job Color"
+					"target": "Target (count)"
 				},
 				"state": "Province/State",
 				"state_tax_id": "Provincial/State Tax ID (PST,  QST)",
@@ -2399,6 +2401,7 @@
 						"qbo_usa": "QBO USA"
 					}
 				},
+				"cardcolor": "Card Colors",
 				"cardsettings": "Card Settings",
 				"clm_no": "Claim Number",
 				"comment": "Comment",
@@ -2409,6 +2412,7 @@
 				"ins_co_nm": "Insurance Company Name",
 				"jobdetail": "Job Details",
 				"laborhrs": "Labor Hours",
+				"legend": "Legend:",
 				"note": "Production Note",
 				"ownr_nm": "Owner Name",
 				"paintpriority": "P/P",
@@ -2421,9 +2425,7 @@
 				"sublets": "Sublets",
 				"totalhours": "Total Hrs ",
 				"touchtime": "T/T",
-				"viewname": "View Name",
-				"legend": "Legend:",
-				"cardcolor": "Card Colors"
+				"viewname": "View Name"
 			},
 			"successes": {
 				"removed": "Job removed from production."
@@ -2815,6 +2817,10 @@
 		"tt_approvals": {
 			"actions": {
 				"approveselected": "Approve Selected"
+			},
+			"labels": {
+				"approval_queue_in_use": "Time tickets will be added to the approval queue.",
+				"calculate": "Calculate"
 			}
 		},
 		"user": {
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 304896a0b..6dbf16601 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -341,10 +341,12 @@
 				"md_payment_types": "",
 				"md_referral_sources": "",
 				"md_tasks_presets": {
+					"enable_tasks": "",
 					"hourstype": "",
 					"memo": "",
 					"name": "",
-					"percent": ""
+					"percent": "",
+					"use_approvals": ""
 				},
 				"messaginglabel": "",
 				"messagingtext": "",
@@ -521,6 +523,7 @@
 					"dailyhrslimit": ""
 				},
 				"ssbuckets": {
+					"color": "",
 					"gte": "",
 					"id": "",
 					"label": "",
@@ -2398,6 +2401,7 @@
 						"qbo_usa": ""
 					}
 				},
+				"cardcolor": "",
 				"cardsettings": "",
 				"clm_no": "",
 				"comment": "",
@@ -2408,6 +2412,7 @@
 				"ins_co_nm": "",
 				"jobdetail": "",
 				"laborhrs": "",
+				"legend": "",
 				"note": "",
 				"ownr_nm": "",
 				"paintpriority": "",
@@ -2812,6 +2817,10 @@
 		"tt_approvals": {
 			"actions": {
 				"approveselected": ""
+			},
+			"labels": {
+				"approval_queue_in_use": "",
+				"calculate": ""
 			}
 		},
 		"user": {
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 3ad45588f..66d5df8c9 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -341,10 +341,12 @@
 				"md_payment_types": "",
 				"md_referral_sources": "",
 				"md_tasks_presets": {
+					"enable_tasks": "",
 					"hourstype": "",
 					"memo": "",
 					"name": "",
-					"percent": ""
+					"percent": "",
+					"use_approvals": ""
 				},
 				"messaginglabel": "",
 				"messagingtext": "",
@@ -521,6 +523,7 @@
 					"dailyhrslimit": ""
 				},
 				"ssbuckets": {
+					"color": "",
 					"gte": "",
 					"id": "",
 					"label": "",
@@ -2398,6 +2401,7 @@
 						"qbo_usa": ""
 					}
 				},
+				"cardcolor": "",
 				"cardsettings": "",
 				"clm_no": "",
 				"comment": "",
@@ -2408,6 +2412,7 @@
 				"ins_co_nm": "",
 				"jobdetail": "",
 				"laborhrs": "",
+				"legend": "",
 				"note": "",
 				"ownr_nm": "",
 				"paintpriority": "",
@@ -2812,6 +2817,10 @@
 		"tt_approvals": {
 			"actions": {
 				"approveselected": ""
+			},
+			"labels": {
+				"approval_queue_in_use": "",
+				"calculate": ""
 			}
 		},
 		"user": {

From 3d03de193effab9e359cd91ce8d32ad6061895f1 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Thu, 25 May 2023 15:23:14 -0700
Subject: [PATCH 3/3] Add commit and uncommit functionality.

---
 bodyshop_translations.babel                   |  84 ++++++++++++++
 .../employee-search-select.component.jsx      |   6 +-
 .../time-ticket-modal.component.jsx           |   9 +-
 .../time-ticket-modal.container.jsx           |  17 ++-
 .../time-ticket-task-modal.component.jsx      |  11 +-
 .../time-tickets-commit-toggle.component.jsx  | 107 ++++++++++++++++++
 .../time-tickets-commit.component.jsx         |  95 ++++++++++++++++
 client/src/graphql/timetickets.queries.js     |  49 ++++++++
 .../time-tickets/time-tickets.container.jsx   |   2 +
 client/src/translations/en_us/common.json     |   6 +-
 client/src/translations/es/common.json        |   6 +-
 client/src/translations/fr/common.json        |   6 +-
 12 files changed, 381 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx
 create mode 100644 client/src/components/time-tickets-commit/time-tickets-commit.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index ab5b328f4..96e28fd18 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -44838,6 +44838,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>commit</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>commitone</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>enter</name>
                                         <definition_loaded>false</definition_loaded>
@@ -44880,6 +44922,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>uncommit</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>
@@ -45803,6 +45866,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>committed</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>created</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/employee-search-select/employee-search-select.component.jsx b/client/src/components/employee-search-select/employee-search-select.component.jsx
index 85dcc05e4..659a3556e 100644
--- a/client/src/components/employee-search-select/employee-search-select.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select.component.jsx
@@ -1,10 +1,10 @@
 import { Select, Space, Tag } from "antd";
-import React, { forwardRef } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 const { Option } = Select;
 //To be used as a form element only.
 
-const EmployeeSearchSelect = ({ options, ...props }, ref) => {
+const EmployeeSearchSelect = ({ options, ...props }) => {
   const { t } = useTranslation();
 
   return (
@@ -39,4 +39,4 @@ const EmployeeSearchSelect = ({ options, ...props }, ref) => {
     </Select>
   );
 };
-export default forwardRef(EmployeeSearchSelect);
+export default EmployeeSearchSelect;
diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
index 3f4519eb0..7b5647d6d 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -37,6 +37,7 @@ export function TimeTicketModalComponent({
   authLevel,
   employeeAutoCompleteOptions,
   isEdit,
+  disabled,
   employeeSelectDisabled,
 }) {
   const { t } = useTranslation();
@@ -50,7 +51,7 @@ export function TimeTicketModalComponent({
       <Select
         value={value === "timetickets.labels.shift" ? t(value) : value}
         {...props}
-        disabled={value === "timetickets.labels.shift"}
+        disabled={value === "timetickets.labels.shift" || disabled}
       >
         {emps &&
           emps.rates.map((item) => (
@@ -73,7 +74,7 @@ export function TimeTicketModalComponent({
       <Input
         value={value?.startsWith("timetickets.") ? t(value) : value}
         {...props}
-        disabled={value?.startsWith("timetickets.")}
+        disabled={value?.startsWith("timetickets.") || disabled}
       />
     );
   };
@@ -126,7 +127,7 @@ export function TimeTicketModalComponent({
           ]}
         >
           <EmployeeSearchSelect
-            disabled={employeeSelectDisabled}
+            disabled={employeeSelectDisabled || disabled}
             options={employeeAutoCompleteOptions}
             onSelect={(value) => {
               const emps =
@@ -278,6 +279,7 @@ export function TimeTicketModalComponent({
               <FormDateTimePicker
                 minuteStep={5}
                 disabled={
+                  disabled ||
                   !HasRbacAccess({
                     bodyshop,
                     authLevel,
@@ -316,6 +318,7 @@ export function TimeTicketModalComponent({
               <FormDateTimePicker
                 minuteStep={5}
                 disabled={
+                  disabled ||
                   !HasRbacAccess({
                     bodyshop,
                     authLevel,
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 463b2a80c..4ae2913b6 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
@@ -14,6 +14,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectTimeTicket } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import TimeTicketModalComponent from "./time-ticket-modal.component";
+import TimeTicketsCommitToggleComponent from "../time-tickets-commit-toggle/time-tickets-commit-toggle.component";
 
 const mapStateToProps = createStructuredSelector({
   timeTicketModal: selectTimeTicket,
@@ -174,7 +175,11 @@ export function TimeTicketModalContainer({
       footer={
         <span>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()}>
+          <Button
+            loading={loading}
+            disabled={timeTicketModal.context?.timeticket?.committed_at}
+            onClick={() => form.submit()}
+          >
             {t("general.actions.save")}
           </Button>
           {timeTicketModal.context && timeTicketModal.context.id ? null : (
@@ -198,6 +203,7 @@ export function TimeTicketModalContainer({
         autoComplete={"off"}
         form={form}
         onFinishFailed={() => setEnterAgain(false)}
+        disabled={timeTicketModal.context?.timeticket?.committed_at}
         initialValues={
           timeTicketModal.context.timeticket
             ? {
@@ -218,6 +224,9 @@ export function TimeTicketModalContainer({
         <PageHeader
           extra={
             <Space>
+              <TimeTicketsCommitToggleComponent
+                timeticket={timeTicketModal.context?.timeticket}
+              />
               <Button onClick={handleCancel}>
                 {t("general.actions.cancel")}
               </Button>
@@ -241,14 +250,16 @@ export function TimeTicketModalContainer({
         <TimeTicketModalComponent
           isEdit={timeTicketModal.context.id}
           form={form}
+          disabled={timeTicketModal.context?.timeticket?.committed_at}
           employeeAutoCompleteOptions={
             EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
           }
           employeeSelectDisabled={
-            timeTicketModal.context?.timeticket?.employeeid &&
+            timeTicketModal.context?.timeticket?.committed_at ||
+            (timeTicketModal.context?.timeticket?.employeeid &&
             !timeTicketModal.context.id
               ? true
-              : false
+              : false)
           }
         />
       </Form>
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
index 721311443..8608a26da 100644
--- 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
@@ -55,11 +55,7 @@ export function TimeTicketTaskModalComponent({
         calculateTimeTickets={calculateTimeTickets}
       />
       <Row gutter={[16, 16]}>
-        {bodyshop?.md_tasks_presets?.use_approvals && (
-          <Col span={24}>
-            <Alert message={t(".tt_approvals.labels.approval_queue_in_use")} />
-          </Col>
-        )}
+  
         <Col xl={12} lg={24}>
           <Form.Item
             name="jobid"
@@ -371,6 +367,11 @@ export function TimeTicketTaskModalComponent({
           );
         }}
       </Form.Item>
+      {bodyshop?.md_tasks_presets?.use_approvals && (
+        <Col span={24}>
+          <Alert message={t("tt_approvals.labels.approval_queue_in_use")} type="warning" />
+        </Col>
+      )}
     </div>
   );
 }
diff --git a/client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx b/client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx
new file mode 100644
index 000000000..9a85f6507
--- /dev/null
+++ b/client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx
@@ -0,0 +1,107 @@
+import { useMutation } from "@apollo/client";
+import { Button, notification } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  UPDATE_TIME_TICKET,
+  UPDATE_TIME_TICKETS,
+} from "../../graphql/timetickets.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setTimeTicketContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+});
+export function TimeTicketsCommit({
+  bodyshop,
+  currentUser,
+  timeticket,
+  disabled,
+  refetch,
+  setTimeTicketContext,
+}) {
+  const { t } = useTranslation();
+  const [updateTimeTicket] = useMutation(UPDATE_TIME_TICKET);
+
+  const [loading, setLoading] = useState(false);
+  const handleCommit = async () => {
+    setLoading(true);
+    try {
+      const ticketUpdate = timeticket.committed_at
+        ? { commited_by: null, committed_at: null }
+        : {
+            commited_by: currentUser.email,
+            committed_at: moment(),
+          };
+
+      const result = await updateTimeTicket({
+        variables: {
+          timeticketId: timeticket.id,
+          timeticket: ticketUpdate,
+        },
+        update(cache) {
+          cache.modify({
+            fields: {
+              timeTickets(existingtickets, { readField }) {
+                return existingtickets.map((ticket) => {
+                  if (timeticket.id === readField("id", ticket)) {
+                    return {
+                      ...ticket,
+                      ...ticketUpdate,
+                    };
+                  }
+                  return ticket;
+                });
+              },
+            },
+          });
+        },
+      });
+      if (result.errors) {
+        notification.open({
+          type: "error",
+          message: t("timetickets.errors.creating", {
+            message: JSON.stringify(result.errors),
+          }),
+        });
+      } else {
+        setTimeTicketContext({
+          context: {
+            id: timeticket.id,
+            timeticket: result.data.update_timetickets.returning[0],
+          },
+        });
+        notification.open({
+          type: "success",
+          message: t("timetickets.successes.committed"),
+        });
+      }
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!timeticket?.id) return null;
+
+  return (
+    <Button onClick={handleCommit} loading={loading} disabled={!timeticket?.id}>
+      {timeticket?.committed_at
+        ? t("timetickets.actions.uncommit")
+        : t("timetickets.actions.commitone")}
+    </Button>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TimeTicketsCommit);
diff --git a/client/src/components/time-tickets-commit/time-tickets-commit.component.jsx b/client/src/components/time-tickets-commit/time-tickets-commit.component.jsx
new file mode 100644
index 000000000..87f550360
--- /dev/null
+++ b/client/src/components/time-tickets-commit/time-tickets-commit.component.jsx
@@ -0,0 +1,95 @@
+import { useMutation } from "@apollo/client";
+import { Button, notification } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+
+export function TimeTicketsCommit({
+  bodyshop,
+  currentUser,
+  timetickets,
+  disabled,
+  loadingCallback,
+  completedCallback,
+  refetch,
+}) {
+  const { t } = useTranslation();
+  const [updateTimeTickets] = useMutation(UPDATE_TIME_TICKETS);
+
+  const [loading, setLoading] = useState(false);
+  const handleCommit = async () => {
+    setLoading(true);
+    try {
+      const result = await updateTimeTickets({
+        variables: {
+          timeticketIds: timetickets.map((ticket) => ticket.id),
+          timeticket: {
+            commited_by: currentUser.email,
+            committed_at: moment(),
+          },
+        },
+        update(cache) {
+          cache.modify({
+            fields: {
+              timeTickets(existingtickets, { readField }) {
+                const modifiedIds = timetickets.map((ticket) => ticket.id);
+                return existingtickets.map((ticket) => {
+                  if (modifiedIds.includes(readField("id", ticket))) {
+                    return {
+                      ...ticket,
+                      commited_by: currentUser.email,
+                      committed_at: moment(),
+                    };
+                  }
+                  return ticket;
+                });
+              },
+            },
+          });
+        },
+      });
+      if (result.errors) {
+        notification.open({
+          type: "error",
+          message: t("timetickets.errors.creating", {
+            message: JSON.stringify(result.errors),
+          }),
+        });
+      } else {
+        notification.open({
+          type: "success",
+          message: t("timetickets.successes.committed"),
+        });
+        if (!!completedCallback) completedCallback([]);
+        if (!!loadingCallback) loadingCallback(false);
+      }
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleCommit}
+      loading={loading}
+      disabled={disabled || timetickets?.length === 0}
+    >
+      {t("timetickets.actions.commit", { count: timetickets?.length })}
+    </Button>
+  );
+}
+
+export default connect(mapStateToProps, null)(TimeTicketsCommit);
diff --git a/client/src/graphql/timetickets.queries.js b/client/src/graphql/timetickets.queries.js
index 2d8c0c452..a62032f40 100644
--- a/client/src/graphql/timetickets.queries.js
+++ b/client/src/graphql/timetickets.queries.js
@@ -15,6 +15,8 @@ export const QUERY_TICKETS_BY_JOBID = gql`
       memo
       jobid
       flat_rate
+      commited_by
+      committed_at
       employee {
         employee_number
         first_name
@@ -44,6 +46,8 @@ export const QUERY_TIME_TICKETS_IN_RANGE = gql`
       memo
       jobid
       flat_rate
+      commited_by
+      committed_at
       job {
         id
         ro_number
@@ -86,6 +90,8 @@ export const QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE = gql`
       productivehrs
       memo
       jobid
+      commited_by
+      committed_at
       flat_rate
       job {
         id
@@ -119,6 +125,8 @@ export const QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE = gql`
       memo
       jobid
       flat_rate
+      commited_by
+      committed_at
       job {
         id
         ro_number
@@ -161,6 +169,8 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
       committed_at
       commited_by
       flat_rate
+      commited_by
+      committed_at
       job {
         id
         ro_number
@@ -221,6 +231,8 @@ export const INSERT_NEW_TIME_TICKET = gql`
         date
         memo
         flat_rate
+        commited_by
+        committed_at
       }
     }
   }
@@ -244,6 +256,8 @@ export const INSERT_TIME_TICKET_AND_APPROVE = gql`
         date
         memo
         flat_rate
+        commited_by
+        committed_at
       }
     }
     update_tt_approval_queue(
@@ -254,6 +268,7 @@ export const INSERT_TIME_TICKET_AND_APPROVE = gql`
         id
         approved_at
         approved_at
+
       }
     }
   }
@@ -282,6 +297,38 @@ export const UPDATE_TIME_TICKET = gql`
         date
         flat_rate
         memo
+        committed_at
+        commited_by
+      }
+    }
+  }
+`;
+
+export const UPDATE_TIME_TICKETS = gql`
+  mutation UPDATE_TIME_TICKETS(
+    $timeticketIds: [uuid!]!
+    $timeticket: timetickets_set_input!
+  ) {
+    update_timetickets(
+      where: { id: { _in: $timeticketIds } }
+      _set: $timeticket
+    ) {
+      returning {
+        id
+        clockon
+        clockoff
+        employeeid
+        productivehrs
+        actualhrs
+        ciecacode
+        created_at
+        updated_at
+        jobid
+        date
+        flat_rate
+        memo
+        committed_at
+        commited_by
       }
     }
   }
@@ -306,6 +353,8 @@ export const QUERY_ACTIVE_TIME_TICKETS = gql`
       cost_center
       flat_rate
       jobid
+      commited_by
+      committed_at
       job {
         id
         ownr_fn
diff --git a/client/src/pages/time-tickets/time-tickets.container.jsx b/client/src/pages/time-tickets/time-tickets.container.jsx
index 03cfdda50..0730fca95 100644
--- a/client/src/pages/time-tickets/time-tickets.container.jsx
+++ b/client/src/pages/time-tickets/time-tickets.container.jsx
@@ -19,6 +19,7 @@ import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
+import TimeTicketsCommit from "../../components/time-tickets-commit/time-tickets-commit.component";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -74,6 +75,7 @@ export function TimeTicketsContainer({
               <Space wrap>
                 <TimeTicketsAttendanceTable />
                 <TimeTicketsPayrollTable />
+                <TimeTicketsCommit timetickets={data ? data.timetickets : []} />
                 <TimeTicketsDatesSelector />
               </Space>
             }
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 716e0f4f3..0715e728e 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -2654,8 +2654,11 @@
 				"claimtasks": "Claim Tasks",
 				"clockin": "Clock In",
 				"clockout": "Clock Out",
+				"commit": "Commit Tickets ({{count}})",
+				"commitone": "Commit",
 				"enter": "Enter New Time Ticket",
-				"printemployee": "Print Time Tickets"
+				"printemployee": "Print Time Tickets",
+				"uncommit": "Uncommit"
 			},
 			"errors": {
 				"clockingin": "Error while clocking in. {{message}}",
@@ -2707,6 +2710,7 @@
 			"successes": {
 				"clockedin": "Clocked in successfully.",
 				"clockedout": "Clocked out successfully.",
+				"committed": "Time Tickets Committed Successfully",
 				"created": "Time ticket entered successfully.",
 				"deleted": "Time ticket deleted successfully."
 			},
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 6dbf16601..1a1d7eb30 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -2654,8 +2654,11 @@
 				"claimtasks": "",
 				"clockin": "",
 				"clockout": "",
+				"commit": "",
+				"commitone": "",
 				"enter": "",
-				"printemployee": ""
+				"printemployee": "",
+				"uncommit": ""
 			},
 			"errors": {
 				"clockingin": "",
@@ -2707,6 +2710,7 @@
 			"successes": {
 				"clockedin": "",
 				"clockedout": "",
+				"committed": "",
 				"created": "",
 				"deleted": ""
 			},
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 66d5df8c9..ee4cf4e7c 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -2654,8 +2654,11 @@
 				"claimtasks": "",
 				"clockin": "",
 				"clockout": "",
+				"commit": "",
+				"commitone": "",
 				"enter": "",
-				"printemployee": ""
+				"printemployee": "",
+				"uncommit": ""
 			},
 			"errors": {
 				"clockingin": "",
@@ -2707,6 +2710,7 @@
 			"successes": {
 				"clockedin": "",
 				"clockedout": "",
+				"committed": "",
 				"created": "",
 				"deleted": ""
 			},