refactor: Total lines of commercial documents.

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { Card } from 'components';
 
@@ -7,20 +7,20 @@ import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActi
 import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
 import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
 
-import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
-
 /**
  * Inventory adjustment detail
  */
 export default function InventoryAdjustmentDetail() {
   return (
-    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel)}>
+    <InventoryAdjustmentDetailsRoot>
       <InventoryAdjustmentDetailActionsBar />
 
       <Card>
         <InventoryAdjustmentDetailHeader />
         <InventoryAdjustmentDetailTable />
       </Card>
-    </div>
+    </InventoryAdjustmentDetailsRoot>
   );
 }
+
+const InventoryAdjustmentDetailsRoot = styled.div``;

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js

@@ -1,13 +1,11 @@
 import React from 'react';
-
 import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { Icon, FormattedMessage as T, Can } from 'components';
+import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
 import {
   InventoryAdjustmentAction,
   AbilitySubject,
@@ -34,7 +32,7 @@ function InventoryAdjustmentDetailActionsBar({
       I={InventoryAdjustmentAction.Delete}
       a={AbilitySubject.InventoryAdjustment}
     >
-      <DashboardActionsBar>
+      <DrawerActionsBar>
         <NavbarGroup>
           <Button
             className={Classes.MINIMAL}
@@ -44,7 +42,7 @@ function InventoryAdjustmentDetailActionsBar({
             onClick={handleDeleteInventoryAdjustment}
           />
         </NavbarGroup>
-      </DashboardActionsBar>
+      </DrawerActionsBar>
     </Can>
   );
 }

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js

@@ -14,43 +14,37 @@ import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdju
  * Inventory detail header.
  */
 export default function InventoryAdjustmentDetailHeader() {
-  const {
-    inventoryAdjustment: {
-      date,
-      type,
-      adjustment_account,
-      inventory_direction,
-      description,
-      reference_no,
-      reason,
-      published_at,
-      created_at,
-    },
-  } = useInventoryAdjustmentDrawerContext();
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
 
   return (
     <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <DetailItem label={intl.get('date')}>
-          {moment(date).format('YYYY MMM DD')}
+          {moment(inventoryAdjustment.date).format('YYYY MMM DD')}
         </DetailItem>
-        <DetailItem label={intl.get('type')}>{type}</DetailItem>
+
+        <DetailItem label={intl.get('type')}>
+          {inventoryAdjustment.type}
+        </DetailItem>
+
         <DetailItem label={intl.get('adjustment_account')}>
-          {adjustment_account.name}
+          {inventoryAdjustment.adjustment_account.name}
         </DetailItem>
+
         <DetailItem name={'reference'} label={intl.get('reference_no')}>
-          {defaultTo(reference_no, '-')}
+          {defaultTo(inventoryAdjustment.reference_no, '-')}
         </DetailItem>
+
         <DetailItem label={intl.get('published_at')}>
-          {moment(published_at).format('YYYY MMM DD')}
+          {moment(inventoryAdjustment.published_at).format('YYYY MMM DD')}
         </DetailItem>
-      </DetailsMenu>
-      <DetailsMenu direction={'horizantal'}>
+
         <DetailItem label={intl.get('reason')}>
-          {defaultTo(reason, '—')}
+          {defaultTo(inventoryAdjustment.reason, '—')}
         </DetailItem>
+
         <DetailItem label={intl.get('created_at')}>
-          {moment(created_at).format('YYYY MMM DD')}
+          {moment(inventoryAdjustment.created_at).format('YYYY MMM DD')}
         </DetailItem>
       </DetailsMenu>
     </div>

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js

@@ -1,30 +1,24 @@
 import React from 'react';
-import clsx from 'classnames';
-
-import { DataTable } from 'components';
 
+import { CommercialDocEntriesTable } from 'components';
 import { useInventoryAdjustmentEntriesColumns } from './utils';
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
-import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
-
 /**
  * Inventory adjustment detail entries table.
  */
 export default function InventoryAdjustmentDetailTable() {
+  // Inventory adjustment entries columns.
   const columns = useInventoryAdjustmentEntriesColumns();
 
-  const {
-    inventoryAdjustment: { entries },
-  } = useInventoryAdjustmentDrawerContext();
+  // Inventory adjustment details drawer context.
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
 
   return (
-    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={inventoryAdjustment.entries}
+      className={'table-constrant'}
+    />
   );
 }