refactor: Total lines of commercial documents.

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js

@@ -8,15 +8,17 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
+
 import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { compose } from 'utils';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
+import { compose } from 'utils';
+
 /**
  * Expense drawer action bar.
  */
@@ -28,6 +30,8 @@ function ExpenseDrawerActionBar({
   closeDrawer,
 }) {
   const history = useHistory();
+
+  // Expense drawer context.
   const { expense } = useExpenseDrawerContext();
 
   // Handle the expense edit action.
@@ -42,7 +46,7 @@ function ExpenseDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
           <Button
@@ -63,7 +67,7 @@ function ExpenseDrawerActionBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js

@@ -2,8 +2,6 @@ import React from 'react';
 
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ExpenseDrawer.scss';
-
 import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
 import ExpenseDrawerDetails from './ExpenseDrawerDetails';
 

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Card } from 'components';
 
@@ -12,7 +13,7 @@ import ExpenseDrawerFooter from './ExpenseDrawerFooter';
  */
 export default function ExpenseDrawerDetails() {
   return (
-    <div className={'expense-drawer'}>
+    <ExpenseDetailsRoot>
       <ExpenseDrawerActionBar />
 
       <div className="expense-drawer__content">
@@ -22,6 +23,8 @@ export default function ExpenseDrawerDetails() {
           <ExpenseDrawerFooter />
         </Card>
       </div>
-    </div>
+    </ExpenseDetailsRoot>
   );
 }
+
+const ExpenseDetailsRoot = styled.div``;

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import { defaultTo } from 'lodash';
 
-import { DetailItem, DetailsMenu, Money } from 'components';
+import { Row, Col, DetailItem, DetailsMenu, Money } from 'components';
 import { FormattedMessage as T } from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
@@ -29,30 +29,38 @@ export default function ExpenseDrawerHeader() {
             <Money amount={total_amount} currency={currency_code} />
           </h3>
         </DetailItem>
-
-        <DetailItem name={'date'} label={<T id={'date'} />}>
-          {moment(payment_date).format('YYYY MMM DD')}
-        </DetailItem>
-
-        <DetailItem name={'currency'} label={<T id={'currency'} />}>
-          {currency_code}
-        </DetailItem>
-
-        <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
-          {defaultTo(reference_no, '-')}
-        </DetailItem>
-
-        <DetailItem label={<T id={'published_at'} />}>
-          {moment(published_at).format('YYYY MMM DD')}
-        </DetailItem>
       </DetailsMenu>
 
-      <DetailsMenu direction={'horizantal'}>
-        <DetailItem label={<T id={'description'} />}>
-          {defaultTo(description, '—')}
-        </DetailItem>
-        <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
-      </DetailsMenu>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem name={'date'} label={<T id={'date'} />}>
+              {moment(payment_date).format('YYYY MMM DD')}
+            </DetailItem>
+
+            <DetailItem name={'currency'} label={<T id={'currency'} />}>
+              {currency_code}
+            </DetailItem>
+
+            <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
+              {defaultTo(reference_no, '-')}
+            </DetailItem>
+
+            <DetailItem label={<T id={'published_at'} />}>
+              {moment(published_at).format('YYYY MMM DD')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={<T id={'description'} />}>
+              {defaultTo(description, '—')}
+            </DetailItem>
+            <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
     </div>
   );
 }

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js

@@ -1,18 +1,27 @@
 import React from 'react';
-import { DataTable } from 'components';
+
+import { CommercialDocEntriesTable } from 'components';
+
 import { useExpenseReadEntriesColumns } from './utils';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
+import { TableStyle } from '../../../common';
+
 /**
  * Expense details table.
  */
 export default function ExpenseDrawerTable() {
+  // Expense readonly entries columns.
   const columns = useExpenseReadEntriesColumns();
+
+  // Expense drawer context.
   const { expense } = useExpenseDrawerContext();
 
   return (
-    <div className="expense-drawer__content--table">
-      <DataTable columns={columns} data={expense.categories} />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={expense.categories}
+      styleName={TableStyle.Constrant}
+    />
   );
 }