refactor(InventoryValuation).

refactor(InventoryItemDetails).

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
-            className={
-              'financial-statement financial-statement--inventory-details'
-            }
-          >
-            <InventoryItemDetailsHeader
-              pageFilter={filter}
-              onSubmitFilter={handleFilterSubmit}
-            />
-          </div>
-          <div class="financial-statement__body">
-            <InventoryItemDetailsTable companyName={organizationName} />
-          </div>
+          <InventoryItemDetailsHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <InventoryItemDetailsBody />
         </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
-        className="bigcapital-datatable--financial-report"
+      <InventoryItemDetailsDataTable
         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;
+            }
+          }
+        }
+      }
+    }
+  }
+`;