refactor(JournalSheet)

src/containers/FinancialStatements/Journal/Journal.js

@@ -25,7 +25,6 @@ function Journal({
   const [filter, setFilter] = useState({
     ...getDefaultJournalQuery(),
   });
-
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
     (filter) => {
@@ -38,7 +37,6 @@ function Journal({
     },
     [setFilter],
   );
-
   // Hide the journal sheet filter drawer once the page unmount.
   useEffect(
     () => () => {

src/containers/FinancialStatements/Journal/JournalTable.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
@@ -8,8 +9,7 @@ import TableFastCell from 'components/Datatable/TableFastCell';
 import { useJournalTableColumns } from './components';
 import { useJournalSheetContext } from './JournalProvider';
 
-import { defaultExpanderReducer } from 'utils';
-
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
 import { TableStyle } from 'common';
 
 /**
@@ -29,20 +29,6 @@ export function JournalTable({ companyName }) {
   // Default expanded rows of general journal table.
   const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
 
-  const rowClassNames = useCallback((row) => {
-    const { original } = row;
-    const rowTypes = Array.isArray(original.rowType)
-      ? original.rowType
-      : [original.rowType];
-
-    return {
-      ...rowTypes.reduce((acc, rowType) => {
-        acc[`row_type--${rowType}`] = rowType;
-        return acc;
-      }, {}),
-    };
-  }, []);
-
   return (
     <FinancialSheet
       companyName={companyName}
@@ -53,10 +39,10 @@ export function JournalTable({ companyName }) {
       loading={isLoading}
       fullWidth={true}
     >
-      <DataTable
+      <JournalDataTable
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noResults={intl.get(
           'this_report_does_not_contain_any_data_between_date_period',
         )}
@@ -73,3 +59,33 @@ export function JournalTable({ companyName }) {
     </FinancialSheet>
   );
 }
+
+const JournalDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) .td {
+        padding: 0.3rem 0.4rem;
+        color: #000;
+        border-bottom-color: transparent;
+        min-height: 28px;
+        border-left: 1px solid #ececec;
+
+        &:first-of-type {
+          border-left: 0;
+        }
+      }
+      .tr:not(.no-results):last-child {
+        .td {
+          border-bottom: 1px solid #dbdbdb;
+        }
+      }
+      .tr.row_type--TOTAL_ENTRIES {
+        font-weight: 600;
+      }
+
+      .tr:not(.no-results) {
+        height: 28px;
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/reducers.js

@@ -39,7 +39,7 @@ export const journalTableRowsReducer = (journal) => {
             reference_type_formatted: transaction.reference_type_formatted,
           }
         : {}),
-      rowType: TYPES.ENTRY,
+      row_types: TYPES.ENTRY,
       ...entry,
     }));
   };
@@ -51,7 +51,7 @@ export const journalTableRowsReducer = (journal) => {
       return [
         ...entries,
         {
-          rowType: TYPES.TOTAL_ENTRIES,
+          row_types: TYPES.TOTAL_ENTRIES,
           currency_code: transaction.currency_code,
           credit: transaction.credit,
           debit: transaction.debit,
@@ -59,7 +59,7 @@ export const journalTableRowsReducer = (journal) => {
           formatted_debit: transaction.formatted_debit,
         },
         {
-          rowType: TYPES.EMPTY_ROW,
+          row_types: TYPES.EMPTY_ROW,
         },
       ];
     })