refactor(InventoryValuation).

refactor(InventoryItemDetails).

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
-            pageFilter={filter}
-            onSubmitFilter={handleFilterSubmit}
-          />
-          <div class="financial-statement__body">
-            <InventoryValuationTable companyName={organizationName} />
-          </div>
-        </div>
+        <InventoryValuationHeader
+          pageFilter={filter}
+          onSubmitFilter={handleFilterSubmit}
+        />
+        <InventoryValuationBody />
       </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',
         )}