BOD-23 Added labor pages tab + finalized time ticket tab + created allocation calculations

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

@@ -1,15 +1,16 @@
-import { DatePicker, Form, Input, Switch } from "antd";
+import { DatePicker, Form, InputNumber, Input, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import JobSearchSelect from "../job-search-select/job-search-select.component";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 
 export default function TimeTicketModalComponent({
   form,
   roAutoCompleteOptions,
   employeeAutoCompleteOptions,
-  loadJobLines,
+  loadLineTicketData,
+  lineTicketData,
   responsibilityCenters,
 }) {
   const { t } = useTranslation();
@@ -19,7 +20,7 @@ export default function TimeTicketModalComponent({
       <div style={{ display: "flex" }}>
         <Form.Item
           name="jobid"
-          label={t("invoices.fields.ro_number")}
+          label={t("timetickets.fields.ro_number")}
           rules={[
             {
               required: true,
@@ -31,7 +32,7 @@ export default function TimeTicketModalComponent({
             options={roAutoCompleteOptions}
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null) {
-                loadJobLines({
+                loadLineTicketData({
                   variables: { id: form.getFieldValue("jobid") },
                 });
               }
@@ -51,21 +52,10 @@ export default function TimeTicketModalComponent({
           <EmployeeSearchSelect options={employeeAutoCompleteOptions} />
         </Form.Item>
       </div>
+
       <div style={{ display: "flex" }}>
         <Form.Item
-          label={t("invoices.fields.invoice_number")}
-          name="invoice_number"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("invoices.fields.date")}
+          label={t("timetickets.fields.date")}
           name="date"
           rules={[
             {
@@ -77,15 +67,8 @@ export default function TimeTicketModalComponent({
           <DatePicker />
         </Form.Item>
         <Form.Item
-          label={t("invoices.fields.is_credit_memo")}
-          name="is_credit_memo"
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label={t("invoices.fields.total")}
-          name="total"
+          label={t("timetickets.fields.productivehrs")}
+          name="productivehrs"
           rules={[
             {
               required: true,
@@ -93,7 +76,52 @@ export default function TimeTicketModalComponent({
             },
           ]}
         >
-          <CurrencyInput />
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("timetickets.fields.actualhrs")}
+          name="actualhrs"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          name="cost_center"
+          label={t("timetickets.fields.cost_center")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select
+            style={{ width: "150px" }}
+            onChange={() => {
+              console.log("Changed.");
+            }}
+          >
+            {responsibilityCenters.costs.map((item) => (
+              <Select.Option key={item}>{item}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="ciecacode"
+          label={t("timetickets.fields.ciecacode")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input disabled />
         </Form.Item>
       </div>
 
@@ -104,6 +132,11 @@ export default function TimeTicketModalComponent({
       >
         Get Them Values
       </button>
+
+      <LaborAllocationsTable
+        joblines={lineTicketData.joblines}
+        timetickets={lineTicketData.timetickets}
+      />
     </div>
   );
 }