bodyshop/client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx

import { Col, Row } from "antd";
import React, { useState } from "react";
import JobReconciliationBillsTable from "../job-reconciliation-bills-table/job-reconciliation-bills-table.component";
import JobReconciliationPartsTable from "../job-reconciliation-parts-table/job-reconciliation-parts-table.component";
import JobReconciliationTotals from "../job-reconciliation-totals/job-reconciliation-totals.component";

export default function JobReconciliationModalComponent({ job, bills }) {
  const jobLineState = useState([]);
  const billLineState = useState([]);

  const invoiceLineData =
    bills
      .map((i) =>
        i.billlines.map((il) => {
          return { ...il, bill: i };
        })
      )
      .flat() || [];

  const jobLineData = job.joblines.filter(
    (j) =>
      (j.part_type !== "PAE" && j.act_price !== 0 && j.part_qty !== 0) ||
      j.misc_amt !== 0 ||
      (j.line_desc &&
        j.line_desc.toLowerCase().includes("towing") &&
        j.lbr_op === "OP13") ||
      j.db_ref === "936004" //ADD SHIPPING LINE.
  );

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: 1 }}>
        <Row gutter={8}>
          <Col span={12}>
            <JobReconciliationPartsTable
              jobLineData={jobLineData}
              jobLineState={jobLineState}
            />
          </Col>
          <Col span={12}>
            <JobReconciliationBillsTable
              invoiceLineData={invoiceLineData}
              billLineState={billLineState}
            />
          </Col>
        </Row>
      </div>
      <Row>
        <JobReconciliationTotals
          jobLines={jobLineData}
          jobLineState={jobLineState}
          billLines={invoiceLineData}
          billLineState={billLineState}
        />
      </Row>
    </div>
  );
}