feature/IO-3587-Commision-Cut - Additional Testing / Test Harness improvements

client/src/components/_test/test.page.jsx

@@ -1,7 +1,11 @@
-import { Button } from "antd";
+import { Button, Card, Divider, Form, Space, Typography } from "antd";
 import { connect } from "react-redux";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { setModalContext } from "../../redux/modals/modals.actions";
+import { PayrollLaborAllocationsTable } from "../labor-allocations-table/labor-allocations-table.payroll.component.jsx";
+import { TimeTicketTaskModalComponent } from "../time-ticket-task-modal/time-ticket-task-modal.component.jsx";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -9,8 +13,109 @@ const mapDispatchToProps = (dispatch) => ({
   setRefundPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "refund_payment" }))
 });
 
+const commissionCutFixture = {
+  bodyshop: {
+    features: {
+      timetickets: true
+    },
+    employees: [
+      { id: "emp-1", first_name: "Avery", last_name: "Johnson" },
+      { id: "emp-2", first_name: "Morgan", last_name: "Lee" }
+    ],
+    md_tasks_presets: {
+      presets: [
+        {
+          name: "Body Prep",
+          percent: 50,
+          hourstype: ["LAA", "LAB"],
+          nextstatus: "In Progress"
+        }
+      ]
+    }
+  },
+  jobId: "fixture-job-1",
+  joblines: [
+    {
+      id: "line-1",
+      mod_lbr_ty: "LAA",
+      mod_lb_hrs: 4,
+      assigned_team: "team-1",
+      convertedtolbr: false
+    }
+  ],
+  previewValues: {
+    task: "Body Prep",
+    timetickets: [
+      {
+        employeeid: "emp-1",
+        cost_center: "Body",
+        ciecacode: "LAA",
+        productivehrs: 2,
+        rate: 40,
+        payoutamount: 80,
+        payout_context: {
+          payout_method: "commission"
+        }
+      },
+      {
+        employeeid: "emp-2",
+        cost_center: "Refinish",
+        ciecacode: "LAB",
+        productivehrs: 1,
+        rate: 28,
+        payoutamount: 28,
+        payout_context: {
+          payout_method: "hourly"
+        }
+      }
+    ]
+  }
+};
+
+function CommissionCutHarness() {
+  const [form] = Form.useForm();
+
+  return (
+    <Space direction="vertical" size="large" style={{ width: "100%" }}>
+      <Typography.Title level={2}>Commission Cut Test Harness</Typography.Title>
+      <Typography.Paragraph>
+        This fixture keeps commission-cut browser checks stable by rendering representative payroll and preview UI with
+        local data.
+      </Typography.Paragraph>
+      <Card title="Payroll Labor Allocations">
+        <PayrollLaborAllocationsTable
+          jobId={commissionCutFixture.jobId}
+          joblines={commissionCutFixture.joblines}
+          timetickets={[]}
+          bodyshop={commissionCutFixture.bodyshop}
+          adjustments={[]}
+          refetch={() => {}}
+        />
+      </Card>
+      <Divider />
+      <Card title="Claim Task Preview">
+        <Form form={form} initialValues={commissionCutFixture.previewValues} layout="vertical">
+          <TimeTicketTaskModalComponent
+            bodyshop={commissionCutFixture.bodyshop}
+            form={form}
+            loading={false}
+            completedTasks={[]}
+            unassignedHours={1.25}
+          />
+        </Form>
+      </Card>
+    </Space>
+  );
+}
+
 function Test({ setRefundPaymentContext, refundPaymentModal }) {
+  const search = queryString.parse(useLocation().search);
   console.log("refundPaymentModal", refundPaymentModal);
+
+  if (search.fixture === "commission-cut") {
+    return <CommissionCutHarness />;
+  }
+
   return (
     <div>
       <Button