IO-2552 PVRT Button Spacing and Alignment

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import { Button, Form, InputNumber, Popover } from "antd";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { useTranslation } from "react-i18next";
 import { CalculatorFilled } from "@ant-design/icons";
+import { Button, Form, InputNumber, Popover, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 export default function CABCpvrtCalculator({ disabled, form }) {
   const [visibility, setVisibility] = useState(false);
 
@@ -26,10 +26,14 @@ export default function CABCpvrtCalculator({ disabled, form }) {
         <Form.Item name="days" label={t("jobs.labels.ca_bc_pvrt.days")}>
           <InputNumber precision={0} min={0} />
         </Form.Item>
-        <Button type="primary" htmlType="submit">
-          {t("general.actions.calculate")}
-        </Button>
-        <Button onClick={() => setVisibility(false)}>Close</Button>
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <Space>
+            <Button type="primary" htmlType="submit">
+              {t("general.actions.calculate")}
+            </Button>
+            <Button onClick={() => setVisibility(false)}>Close</Button>
+          </Space>
+        </div>
       </Form>
     </div>
   );

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

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Row, Skeleton, Timeline, Typography } from "antd";
+import { Col, Divider, Row, Skeleton, Space, Timeline, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -31,27 +31,15 @@ export default function JobLinesExpander({ jobline, jobid }) {
           {data.parts_order_lines.length > 0 ? (
             data.parts_order_lines.map((line) => (
               <Timeline.Item key={line.id}>
-                <Row wrap>
-                  <Col span={4}>
-                    <Link
-                      to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
-                    >
-                      {line.parts_order.order_number}
-                    </Link>
-                  </Col>
-                  <Col span={4}>
-                    <DateFormatter>{line.parts_order.order_date}</DateFormatter>
-                  </Col>
-                  <Col span={4}>{line.parts_order.vendor.name}</Col>
-                  {line.backordered_eta ? (
-                    <Col span={4}>
-                      <span>
-                        {`${t("parts_orders.fields.backordered_eta")}: `}
-                        <DateFormatter>{line.backordered_eta}</DateFormatter>
-                      </span>
-                    </Col>
-                  ) : null}
-                </Row>
+                <Space split={<Divider type="vertical" />} wrap>
+                  <Link
+                    to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
+                  >
+                    {line.parts_order.order_number}
+                  </Link>
+                  <DateFormatter>{line.parts_order.order_date}</DateFormatter>
+                  {line.parts_order.vendor.name}
+                </Space>
               </Timeline.Item>
             ))
           ) : (
@@ -83,7 +71,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
                   </Col>
                   <Col span={4}>
                     <span>
-                      {`${t("billlines.fields.actual_cost")}: `}
+                    {`${t("billlines.fields.actual_cost")}: `}
                       <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
                     </span>
                   </Col>

client/src/graphql/jobs.queries.js

@@ -2205,8 +2205,6 @@ export const GET_JOB_LINE_ORDERS = gql`
     parts_order_lines(where: { job_line_id: { _eq: $joblineid } }) {
       id
       act_price
-      backordered_eta
-      backordered_on
       parts_order {
         id
         order_date