IO-2206 Payroll UI updates for discussions with Rome Clients.

client/src/components/labor-allocations-table/labor-allocations-table.utility.js

@@ -6,10 +6,6 @@ export const CalculateAllocationsTotals = (
   timetickets,
   adjustments = []
 ) => {
-  console.log(
-    "🚀  ~ file: labor-allocations-table.utility.js  ~ line 9  ~ adjustments",
-    adjustments
-  );
   const responsibilitycenters = bodyshop.md_responsibility_centers;
   const jobCodes = joblines.map((item) => item.mod_lbr_ty);
   //.filter((value, index, self) => self.indexOf(value) === index && !!value);

client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx

@@ -0,0 +1,142 @@
+import { DownOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Checkbox,
+  Col,
+  Form,
+  InputNumber,
+  Popover,
+  Radio,
+  Row,
+  Space,
+  Spin,
+} from "antd";
+import React, { useState } from "react";
+import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
+import { useQuery } from "@apollo/client";
+
+export default function TimeTicketCalculatorComponent({
+  setProductiveHours,
+
+  jobid,
+}) {
+  const { loading, data: lineTicketData } = useQuery(GET_JOB_INFO_DRAW_CALCULATIONS, {
+    variables: { id: jobid },
+    skip: !jobid,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
+  const [visible, setVisible] = useState(false);
+  const handleOpenChange = (flag) => setVisible(flag);
+  const handleFinish = ({ type, hourstype, percent }) => {
+    //setProductiveHours(values);
+    //setVisible(false);
+    const eligibleHours = Array.isArray(hourstype)
+      ? lineTicketData.joblines.reduce(
+          (acc, val) =>
+            acc + (hourstype.includes(val.mod_lbr_ty) ? val.mod_lb_hrs : 0),
+          0
+        )
+      : lineTicketData.joblines.reduce(
+          (acc, val) =>
+            acc + (hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0),
+          0
+        );
+    if (type === "draw") {
+      setProductiveHours(eligibleHours * (percent / 100));
+    } else if (type === "cut") {
+      setProductiveHours(eligibleHours * (percent / 100));
+      console.log(
+        "Cut selected, rate set to: ",
+        lineTicketData.jobs_by_pk[`rate_${hourstype.toLowerCase()}`]
+      );
+    }
+  };
+
+  const popContent = (
+    <Spin spinning={loading}>
+      <Form onFinish={handleFinish}>
+        <Form.Item name="type">
+          <Radio.Group>
+            <Radio.Button value="draw">Draw</Radio.Button>
+            <Radio.Button value="cut">Cut of Sale</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+
+        <Form.Item noStyle shouldUpdate>
+          {({ getFieldValue }) => (
+            <Form.Item name="hourstype">
+              {getFieldValue("type") === "draw" ? (
+                <Checkbox.Group>
+                  <Row>
+                    <Col span={8}>
+                      <Checkbox value="LAB" style={{ lineHeight: "32px" }}>
+                        Body
+                      </Checkbox>
+                    </Col>
+                    <Col span={8}>
+                      <Checkbox value="LAR" style={{ lineHeight: "32px" }}>
+                        Refinish
+                      </Checkbox>
+                    </Col>
+                    <Col span={8}>
+                      <Checkbox value="LAM" style={{ lineHeight: "32px" }}>
+                        Mechanical
+                      </Checkbox>
+                    </Col>
+                    <Col span={8}>
+                      <Checkbox value="LAF" style={{ lineHeight: "32px" }}>
+                        Frame
+                      </Checkbox>
+                    </Col>
+                    <Col span={8}>
+                      <Checkbox value="LAG" style={{ lineHeight: "32px" }}>
+                        Glass
+                      </Checkbox>
+                    </Col>
+                  </Row>
+                </Checkbox.Group>
+              ) : (
+                <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>
+
+        <Form.Item name="percent">
+          <InputNumber min={0} max={100} precision={1} addonAfter="%" />
+        </Form.Item>
+        <Button htmlType="submit">Calculate</Button>
+      </Form>
+    </Spin>
+  );
+
+  return (
+    <Popover
+      content={popContent}
+      trigger={["click"]}
+      open={visible}
+      onOpenChange={handleOpenChange}
+      placement="right"
+      destroyTooltipOnHide
+    >
+      <Button onClick={(e) => e.preventDefault()}>
+        <Space>
+          Draw Calculator
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Popover>
+  );
+}

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -18,6 +18,7 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
+import TimeTicketCalculatorComponent from "../time-ticket-calculator/time-ticket-calculator.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -172,20 +173,28 @@ export function TimeTicketModalComponent({
       <LayoutFormRow>
         <Form.Item shouldUpdate>
           {() => (
-            <Form.Item
-              label={t("timetickets.fields.productivehrs")}
-              name="productivehrs"
-              rules={[
-                {
-                  required:
-                    form.getFieldValue("cost_center") !==
-                    "timetickets.labels.shift",
-                  //message: t("general.validation.required"),
-                },
-              ]}
-            >
-              <InputNumber precision={1} />
-            </Form.Item>
+            <>
+              <Form.Item
+                label={t("timetickets.fields.productivehrs")}
+                name="productivehrs"
+                rules={[
+                  {
+                    required:
+                      form.getFieldValue("cost_center") !==
+                      "timetickets.labels.shift",
+                    //message: t("general.validation.required"),
+                  },
+                ]}
+              >
+                <InputNumber precision={1} />
+              </Form.Item>
+              <TimeTicketCalculatorComponent
+                jobid={form.getFieldValue("jobid")}
+                setProductiveHours={(productivehrs) =>
+                  form.setFieldsValue({ productivehrs })
+                }
+              />
+            </>
           )}
         </Form.Item>
         <Form.Item

client/src/graphql/jobs-lines.queries.js

@@ -76,6 +76,44 @@ export const GET_LINE_TICKET_BY_PK = gql`
   }
 `;
 
+export const GET_JOB_INFO_DRAW_CALCULATIONS = gql`
+  query GET_JOB_INFO_DRAW_CALCULATIONS($id: uuid!) {
+    jobs_by_pk(id: $id) {
+      id
+      lbr_adjustments
+      converted
+      rate_lab
+      rate_lad
+      rate_laa
+      rate_la1
+      rate_la2
+      rate_la3
+      rate_la4
+      rate_lau
+      rate_lar
+      rate_lag
+      rate_laf
+      rate_lam
+    }
+    joblines(where: { jobid: { _eq: $id }, removed: { _eq: false } }) {
+      id
+      line_desc
+      part_type
+      oem_partno
+      db_price
+      act_price
+      part_qty
+      mod_lbr_ty
+      db_hrs
+      mod_lb_hrs
+      lbr_op
+      lbr_amt
+      op_code_desc
+      convertedtolbr
+      convertedtolbr_data
+    }
+  }
+`;
 export const UPDATE_JOB_LINE_STATUS = gql`
   mutation UPDATE_JOB_LINE_STATUS(
     $ids: [uuid!]!