Claim Tasks WIP.

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);

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}

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);

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={[

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>
+  )
+}

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);

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>
+  );
+}

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);

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);

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}