Additional Changes for calculations of RPS %.

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

@@ -8,6 +8,7 @@ import { selectSelectedJobId } from "../../../redux/application/application.sele
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import JobsDetailDescriptionMolecule from "../../molecules/jobs-detail-description/jobs-detail-description.molecule";
 import JobsLinesTableMolecule from "../../molecules/jobs-lines-table/jobs-lines-table.molecule";
+import JobsTargetsStatsMolecule from "../../molecules/jobs-targets-stats/jobs-targets-stats.molecule";
 import "./jobs-detail.organism.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
@@ -32,17 +33,21 @@ export function JobsDetailOrganism({ selectedJobId }) {
         errorMessage={JSON.stringify(error)}
       />
     );
+
   return (
     <div className="jobs-detail-container">
       <JobsDetailDescriptionMolecule
         loading={loading}
         job={data ? data.jobs_by_pk : null}
       />
+      <JobsTargetsStatsMolecule
+        loading={loading}
+        job={data ? data.jobs_by_pk : null}
+      />
       <JobsLinesTableMolecule
         loading={loading}
-        jobLines={data ? data.jobs_by_pk.joblines : []}
+        job={data ? data.jobs_by_pk : {}}
       />
-      {selectedJobId}
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, List, Space, Spin, Typography } from "antd";
+import { Button, Divider, List, Space, Spin } from "antd";
 import React, { useState } from "react";
 import InfiniteScroll from "react-infinite-scroller";
 import { connect } from "react-redux";
@@ -87,6 +87,7 @@ export function JobsTableOrganism({ selectedJobId, setSelectedJobId }) {
           useWindow={false}
         >
           <List
+            bordered
             dataSource={data ? data.jobs : []}
             renderItem={(item) => (
               <List.Item
@@ -101,22 +102,24 @@ export function JobsTableOrganism({ selectedJobId, setSelectedJobId }) {
                       : ""
                   }`}
                 >
-                  <div style={{ display: "flex" }}>
-                    <Typography.Title level={4} style={{ flex: 1 }}>
-                      {`${item.clm_no}${
-                        item.ins_co_nm ? ` | ${item.ins_co_nm}` : ""
-                      }`}
-                    </Typography.Title>
-                    <span className="job-list-last-updated-time">
+                  <div
+                    style={{
+                      display: "flex",
+
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <strong>{item.clm_no || "No Claim Number"}</strong>
+                    <span style={{ fontStyle: "italic" }}>
                       <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
                     </span>
                   </div>
-                  <Space>
-                    <span>{`${item.ownr_fn} ${item.ownr_ln}`}</span>
-                    <span>
-                      {`${item.v_model_yr} ${item.v_makedesc} ${item.v_model} ${item.v_vin}`}
-                    </span>
-                  </Space>
+
+                  <div>{item.ins_co_nm || "No Insurance Co."}</div>
+                  <div>{`${item.ownr_fn} ${item.ownr_ln}`}</div>
+                  <div>
+                    {`${item.v_model_yr} ${item.v_makedesc} ${item.v_model} ${item.v_vin}`}
+                  </div>
                 </div>
               </List.Item>
             )}