IO-2059 Add invoice history to job line expander.

bodyshop_translations.babel

@@ -37395,6 +37395,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>parts_invoice_label_single</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>parts_label_multiple</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -6,6 +6,8 @@ import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { Link } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import DataLabel from "../data-label/data-label.component";
 
 export default function JobLinesExpander({ jobline, jobid }) {
   const { t } = useTranslation();
@@ -48,7 +50,46 @@ export default function JobLinesExpander({ jobline, jobid }) {
           )}
         </Timeline>
       </Col>
-      <Col md={24} lg={12}></Col>
+      <Col md={24} lg={12}>
+        <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+        <Timeline>
+          {data.billlines.length > 0 ? (
+            data.billlines.map((line) => (
+              <Timeline.Item key={line.id}>
+                <Row wrap>
+                  <Col span={4}>
+                    <Link
+                      to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
+                    >
+                      {line.bill.invoice_number}
+                    </Link>
+                  </Col>
+                  <Col span={4}>
+                    <span>
+                      {`${t("billlines.fields.actual_price")}: `}
+                      <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
+                    </span>
+                  </Col>
+                  <Col span={4}>
+                    <span>
+                    {`${t("billlines.fields.actual_cost")}: `}
+                      <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
+                    </span>
+                  </Col>
+                  <Col span={4}>
+                    <DateFormatter>{line.bill.date}</DateFormatter>
+                  </Col>
+                  <Col span={4}> {line.bill.vendor.name}</Col>
+                </Row>
+              </Timeline.Item>
+            ))
+          ) : (
+            <Timeline.Item>
+              {t("parts_orders.labels.notyetordered")}
+            </Timeline.Item>
+          )}
+        </Timeline>
+      </Col>
     </Row>
   );
 }

client/src/graphql/jobs.queries.js

@@ -2120,6 +2120,22 @@ export const DELETE_RELATED_RO = gql`
 `;
 export const GET_JOB_LINE_ORDERS = gql`
   query GET_JOB_LINE_ORDERS($joblineid: uuid!) {
+    billlines(where: { joblineid: { _eq: $joblineid } }) {
+      actual_cost
+      actual_price
+      billid
+      quantity
+      bill {
+        id
+        invoice_number
+        date
+        vendorid
+        vendor {
+          id
+          name
+        }
+      }
+    }
     parts_order_lines(where: { job_line_id: { _eq: $joblineid } }) {
       id
       act_price

client/src/translations/en_us/common.json

@@ -2215,6 +2215,7 @@
 				"mpi_eglass_auth": "MPI - eGlass Auth",
 				"mpi_final_acct_sheet": "MPI - Final Accounting Sheet",
 				"paint_grid": "Paint Grid",
+				"parts_invoice_label_single": "Parts Label Single",
 				"parts_label_multiple": "Parts Label - Multi",
 				"parts_label_single": "Parts Label - Single",
 				"parts_list": "Parts List",

client/src/translations/es/common.json

@@ -2215,6 +2215,7 @@
 				"mpi_eglass_auth": "",
 				"mpi_final_acct_sheet": "",
 				"paint_grid": "",
+				"parts_invoice_label_single": "",
 				"parts_label_multiple": "",
 				"parts_label_single": "",
 				"parts_list": "",

client/src/translations/fr/common.json

@@ -2215,6 +2215,7 @@
 				"mpi_eglass_auth": "",
 				"mpi_final_acct_sheet": "",
 				"paint_grid": "",
+				"parts_invoice_label_single": "",
 				"parts_label_multiple": "",
 				"parts_label_single": "",
 				"parts_list": "",