Clean up of newly developed items.

src/components/molecules/jobs-claims-clerk/jobs-claims-clerk.molecule.jsx

@@ -36,12 +36,24 @@ export function JobsClaimClerk({ loading, job }) {
     <Card
       title={
         <Space>
-          Claims Clerk AI <Badge count={alertData.length}></Badge>
+          Claims Clerk AI <Badge count={alertData.length} />
         </Space>
       }
-      bordered={false}
     >
-      <Collapse items={alertData} bordered={false} />
+      <Collapse
+        //bordered={false}
+       // ghost
+        items={[
+          {
+            key: "main",
+            label:
+              alertData.length > 0
+                ? `Claims Clerk AI has found ${alertData.length} issues or savings opportunities on this job.`
+                : `Congratulations! Claims Clerk AI did not find any additional opportunities for this job.`,
+            children: <Collapse items={alertData} bordered={false} />
+          }
+        ]}
+      />
     </Card>
   );
 }

src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx

@@ -1,7 +1,7 @@
-import { WarningOutlined } from "@ant-design/icons";
+import { PrinterFilled, WarningOutlined } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
-import { Alert, Descriptions, Skeleton, Space, Tooltip } from "antd";
-import React, { useMemo } from "react";
+import { Alert, Button, Descriptions, Skeleton, Space, Tooltip } from "antd";
+import React, { useMemo, useRef } from "react";
 import { DateFormat, WhichRulesetToApply } from "../../../util/constants";
 import dayjs from "../../../util/day.js";
 import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";
@@ -12,11 +12,18 @@ import VehicleGroupAlertAtom from "../../atoms/vehicle-group-alert/vehicle-group
 import CloseDateDisplayMolecule from "../close-date-display/close-date-display.molecule";
 import JobGroupMolecule from "../job-group/job-group.molecule";
 import moment from "moment";
+import { useReactToPrint } from "react-to-print";
 
 export default function JobsDetailDescriptionMolecule({ loading, job }) {
   const hasQuantityGreaterThan1 = useMemo(() => {
     return job?.joblines?.find((jl) => !jl.ignore && jl.quantity > 1);
   }, [job]);
+
+  const handlePrint = useReactToPrint({
+    content: () => window.jobDetailRef.current,
+    bodyClass: "audit-container-print"
+  });
+
   if (loading) return <Skeleton active />;
   if (!job)
     return (
@@ -43,7 +50,10 @@ export default function JobsDetailDescriptionMolecule({ loading, job }) {
               />
             </Tooltip>
           ),
-          <DeleteJobAtom key="delete" jobId={job.id} />
+          <DeleteJobAtom key="delete" jobId={job.id} />,
+          <Button key="print" onClick={handlePrint}>
+            <PrinterFilled />
+          </Button>
         ]}
       >
         <Descriptions column={{ xxl: 5, xl: 4, lg: 3, md: 2, sm: 1, xs: 1 }}>

src/components/molecules/jobs-lines-table/jobs-lines-table.molecule.jsx

@@ -45,7 +45,11 @@ export default function JobLinesTableMolecule({ loading, job }) {
           {record.line_desc}
           {record.alerts &&
             record.alerts.length > 0 &&
-            record.alerts.map((alert) => <Tag color="red">{alert.key}</Tag>)}
+            record.alerts.map((alert) => (
+              <Tag key={`${record.id}-${alert.key}`} color="red">
+                {alert.key}
+              </Tag>
+            ))}
         </Space>
       )
     },
@@ -150,8 +154,8 @@ export default function JobLinesTableMolecule({ loading, job }) {
         dataSource={data}
         onChange={handleChange}
         scroll={{
-          x: true,
-          y: "20rem"
+          x: true
+          // y: "20rem"
         }}
       />
     </div>

src/components/molecules/jobs-targets-stats/jobs-targets-stats.molecule.jsx

@@ -44,8 +44,8 @@ export function JobsTargetsStatsMolecule({ loading, job, selectedJobTargetPc })
         display: "flex",
         alignItems: "center",
         justifyContent: "space-around",
-        marginTop: "2rem",
-        marginBottom: "1rem"
+        //marginTop: "2rem",
+        //marginBottom: "1rem"
       }}
     >
       <Space>

src/components/organisms/jobs-detail/jobs-detail.organism.jsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@apollo/client";
 import { Card, Result } from "antd";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_BY_PK } from "../../../graphql/jobs.queries";
@@ -28,6 +28,8 @@ export function JobsDetailOrganism({ selectedJobId, setSelectedJobTargetPc }) {
     variables: { jobId: selectedJobId },
     skip: !selectedJobId
   });
+  const jobDetailRef = useRef();
+  window.jobDetailRef = jobDetailRef;
 
   useEffect(() => {
     if (data && data.jobs_by_pk)
@@ -56,18 +58,20 @@ export function JobsDetailOrganism({ selectedJobId, setSelectedJobTargetPc }) {
   if (error) return <ErrorResultAtom title="Error fetching Job details.." errorMessage={JSON.stringify(error)} />;
 
   return (
-    <div className="jobs-detail-container">
+    <div ref={jobDetailRef} className="jobs-detail-container">
       <Card>
         <JobsDetailDescriptionMolecule loading={loading} job={data ? data.jobs_by_pk : null} />
       </Card>
-      <Card>
+      <Card title="Job Targets">
+        <JobsTargetsStatsMolecule loading={loading} job={data ? data.jobs_by_pk : null} />
+      </Card>
+
+      <JobsClaimClerk loading={loading} job={data ? data.jobs_by_pk : null} />
+
+      <Card title="Estimate Lines">
         <JobsLinesTableMolecule loading={loading} job={data ? data.jobs_by_pk : {}} />
       </Card>
-      <Card>
-        <JobsClaimClerk loading={loading} job={data ? data.jobs_by_pk : null} />
-      </Card>
-      <Card>
-        <JobsTargetsStatsMolecule loading={loading} job={data ? data.jobs_by_pk : null} />
+      <Card title="Parts Breakdown">
         <div
           style={{
             display: "flex",