refactor(InventoryValuation).

refactor(InventoryItemDetails).

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -7,9 +7,10 @@ import { DataTable, FinancialSheet } from 'components';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
 
 import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
-import { TableStyle } from 'common';
 import { useBalanceSheetColumns } from './components';
 
+import { TableStyle } from 'common';
+
 /**
  * Balance sheet table.
  */

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import 'style/pages/FinancialStatements/InventoryItemDetails.scss';
 
 import { FinancialStatement } from 'components';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import InventoryItemDetailsActionsBar from './InventoryItemDetailsActionsBar';
 import InventoryItemDetailsHeader from './InventoryItemDetailsHeader';
-import InventoryItemDetailsTable from './InventoryItemDetailsTable';
 
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
@@ -18,6 +16,7 @@ import {
 } from './components';
 
 import { compose } from 'utils';
+import { InventoryItemDetailsBody } from './InventoryItemDetailsBody';
 
 /**
  * inventory item details.
@@ -64,19 +63,11 @@ function InventoryItemDetails({
 
       <DashboardPageContent>
         <FinancialStatement>
-          <div
+          <InventoryItemDetailsHeader
-            className={
+            pageFilter={filter}
-              'financial-statement financial-statement--inventory-details'
+            onSubmitFilter={handleFilterSubmit}
-            }
+          />
-          >
+          <InventoryItemDetailsBody />
-            <InventoryItemDetailsHeader
-              pageFilter={filter}
-              onSubmitFilter={handleFilterSubmit}
-            />
-          </div>
-          <div class="financial-statement__body">
-            <InventoryItemDetailsTable companyName={organizationName} />
-          </div>
         </FinancialStatement>
       </DashboardPageContent>
     </InventoryItemDetailsProvider>

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsBody.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import { InventoryItemDetailsTable } from './InventoryItemDetailsTable';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+/**
+ * Inventory item details body.
+ * @returns {JSX.Element}
+ */
+function InventoryItemDetailsBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isInventoryItemDetailsLoading } = useInventoryItemDetailsContext();
+
+  return (
+    <FinancialReportBody>
+      {isInventoryItemDetailsLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <InventoryItemDetailsTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const InventoryItemDetailsBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(InventoryItemDetailsBodyJSX);

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js

@@ -1,16 +1,19 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 import { useInventoryItemDetailsColumns } from './components';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
 
-import { defaultExpanderReducer } from 'utils';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+
+import { TableStyle } from 'common';
 
 /**
  * Inventory item detail table.
  */
-export default function InventoryItemDetailsTable({
+export function InventoryItemDetailsTable({
   // #ownProps
   companyName,
 }) {
@@ -27,30 +30,84 @@ export default function InventoryItemDetailsTable({
     [tableRows],
   );
 
-  const rowClassNames = (row) => {
-    return [`row-type--${row.original.row_types}`];
-  };
-
   return (
     <FinancialSheet
-      name="inventory-item-details"
       companyName={companyName}
       sheetType={intl.get('inventory_item_details')}
       loading={isInventoryItemDetailsLoading}
       fromDate={query.from_date}
       toDate={query.to_date}
     >
-      <DataTable
+      <InventoryItemDetailsDataTable
-        className="bigcapital-datatable--financial-report"
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         expandable={true}
         expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const InventoryItemDetailsDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        padding-top: 0.2rem;
+        padding-bottom: 0.2rem;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+
+        &.date {
+          > div {
+            display: flex;
+          }
+
+          span.force-width {
+            position: relative;
+          }
+        }
+      }
+
+      .tr:not(.no-results) .td {
+        border-left: 1px solid #ececec;
+      }
+
+      .tr:last-child .td {
+        border-bottom: 1px solid #ddd;
+      }
+
+      .tr.row-type {
+        &--ITEM {
+          .td {
+            &.transaction_type {
+              border-left-color: transparent;
+            }
+          }
+
+          &:not(:first-child).is-expanded .td {
+            border-top: 1px solid #ddd;
+          }
+        }
+
+        &--ITEM,
+        &--OPENING_ENTRY,
+        &--CLOSING_ENTRY {
+          font-weight: 500;
+        }
+
+        &--ITEM {
+          &.is-expanded {
+            .td.value .cell-inner {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js

@@ -1,12 +1,10 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import moment from 'moment';
 
-import 'style/pages/FinancialStatements/SalesAndPurchasesSheet.scss';
-
 import { InventoryValuationProvider } from './InventoryValuationProvider';
 import InventoryValuationActionsBar from './InventoryValuationActionsBar';
 import InventoryValuationHeader from './InventoryValuationHeader';
-import InventoryValuationTable from './InventoryValuationTable';
+import { InventoryValuationBody } from './InventoryValuationBody';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { InventoryValuationLoadingBar } from './components';
@@ -64,15 +62,11 @@ function InventoryValuation({
       <InventoryValuationLoadingBar />
 
       <DashboardPageContent>
-        <div class="financial-statement financial-statement--inventory-valuation">
+        <InventoryValuationHeader
-          <InventoryValuationHeader
+          pageFilter={filter}
-            pageFilter={filter}
+          onSubmitFilter={handleFilterSubmit}
-            onSubmitFilter={handleFilterSubmit}
+        />
-          />
+        <InventoryValuationBody />
-          <div class="financial-statement__body">
-            <InventoryValuationTable companyName={organizationName} />
-          </div>
-        </div>
       </DashboardPageContent>
     </InventoryValuationProvider>
   );

src/containers/FinancialStatements/InventoryValuation/InventoryValuationBody.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import InventoryValuationTable from './InventoryValuationTable';
+import { useInventoryValuationContext } from './InventoryValuationProvider';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+function InventoryValuationBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useInventoryValuationContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <InventoryValuationTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const InventoryValuationBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(InventoryValuationBodyJSX);

src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import intl, { init } from 'react-intl-universal';
+import intl from 'react-intl-universal';
 
 import { DataTable, FinancialSheet } from 'components';
 
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 import { useInventoryValuationTableColumns } from './components';
 
+import { tableRowTypesToClassnames } from 'utils';
+import { TableStyle } from 'common';
+
 /**
  * inventory valuation data table.
  */
@@ -22,37 +25,22 @@ export default function InventoryValuationTable({
   // inventory valuation table columns.
   const columns = useInventoryValuationTableColumns();
 
-  const rowClassNames = (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}
-      name="inventory-valuation"
       sheetType={intl.get('inventory_valuation')}
       asDate={new Date()}
       loading={isLoading}
     >
       <DataTable
-        className="bigcapital-datatable--financial-report"
         columns={columns}
         data={tableRows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
         sticky={true}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
+        styleName={TableStyle.Constrant}
         noResults={intl.get(
           'there_were_no_inventory_transactions_during_the_selected_date_range',
         )}