refactor(APAgingSummary)

refactor(ARAgingSummary)

src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js

@@ -6,7 +6,8 @@ import { FinancialStatement } from 'components';
 
 import APAgingSummaryHeader from './APAgingSummaryHeader';
 import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
-import APAgingSummaryTable from './APAgingSummaryTable';
+import { APAgingSummaryBody } from './APAgingSummaryBody';
+
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { APAgingSummaryProvider } from './APAgingSummaryProvider';
 import { APAgingSummarySheetLoadingBar } from './components';
@@ -67,7 +68,7 @@ function APAgingSummary({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
-          <APAgingSummaryTable organizationName={organizationName} />
+          <APAgingSummaryBody organizationName={organizationName} />
         </FinancialStatement>
       </DashboardPageContent>
     </APAgingSummaryProvider>

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js

@@ -8,6 +8,8 @@ import { TableStyle } from 'common';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import { useAPAgingSummaryColumns } from './components';
 
+import { tableRowTypesToClassnames } from 'utils';
+
 /**
  * AP aging summary table sheet.
  */
@@ -24,8 +26,6 @@ export default function APAgingSummaryTable({
   // AP aging summary columns.
   const columns = useAPAgingSummaryColumns();
 
-  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
-
   return (
     <FinancialSheet
       companyName={organizationName}
@@ -37,7 +37,7 @@ export default function APAgingSummaryTable({
       <APAgingSummaryDataTable
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         sticky={true}
         styleName={TableStyle.Constrant}

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js

@@ -58,7 +58,7 @@ function ReceivableAgingSummarySheet({
       <ARAgingSummarySheetLoadingBar />
 
       <DashboardPageContent>
-        <FinancialStatement name={'AR-aging-summary'}>
+        <FinancialStatement>
           <ARAgingSummaryHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryBody.js

@@ -2,10 +2,8 @@ import React from 'react';
 import * as R from 'ramda';
 
 import ARAgingSummaryTable from './ARAgingSummaryTable';
-import {
-  FinancialReportBody,
-  FinancialSheetSkeleton,
-} from '../../../components';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '../../../components';
 
 import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js

@@ -8,6 +8,8 @@ import { TableStyle } from 'common';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { useARAgingSummaryColumns } from './components';
 
+import { tableRowTypesToClassnames } from 'utils';
+
 /**
  * AR aging summary table sheet.
  */
@@ -21,8 +23,6 @@ export default function ReceivableAgingSummaryTable({
   // AR aging summary columns.
   const columns = useARAgingSummaryColumns();
 
-  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
-
   return (
     <FinancialSheet
       companyName={organizationName}
@@ -34,7 +34,7 @@ export default function ReceivableAgingSummaryTable({
       <ARAgingSummaryDataTable
         columns={columns}
         data={ARAgingSummary.tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         sticky={true}
         styleName={TableStyle.Constrant}
@@ -51,6 +51,25 @@ const ARAgingSummaryDataTable = styled(DataTable)`
         padding-top: 0.32rem;
         padding-bottom: 0.32rem;
       }
+
+      &:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+        &:not(:first-child) .td {
+          border-top: 1px solid transparent;
+        }
+        &.row_type--total {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
     }
   }
 `;

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -34,7 +34,6 @@ export default function BalanceSheetTable({
 
   return (
     <FinancialSheet
-      name="balance-sheet"
       companyName={companyName}
       sheetType={intl.get('balance_sheet')}
       asDate={query.to_date}

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js

@@ -17,20 +17,17 @@ export default function PurchasesByItemsTable({ companyName }) {
   // Purchases by items context.
   const {
     purchaseByItems: { tableRows, query },
-    isLoading,
   } = usePurchaseByItemsContext();
 
   // Purchases by items table columns.
   const columns = usePurchasesByItemsTableColumns();
 
   return (
-    <FinancialSheet
+    <PurchasesByItemsSheet
       companyName={companyName}
       sheetType={intl.get('purchases_by_items')}
       fromDate={query.from_date}
       toDate={query.to_date}
-      name="purchases-by-items"
-      loading={isLoading}
     >
       <PurchasesByItemsDataTable
         columns={columns}
@@ -45,10 +42,14 @@ export default function PurchasesByItemsTable({ companyName }) {
         )}
         styleName={TableStyle.Constrant}
       />
-    </FinancialSheet>
+    </PurchasesByItemsSheet>
   );
 }
 
+const PurchasesByItemsSheet = styled(FinancialSheet)`
+  min-width: 850px;
+`;
+
 const PurchasesByItemsDataTable = styled(DataTable)`
   .table {
     .tbody {

src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
@@ -23,15 +24,14 @@ export default function SalesByItemsTable({ companyName }) {
   const columns = useSalesByItemsTableColumns();
 
   return (
-    <FinancialSheet
+    <SalesByItemsSheet
       companyName={companyName}
       sheetType={intl.get('sales_by_items')}
       fromDate={query.from_date}
       toDate={query.to_date}
-      name="sales-by-items"
       loading={isLoading}
     >
-      <DataTable
+      <SalesByItemsDataTable
         columns={columns}
         data={tableRows}
         expandable={true}
@@ -44,6 +44,27 @@ export default function SalesByItemsTable({ companyName }) {
         )}
         styleName={TableStyle.Constrant}
       />
-    </FinancialSheet>
+    </SalesByItemsSheet>
   );
 }
+
+const SalesByItemsSheet = styled(FinancialSheet)`
+  min-width: 850px;
+`;
+
+const SalesByItemsDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+      }
+      .tr.row_type--total .td {
+        border-top: 1px solid #bbb;
+        font-weight: 500;
+        border-bottom: 3px double #000;
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/reducers.js

@@ -115,7 +115,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
     const agingRow = mapAging(customer.aging);
 
     rows.push({
-      rowType: 'customer',
+      row_types: 'customer',
       name: customer.customer_name,
       ...agingRow,
       current: customer.current.formatted_amount,
@@ -129,7 +129,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
     ...rows,
     {
       name: '',
-      rowType: 'total',
+      row_types: 'total',
       current: sheet.total.current.formatted_amount,
       ...mapAging(sheet.total.aging),
       total: sheet.total.total.formatted_amount,
@@ -150,7 +150,7 @@ export const APAgingSummaryTableRowsMapper = (sheet, total) => {
     const agingRow = mapAging(vendor.aging);
 
     rows.push({
-      rowType: 'vendor',
+      row_types: 'vendor',
       name: vendor.vendor_name,
       ...agingRow,
       current: vendor.current.formatted_amount,
@@ -164,7 +164,7 @@ export const APAgingSummaryTableRowsMapper = (sheet, total) => {
     ...rows,
     {
       name: '',
-      rowType: 'total',
+      row_types: 'total',
       current: sheet.total.current.formatted_amount,
       ...mapAging(sheet.total.aging),
       total: sheet.total.total.formatted_amount,
@@ -182,7 +182,7 @@ export const inventoryValuationReducer = (sheet) => {
   }
   if (sheet.total) {
     results.push({
-      rowType: 'total',
+      row_types: 'total',
       ...sheet.total,
     });
   }
@@ -199,7 +199,7 @@ export const purchasesByItemsReducer = (sheet) => {
   }
   if (sheet.total) {
     results.push({
-      rowType: 'total',
+      row_types: 'total',
       ...sheet.total,
     });
   }
@@ -215,7 +215,7 @@ export const salesByItemsReducer = (sheet) => {
   }
   if (sheet.total) {
     results.push({
-      rowType: 'total',
+      row_types: 'total',
       ...sheet.total,
     });
   }