refactor: Total lines of commercial documents.

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js

@@ -8,9 +8,8 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
@@ -47,7 +46,7 @@ function ManualJournalDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
           <Button
@@ -68,7 +67,7 @@ function ManualJournalDrawerActionBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Card } from 'components';
 
@@ -7,17 +8,13 @@ import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
 import ManualJournalDrawerTable from './ManualJournalDrawerTable';
 import ManualJournalDrawerFooter from './ManualJournalDrawerFooter';
 
-import { useManualJournalDrawerContext } from 'containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider';
-
 /**
  * Manual journal view details.
  */
 export default function ManualJournalDrawerDetails() {
-  const { manualJournal } = useManualJournalDrawerContext();
-
   return (
-    <div className={'journal-drawer'}>
-      <ManualJournalDrawerActionBar manualJournal={manualJournal} />
+    <ManualJournalDetailsRoot>
+      <ManualJournalDrawerActionBar />
 
       <div className="journal-drawer__content">
         <Card>
@@ -26,6 +23,9 @@ export default function ManualJournalDrawerDetails() {
           <ManualJournalDrawerFooter />
         </Card>
       </div>
-    </div>
+    </ManualJournalDetailsRoot>
   );
 }
+
+
+const ManualJournalDetailsRoot = styled.div``;

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { defaultTo } from 'lodash';
-import { DetailsMenu, DetailItem, FormattedMessage as T } from 'components';
+import {
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  FormattedMessage as T,
+} from 'components';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
@@ -22,26 +28,32 @@ export default function ManualJournalDrawerHeader() {
     <div className={'journal-drawer__content-header'}>
       <DetailsMenu>
         <DetailItem name={'total'} label={<T id={'total'} />}>
-          <h3 class="amount">{formatted_amount}</h3>
-        </DetailItem>
-
-        <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
-          {journal_type}
-        </DetailItem>
-
-        <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
-          {journal_number}
-        </DetailItem>
-
-        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
-          {defaultTo(reference, '-')}
-        </DetailItem>
-
-        <DetailItem name={'currency'} label={<T id={'currency'} />}>
-          {currency_code}
+          <h3 class="big-number">{formatted_amount}</h3>
         </DetailItem>
       </DetailsMenu>
 
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
+              {journal_type}
+            </DetailItem>
+
+            <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
+              {journal_number}
+            </DetailItem>
+
+            <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+              {defaultTo(reference, '-')}
+            </DetailItem>
+
+            <DetailItem name={'currency'} label={<T id={'currency'} />}>
+              {currency_code}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
+
       <div class="journal-drawer__content-description">
         <b class="title">
           <T id={'manual_journal.details.description'} />

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js

@@ -1,27 +1,23 @@
 import React from 'react';
 
-import { DataTable, If } from 'components';
+import { CommercialDocEntriesTable  } from 'components';
 import { useManualJournalEntriesColumns } from './utils';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
+import { TableStyle } from '../../../common';
+
 /**
  * Manual journal drawer table.
  */
 export default function ManualJournalDrawerTable() {
   const columns = useManualJournalEntriesColumns();
-  const {
-    manualJournal: { entries, description },
-  } = useManualJournalDrawerContext();
+  const { manualJournal } = useManualJournalDrawerContext();
 
   return (
-    <div className="journal-drawer__content-table">
-      <DataTable columns={columns} data={entries} />
-
-      <If condition={description}>
-        <p className={'desc'}>
-          <b>Description</b>: {description}
-        </p>
-      </If>
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={manualJournal.entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }