From 990c1bb2bf545a3d9e48d720a494bc5b4b85d562 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 20 Sep 2021 16:39:17 -0700
Subject: [PATCH] IO-1272 Improve reconciliation table UI

---
 ...ob-reconciliation-bills-table.component.jsx | 12 +++++++++---
 .../job-reconciliation-modal.styles.scss       | 18 +++++++++---------
 ...ob-reconciliation-parts-table.component.jsx |  7 ++++++-
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx b/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx
index 40cd8120c..26ce3dd8e 100644
--- a/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx
+++ b/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx
@@ -21,7 +21,8 @@ export default function JobReconciliationBillsTable({
       title: t("billlines.fields.line_desc"),
       dataIndex: "line_desc",
       key: "line_desc",
-      width: "35%",
+      ellipsis: true,
+      minWidth: "65rem",
       sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
       sortOrder:
         state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
@@ -30,7 +31,7 @@ export default function JobReconciliationBillsTable({
       title: t("billlines.labels.from"),
       dataIndex: "from",
       key: "from",
-      width: "20%",
+
       ellipsis: true,
       render: (text, record) =>
         `${record.bill.vendor && record.bill.vendor.name} / ${
@@ -42,6 +43,7 @@ export default function JobReconciliationBillsTable({
       dataIndex: "actual_price",
       key: "actual_price",
       sorter: (a, b) => a.actual_price - b.actual_price,
+      width: "7rem",
       sortOrder:
         state.sortedInfo.columnKey === "actual_price" && state.sortedInfo.order,
       render: (text, record) => (
@@ -53,6 +55,7 @@ export default function JobReconciliationBillsTable({
       dataIndex: "actual_cost",
       key: "actual_cost",
       sorter: (a, b) => a.actual_cost - b.actual_cost,
+      width: "7rem",
       sortOrder:
         state.sortedInfo.columnKey === "actual_cost" && state.sortedInfo.order,
       render: (text, record) => (
@@ -64,6 +67,7 @@ export default function JobReconciliationBillsTable({
       dataIndex: "quantity",
       key: "quantity",
       sorter: (a, b) => a.quantity - b.quantity,
+      width: "4rem",
       sortOrder:
         state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
     },
@@ -72,9 +76,11 @@ export default function JobReconciliationBillsTable({
       dataIndex: "is_credit_memo",
       key: "is_credit_memo",
       sorter: (a, b) => a.bill.is_credit_memo - b.bill.is_credit_memo,
+      width: "8rem",
       sortOrder:
         state.sortedInfo.columnKey === "is_credit_memo" &&
         state.sortedInfo.order,
+
       render: (text, record) => (
         <Checkbox disabled checked={record.bill.is_credit_memo} />
       ),
@@ -94,7 +100,7 @@ export default function JobReconciliationBillsTable({
       <Table
         pagination={false}
         size="small"
-        scroll={{ y: "80vh", x: true }}
+        scroll={{ y: "60vh" }}
         columns={columns}
         rowKey="id"
         dataSource={invoiceLineData}
diff --git a/client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss b/client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss
index 8565ee51d..2781d4665 100644
--- a/client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss
+++ b/client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss
@@ -1,12 +1,12 @@
 .imex-reconciliation-modal {
   top: 20px;
-  .ant-modal-content {
-    height: 95vh;
-    display: flex;
-    flex-direction: column;
-    .ant-modal-body {
-      display: flex;
-      flex: 1;
-    }
-  }
+  // .ant-modal-content {
+  //   height: 95vh;
+  //   display: flex;
+  //   flex-direction: column;
+  //   .ant-modal-body {
+  //     display: flex;
+  //     flex: 1;
+  //   }
+  // }
 }
diff --git a/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx b/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx
index 8f506492d..92922aeba 100644
--- a/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx
+++ b/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx
@@ -23,6 +23,7 @@ export default function JobReconcilitionPartsTable({
       dataIndex: "line_desc",
       key: "line_desc",
       sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
+      ellipses: true,
       sortOrder:
         state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
     },
@@ -57,6 +58,7 @@ export default function JobReconcilitionPartsTable({
       dataIndex: "act_price",
       key: "act_price",
       sorter: (a, b) => a.act_price - b.act_price,
+      width: "7rem",
       sortOrder:
         state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
 
@@ -68,10 +70,12 @@ export default function JobReconcilitionPartsTable({
       title: t("joblines.fields.part_qty"),
       dataIndex: "part_qty",
       key: "part_qty",
+      width: "4rem",
     },
     {
       title: t("joblines.fields.total"),
       dataIndex: "total",
+      width: "7rem",
       key: "total",
       sorter: (a, b) => a.act_price * a.part_qty - b.act_price * b.part_qty,
       sortOrder:
@@ -89,6 +93,7 @@ export default function JobReconcilitionPartsTable({
       dataIndex: "status",
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
+      width: "6rem",
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
     },
@@ -108,7 +113,7 @@ export default function JobReconcilitionPartsTable({
         pagination={false}
         columns={columns}
         size="small"
-        scroll={{ y: "80vh", x: true }}
+        scroll={{ y: "60vh" }}
         rowKey="id"
         dataSource={jobLineData}
         onChange={handleTableChange}