Refactor task claiming and implement basic claim functionality.

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -1,5 +1,5 @@
-import { EditFilled } from "@ant-design/icons";
 import { Button, Card, Col, Row, Space, Table, Typography } from "antd";
+import axios from "axios";
 import _ from "lodash";
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -8,12 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort } from "../../utils/sorters";
-import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
 import "./labor-allocations-table.styles.scss";
-import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
-import axios from "axios";
-import { onlyUnique } from "../../utils/arrayHelper";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -211,28 +206,33 @@ export function PayrollLaborAllocationsTable({
   return (
     <Row gutter={[16, 16]}>
       <Col span={24}>
-        <Button
-          onClick={async () => {
-            const { data } = await axios.post("/payroll/payall", {
-              jobid: jobId,
-            });
-            refetch();
-          }}
+        <Card
+          title={t("jobs.labels.laborallocations")}
+          extra={
+            <Space>
+              <Button
+                onClick={async () => {
+                  await axios.post("/payroll/payall", {
+                    jobid: jobId,
+                  });
+                }}
+              >
+                (TODO: Add Label) Pay All
+              </Button>
+              <Button
+                onClick={async () => {
+                  const { data } = await axios.post("/payroll/calculatelabor", {
+                    jobid: jobId,
+                  });
+                  setTotals(data);
+                  refetch();
+                }}
+              >
+                (TODO: Add Label) Calculate Labor
+              </Button>
+            </Space>
+          }
         >
-          Pay All Test
-        </Button>
-        <Button
-          onClick={async () => {
-            const { data } = await axios.post("/payroll/calculatelabor", {
-              jobid: jobId,
-            });
-            setTotals(data);
-            refetch();
-          }}
-        >
-          Calculate Labor
-        </Button>
-        <Card title={t("jobs.labels.laborallocations")}>
           <Table
             columns={columns}
             rowKey={(record) => `${record.cost_center} ${record.mod_lbr_ty}`}