added expandable row in payments table

client/src/components/job-payments/job-payments.component.jsx

@@ -14,6 +14,7 @@ import { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import DataLabel from "../data-label/data-label.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import PaymentExpandedRowComponent from "../payment-expanded-row/payment-expanded-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -166,7 +167,7 @@ export function JobPayments({
           <Button
             onClick={() =>
               setCardPaymentContext({
-                actions: { refetch: refetch },
+                actions: { refetch },
                 context: { jobid: job.id, balance },
               })
             }
@@ -191,6 +192,11 @@ export function JobPayments({
         scroll={{
           x: true,
         }}
+        expandable={{
+          expandedRowRender: (record) => (
+            <PaymentExpandedRowComponent record={record} />
+          ),
+        }}
         summary={() => (
           <>
             <Table.Summary.Row>