From 588995e759300314e1412f25f2d3f4a8ee78dbaf Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 21 Dec 2021 16:51:47 +0200
Subject: [PATCH] refactor: Total lines of commercial documents.

---
 .../TotalLines/TotalLines.module.scss         | 12 ---
 src/components/TotalLines/index.js            | 88 +++++++++++++++++--
 .../Drawers/BillDrawer/BillDetailFooter.js    | 36 +++++---
 .../CashflowTransactionDrawerActionBar.js     |  8 +-
 .../CashflowTransactionDrawerDetails.js       |  1 +
 .../CashflowTransactionDrawerHeader.js        | 69 +++++++++------
 .../CashflowTransactionDrawerTable.js         |  8 +-
 .../CreditNoteDetailDrawerFooter.js           | 32 ++++---
 .../CreditNoteDetailPanel.js                  |  4 +-
 .../EstimateDetailFooter.js                   | 41 +++++----
 .../ExpenseDrawer/ExpenseDrawerActionBar.js   | 14 +--
 .../ExpenseDrawer/ExpenseDrawerContent.js     |  2 -
 .../ExpenseDrawer/ExpenseDrawerDetails.js     |  7 +-
 .../ExpenseDrawer/ExpenseDrawerHeader.js      | 54 +++++++-----
 .../ExpenseDrawer/ExpenseDrawerTable.js       | 17 +++-
 .../InventoryAdjustmentDetail.js              | 10 +--
 .../InventoryAdjustmentDetailActionsBar.js    |  8 +-
 .../InventoryAdjustmentDetailHeader.js        | 40 ++++-----
 .../InventoryAdjustmentDetailTable.js         | 24 ++---
 .../InvoiceDetailFooter.js                    | 53 +++++------
 .../InvoiceDetailDrawer/InvoiceDetailTable.js |  1 +
 .../ManualJournalDrawerActionBar.js           |  7 +-
 .../ManualJournalDrawerDetails.js             | 14 +--
 .../ManualJournalDrawerHeader.js              | 48 ++++++----
 .../ManualJournalDrawerTable.js               | 22 ++---
 .../PaymentReceiveDetailFooter.js             | 35 +++++---
 .../PaymentReceiveDrawer.module.scss          |  3 +-
 .../ReceiptDetailActionBar.js                 |  2 +-
 .../ReceiptDetailDrawerContent.js             |  2 -
 .../ReceiptDetailFooter.js                    | 36 +++++---
 .../VendorCreditDetailDrawerFooter.js         | 31 ++++---
 .../VendorCreditDetailPanel.js                |  6 +-
 .../Expenses/ExpensesLanding/components.js    |  4 +-
 .../InventoryAdjustments/components.js        |  4 +-
 .../Users/Roles/RolesForm/components.js       |  2 -
 .../Receipts/ReceiptsLanding/components.js    |  8 +-
 .../TransactionsLocking/components.js         |  2 +-
 .../Drawers/EstimateDetails.module.scss       |  7 +-
 .../ReconcileCreditNoteForm.scss              | 34 +------
 39 files changed, 447 insertions(+), 349 deletions(-)
 delete mode 100644 src/components/TotalLines/TotalLines.module.scss

diff --git a/src/components/TotalLines/TotalLines.module.scss b/src/components/TotalLines/TotalLines.module.scss
deleted file mode 100644
index 5c92246b5..000000000
--- a/src/components/TotalLines/TotalLines.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.total_lines {}
-
-
-.total_line {
-    display: flex;
-    border-bottom: 1px solid #d2dde2;
-    
-    :global .amount,
-    :global .title{
-        padding: 8px;
-    }
-}
\ No newline at end of file
diff --git a/src/components/TotalLines/index.js b/src/components/TotalLines/index.js
index 793f70c0d..1b2d88fc6 100644
--- a/src/components/TotalLines/index.js
+++ b/src/components/TotalLines/index.js
@@ -1,23 +1,93 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import TotalLinesCls from './TotalLines.module.scss';
+export const TotalLineBorderStyle = {
+  SingleDark: 'SingleDark',
+  DoubleDark: 'DoubleDark',
+};
 
-export function TotalLines({ children, className }) {
+export const TotalLineTextStyle = {
+  Regular: 'Regular',
+  Bold: 'Bold',
+};
+
+export function TotalLines({
+  children,
+  amountColWidth,
+  labelColWidth,
+  className,
+}) {
   return (
-    <div className={clsx('total_lines', TotalLinesCls.total_lines, className)}>
+    <TotalLinesRoot
+      className={className}
+      amountColWidth={amountColWidth}
+      labelColWidth={labelColWidth}
+    >
       {children}
-    </div>
+    </TotalLinesRoot>
   );
 }
 
-export function TotalLine({ title, value, className }) {
+export function TotalLine({ title, value, borderStyle, textStyle, className }) {
   return (
-    <div
-      className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
+    <TotalLineRoot
+      borderStyle={borderStyle}
+      textStyle={textStyle}
+      className={className}
     >
       <div class="title">{title}</div>
       <div class="amount">{value}</div>
-    </div>
+    </TotalLineRoot>
   );
 }
+
+export const TotalLinesRoot = styled.div`
+  display: table;
+
+  ${(props) =>
+    props.amountColWidth &&
+    `
+    .amount{
+      width: ${props.amountColWidth}
+    }
+  `}
+
+  ${(props) =>
+    props.labelColWidth &&
+    `
+    .title{
+      width: ${props.labelColWidth}
+    }
+  `}
+`;
+
+export const TotalLineRoot = styled.div`
+  display: table-row;
+
+  .amount,
+  .title {
+    display: table-cell;
+    padding: 8px;
+    border-bottom: 1px solid #d2dde2;
+
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.DoubleDark &&
+      `
+      border-bottom: 3px double #000;
+    `}
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.SingleDark &&
+      `
+      border-bottom: 1px double #000;
+    `}
+    ${(props) =>
+      props.textStyle === TotalLineTextStyle.Bold &&
+      `
+      font-weight: 600;
+    `}
+  }
+
+  .amount {
+    text-align: right;
+  }
+`;
diff --git a/src/containers/Drawers/BillDrawer/BillDetailFooter.js b/src/containers/Drawers/BillDrawer/BillDetailFooter.js
index 8bc47089f..43b7bebde 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailFooter.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailFooter.js
@@ -1,11 +1,16 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatNumber, T, TotalLines, TotalLine } from '../../../components';
+import {
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+  T,
+  TotalLines,
+  TotalLine,
+} from '../../../components';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
-
 /**
  * Bill read-only details footer.
  */
@@ -13,29 +18,34 @@ export function BillDetailFooter() {
   const { bill } = useBillDrawerContext();
 
   return (
-    <div className={clsx(BillDrawerCls.detail_panel_footer)}>
-      <TotalLines>
+    <BillDetailsFooterRoot>
+      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'bill.details.subtotal'} />}
-          value={<FormatNumber value={bill.amount} />}
-          className={BillDrawerCls.total_line_subtotal}
+          value={<FormatNumber value={bill.amont} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'bill.details.total'} />}
           value={bill.formatted_amount}
-          className={BillDrawerCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
         <TotalLine
           title={<T id={'bill.details.payment_amount'} />}
           value={bill.formatted_payment_amount}
-          className={BillDrawerCls.total_line_payment}
         />
         <TotalLine
           title={<T id={'bill.details.due_amount'} />}
           value={bill.formatted_due_amount}
-          className={BillDrawerCls.total_line_dueAmount}
         />
-      </TotalLines>
-    </div>
+      </BillTotalLines>
+    </BillDetailsFooterRoot>
   );
 }
+
+export const BillDetailsFooterRoot = styled.div``;
+
+export const BillTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
index a843373c3..9331ca5f8 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import Icon from 'components/Icon';
 import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { Can, FormattedMessage as T, DrawerActionsBar } from 'components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
@@ -25,7 +24,7 @@ function CashflowTransactionDrawerActionBar({
 
   return (
     <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
-      <DashboardActionsBar>
+      <DrawerActionsBar>
         <NavbarGroup>
           <Button
             className={Classes.MINIMAL}
@@ -35,8 +34,9 @@ function CashflowTransactionDrawerActionBar({
             onClick={handleDeleteCashflowTransaction}
           />
         </NavbarGroup>
-      </DashboardActionsBar>
+      </DrawerActionsBar>
     </Can>
   );
 }
+
 export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
index d14b2d8fa..26cf19169 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
@@ -13,6 +13,7 @@ export default function CashflowTransactionDrawerDetails() {
   return (
     <div className={'cashflow-drawer'}>
       <CashflowTransactionDrawerActionBar />
+
       <div className="cashflow-drawer__content">
         <Card>
           <CashflowTransactionDrawerHeader />
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
index 713bc1888..738f510dc 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
@@ -5,6 +5,10 @@ import {
   DetailItem,
   FormatDate,
   FormattedMessage as T,
+  Row,
+  Col,
+  CommercialDocTopHeader,
+  CommercialDocHeader,
 } from 'components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 
@@ -24,40 +28,49 @@ export default function CashflowTransactionDrawerHeader() {
   } = useCashflowTransactionDrawerContext();
 
   return (
-    <div className={'cashflow-drawer__content-header'}>
-      <DetailsMenu>
-        <DetailItem name={'total'} label={<T id={'total'} />}>
-          <h3 class="amount">{formatted_amount}</h3>
-        </DetailItem>
+    <CommercialDocHeader>
+      <CommercialDocHeader>
+        <DetailsMenu>
+          <DetailItem name={'total'} label={<T id={'total'} />}>
+            <h3 class="amount">{formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocHeader>
 
-        <DetailItem
-          name={'transaction_type'}
-          label={<T id={'cash_flow_drawer.label_transaction_type'} />}
-        >
-          {transaction_type}
-        </DetailItem>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              name={'transaction_type'}
+              label={<T id={'cash_flow_drawer.label_transaction_type'} />}
+            >
+              {transaction_type}
+            </DetailItem>
 
-        <DetailItem
-          name={'transaction_number'}
-          label={<T id={'cash_flow.drawer.label_transaction_no'} />}
-        >
-          {transaction_number}
-        </DetailItem>
-        <DetailItem
-          label={<T id={'date'} />}
-          children={<FormatDate value={date} />}
-        />
-        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
-          {defaultTo(reference_no, '-')}
-        </DetailItem>
-      </DetailsMenu>
+            <DetailItem
+              name={'transaction_number'}
+              label={<T id={'cash_flow.drawer.label_transaction_no'} />}
+            >
+              {transaction_number}
+            </DetailItem>
 
-      <div class="cashflow-drawer__content-description">
+            <DetailItem label={<T id={'date'} />}>
+              <FormatDate value={date} />
+            </DetailItem>
+
+            <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+              {defaultTo(reference_no, '-')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
+
+      {/* <div class="cashflow-drawer__content-description">
         <b class="title">
           <T id={'description'} />
         </b>
         : {defaultTo(description, '—')}
-      </div>
-    </div>
+      </div> */}
+    </CommercialDocHeader>
   );
 }
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
index 96b2f7b87..caa496bdf 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DataTable, If, FormattedMessage as T } from 'components';
+import { CommercialDocEntriesTable } from 'components';
 
 import { useCashflowTransactionColumns } from './utils';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -14,9 +14,5 @@ export default function CashflowTransactionDrawerTable() {
     cashflowTransaction: { transactions },
   } = useCashflowTransactionDrawerContext();
 
-  return (
-    <div className="cashflow-drawer__content-table">
-      <DataTable columns={columns} data={transactions} />
-    </div>
-  );
+  return <CommercialDocEntriesTable columns={columns} data={transactions} />;
 }
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
index 143abcfd5..bb12bccc3 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
@@ -1,11 +1,15 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  FormatNumber,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
-import { FormatNumber } from '../../../components';
-
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
 
 /**
  * Credit note details panel footer.
@@ -14,19 +18,25 @@ export default function CreditNoteDetailDrawerFooter() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
 
   return (
-    <div className={clsx(CreditNoteDetailCls.detail_panel_footer)}>
-      <TotalLines className={clsx(CreditNoteDetailCls.total_lines)}>
+    <CreditNoteDetailsFooterRoot>
+      <CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'credit_note.drawer.label_subtotal'} />}
           value={<FormatNumber value={creditNote.formatted_amount} />}
-          className={CreditNoteDetailCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'credit_note.drawer.label_total'} />}
           value={creditNote.formatted_amount}
-          className={CreditNoteDetailCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
-    </div>
+      </CreditNoteTotalLines>
+    </CreditNoteDetailsFooterRoot>
   );
 }
+
+export const CreditNoteDetailsFooterRoot = styled.div``;
+
+export const CreditNoteTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
index ce19197db..e29f36c41 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
@@ -4,7 +4,7 @@ import { CommercialDocBox } from 'components';
 
 import CreditNoteDetailHeader from './CreditNoteDetailHeader';
 import CreditNoteDetailTable from './CreditNoteDetailTable';
-// import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
+import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
 
 /**
  * Credit note details panel.
@@ -14,7 +14,7 @@ export default function CreditNoteDetailPanel() {
     <CommercialDocBox>
       <CreditNoteDetailHeader />
       <CreditNoteDetailTable />
-      {/* <CreditNoteDetailDrawerFooter /> */}
+      <CreditNoteDetailDrawerFooter />
     </CommercialDocBox>
   );
 }
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
index d473b4bef..cc5b2f01a 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
@@ -1,11 +1,15 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-import { FormatNumber } from '../../../components';
-
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
 
 /**
  * Estimate details panel footer content.
@@ -14,27 +18,26 @@ export default function EstimateDetailFooter() {
   const { estimate } = useEstimateDetailDrawerContext();
 
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
-      <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
+    <EstimateDetailsFooterRoot>
+      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'estimate.details.subtotal'} />}
           value={<FormatNumber value={estimate.amount} />}
-          className={EstimateDetailsCls.total_line_subtotal}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'estimate.details.total'} />}
           value={estimate.formatted_amount}
-          className={EstimateDetailsCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
-
-      <If condition={false}>
-        <div className={clsx(EstimateDetailsCls.detail_panel_note)}>
-          <p>
-            <b><T id={'estimate.details.note'} />:</b> --
-          </p>
-        </div>
-      </If>
-    </div>
+      </EstimateTotalLines>
+    </EstimateDetailsFooterRoot>
   );
 }
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
index 97eec5a7f..65093a190 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
+++ b/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>
   );
 }
 
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
index 810533ade..5a5795a1a 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
+++ b/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';
 
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
index 859d4c96d..c6e6b13e2 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
+++ b/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``;
\ No newline at end of file
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
index 8fddabe15..45a317ac6 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
+++ b/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>
   );
 }
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
index 8a46ef316..54b171f5c 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
+++ b/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}
+    />
   );
 }
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
index 9c7e6b6c6..d9bf4b236 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
+++ b/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``;
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
index a2fac2adb..160af535c 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
+++ b/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>
   );
 }
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
index 91e23344d..d807d9f09 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
+++ b/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>
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
index 45b72d638..d52d856ff 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
+++ b/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'}
+    />
   );
 }
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
index a0cf545cc..2243d1b26 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
@@ -1,7 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { T, TotalLines, FormatNumber, TotalLine } from 'components';
+import {
+  T,
+  TotalLines,
+  FormatNumber,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
@@ -12,54 +19,34 @@ export function InvoiceDetailFooter() {
 
   return (
     <InvoiceDetailsFooterRoot>
-      <TotalLines>
-        <SubTotalLine
+      <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
           title={<T id={'invoice.details.subtotal'} />}
           value={<FormatNumber value={invoice.balance} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
-        <InvoiceTotalLine
+        <TotalLine
           title={<T id={'invoice.details.total'} />}
           value={invoice.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
         <TotalLine
           title={<T id={'invoice.details.payment_amount'} />}
           value={invoice.formatted_payment_amount}
         />
-        <DueAmountLine
+        <TotalLine
           title={<T id={'invoice.details.due_amount'} />}
           value={invoice.formatted_due_amount}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
+      </InvoiceTotalLines>
     </InvoiceDetailsFooterRoot>
   );
 }
 
-const SubTotalLine = styled(TotalLine)`
-  border-bottom: 1px solid #000;
-`;
+const InvoiceDetailsFooterRoot = styled.div``;
 
-const InvoiceTotalLine = styled(TotalLine)`
-  border-bottom: 3px double #000;
-  font-weight: 600;
-`;
-
-const DueAmountLine = styled(TotalLine)`
-  font-weight: 600;
-`;
-
-const InvoiceDetailsFooterRoot = styled.div`
-  display: flex;
-
-  .total_lines {
-    margin-left: auto;
-  }
-  .total_lines_line {
-    .amount,
-    .title {
-      width: 180px;
-    }
-    .amount {
-      text-align: right;
-    }
-  }
+const InvoiceTotalLines = styled(TotalLines)`
+  margin-left: auto;
 `;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
index 9b6737ee8..6fabdf886 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
@@ -11,6 +11,7 @@ import { TableStyle } from '../../../common';
  * Invoice readonly details entries table columns.
  */
 export default function InvoiceDetailTable() {
+  // Invoice readonly entries table columns.
   const columns = useInvoiceReadonlyEntriesColumns();
 
   // Invoice details drawer context.
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
index 007edf042..a4d435107 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
+++ b/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>
   );
 }
 
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
index 67794ea93..7ebad798a 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
+++ b/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``;
\ No newline at end of file
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
index e9b4315f7..209133387 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
+++ b/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'} />
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
index 5ae255d15..19bada867 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
+++ b/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}
+    />
   );
 }
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
index 88bf62cad..45876042b 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
@@ -1,31 +1,46 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatNumber, T, TotalLine, TotalLines } from 'components';
+import {
+  FormatNumber,
+  TotalLineTextStyle,
+  TotalLineBorderStyle,
+  T,
+  TotalLine,
+  TotalLines,
+} from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
-
 /**
  * Payment receive detail footer.
+ * @returns {React.JSX}
  */
 export default function PaymentReceiveDetailFooter() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
-      <TotalLines>
+    <PaymentReceiveDetailsFooterRoot>
+      <PaymentReceiveTotalLines
+        labelColWidth={'180px'}
+        amountColWidth={'180px'}
+      >
         <TotalLine
           title={<T id={'payment_receive.details.subtotal'} />}
           value={<FormatNumber value={paymentReceive.amount} />}
-          className={PaymentDrawerCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'payment_receive.details.total'} />}
           value={paymentReceive.formatted_amount}
-          className={PaymentDrawerCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
-    </div>
+      </PaymentReceiveTotalLines>
+    </PaymentReceiveDetailsFooterRoot>
   );
 }
+
+export const PaymentReceiveDetailsFooterRoot = styled.div``;
+
+export const PaymentReceiveTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
index 564bf5e42..a9105e610 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
@@ -46,8 +46,7 @@
       border-bottom: 1px solid #000;
     }
     &_total {
-      border-bottom: 3px double #000;
-      font-weight: 600;
+      
     }
   }
 }
\ No newline at end of file
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
index b66d086f9..4d78f8d74 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
@@ -59,11 +59,11 @@ function ReceiptDetailActionBar({
   const onPrintReceipt = () => {
     openDialog('receipt-pdf-preview', { receiptId });
   };
-
   // Handle notify via SMS.
   const handleNotifyViaSMS = () => {
     openDialog('notify-receipt-via-sms', { receiptId });
   };
+
   return (
     <DrawerActionsBar>
       <NavbarGroup>
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
index 29fc0d98d..88d384b77 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import ReceiptDetail from './ReceiptDetail';
 import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';
 
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
index 0a1f95d79..d721337af 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
@@ -1,13 +1,16 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { T, TotalLines, TotalLine } from 'components';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
-import { FormatNumber } from '../../../components';
-
 /**
  * Receipts read-only details footer.
  */
@@ -15,29 +18,34 @@ export function ReceiptDetailFooter() {
   const { receipt } = useReceiptDetailDrawerContext();
 
   return (
-    <div className={clsx(ReceiptDrawerCls.detail_panel_footer)}>
-      <TotalLines>
+    <ReceiptDetailsFooterRoot>
+      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'receipt.details.subtotal'} />}
           value={<FormatNumber value={receipt.amount} />}
-          className={ReceiptDrawerCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'receipt.details.total'} />}
           value={receipt.formatted_amount}
-          className={ReceiptDrawerCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
         <TotalLine
           title={<T id={'receipt.details.payment_amount'} />}
           value={receipt.formatted_amount}
-          className={ReceiptDrawerCls.total_line_payment}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
         />
         <TotalLine
           title={<T id={'receipt.details.due_amount'} />}
           value={'0'}
-          className={ReceiptDrawerCls.total_line_dueAmount}
         />
-      </TotalLines>
-    </div>
+      </ReceiptTotalLines>
+    </ReceiptDetailsFooterRoot>
   );
 }
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
index 6e0579c0b..e2e601b44 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
@@ -1,12 +1,16 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 import { FormatNumber } from '../../../components';
 
-import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
-
 /**
  * Vendor Credit detail panel footer.
  */
@@ -14,19 +18,26 @@ export default function VendorCreditDetailDrawerFooter() {
   const { vendorCredit } = useVendorCreditDetailDrawerContext();
 
   return (
-    <div className={clsx(VendorCreditDetailCls.detail_panel_footer)}>
-      <TotalLines className={clsx(VendorCreditDetailCls.total_lines)}>
+    <VendorCreditFooterRoot>
+      <VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_subtotal'} />}
           value={<FormatNumber value={vendorCredit.formatted_amount} />}
-          className={VendorCreditDetailCls.total_line_subtotal}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_total'} />}
           value={vendorCredit.formatted_amount}
-          className={VendorCreditDetailCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
-    </div>
+      </VendorCreditTotalLines>
+    </VendorCreditFooterRoot>
   );
 }
+
+export const VendorCreditFooterRoot = styled.div``;
+
+export const VendorCreditTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
index 92b371cc6..f158d0fff 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
@@ -6,12 +6,16 @@ import VendorCreditDetailHeader from './VendorCreditDetailHeader';
 import VendorCreditDetailTable from './VendorCreditDetailTable';
 import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
 
+/**
+ * Vendor credit details panel.
+ * @returns {React.JSX}
+ */
 export default function VendorCreditDetailPanel() {
   return (
     <CommercialDocBox>
       <VendorCreditDetailHeader />
       <VendorCreditDetailTable />
-      {/* <VendorCreditDetailDrawerFooter /> */}
+      <VendorCreditDetailDrawerFooter />
     </CommercialDocBox>
   );
 }
diff --git a/src/containers/Expenses/ExpensesLanding/components.js b/src/containers/Expenses/ExpensesLanding/components.js
index 14f77d23b..fa4dfd11a 100644
--- a/src/containers/Expenses/ExpensesLanding/components.js
+++ b/src/containers/Expenses/ExpensesLanding/components.js
@@ -110,11 +110,11 @@ export function TotalAmountAccessor(row) {
  */
 export function PublishAccessor(row) {
   return row.is_published ? (
-    <Tag minimal={true}>
+    <Tag round={true} minimal={true}>
       <T id={'published'} />
     </Tag>
   ) : (
-    <Tag minimal={true} intent={Intent.WARNING}>
+    <Tag round={true} minimal={true} intent={Intent.WARNING}>
       <T id={'draft'} />
     </Tag>
   );
diff --git a/src/containers/InventoryAdjustments/components.js b/src/containers/InventoryAdjustments/components.js
index 49e74316f..c42409926 100644
--- a/src/containers/InventoryAdjustments/components.js
+++ b/src/containers/InventoryAdjustments/components.js
@@ -26,11 +26,11 @@ import {
  */
 export const PublishAccessor = (r) => {
   return r.is_published ? (
-    <Tag minimal={true}>
+    <Tag minimal={true} round={true}>
       <T id={'published'} />
     </Tag>
   ) : (
-    <Tag minimal={true} intent={Intent.WARNING}>
+    <Tag minimal={true} intent={Intent.WARNING} round={true}>
       <T id={'draft'} />
     </Tag>
   );
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/components.js b/src/containers/Preferences/Users/Roles/RolesForm/components.js
index 75b7921df..5335c2adc 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/components.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/components.js
@@ -4,8 +4,6 @@ import styled from 'styled-components';
 import { castArray } from 'lodash';
 
 import { FastField, useFormikContext } from 'formik';
-import { whenRtl, whenLtr } from 'utils/styled-components';
-import { Icon, Hint, If, Choose } from 'components';
 import { useRolesFormContext } from './RolesFormProvider';
 
 const RoleLabelCheckbox = ({ subject, label, description }) => (
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 8a063e69d..2f5570c46 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -21,6 +21,10 @@ import {
   AbilitySubject,
 } from '../../../../common/abilityOption';
 
+/**
+ * Receipts table row actions menu.
+ * @returns {React.JSX}
+ */
 export function ActionsMenu({
   payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
   row: { original: receipt },
@@ -88,13 +92,13 @@ export function StatusAccessor(receipt) {
   return (
     <Choose>
       <Choose.When condition={receipt.is_closed}>
-        <Tag minimal={true} intent={Intent.SUCCESS}>
+        <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
           <T id={'closed'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING}>
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
diff --git a/src/containers/TransactionsLocking/components.js b/src/containers/TransactionsLocking/components.js
index e87026981..d0285ce48 100644
--- a/src/containers/TransactionsLocking/components.js
+++ b/src/containers/TransactionsLocking/components.js
@@ -328,7 +328,7 @@ const TransactionLockingWrapp = styled.div`
   display: flex;
   align-items: center;
   border-radius: 6px;
-  border: 1px solid #d1dee2;
+  border: 1px solid #c4d2d7;
   padding: 16px 18px;
   margin-bottom: 25px;
   background: #fff;
diff --git a/src/style/components/Drawers/EstimateDetails.module.scss b/src/style/components/Drawers/EstimateDetails.module.scss
index 862a42e72..86ef8d448 100644
--- a/src/style/components/Drawers/EstimateDetails.module.scss
+++ b/src/style/components/Drawers/EstimateDetails.module.scss
@@ -49,15 +49,14 @@
 
   .total_line{
     &_subtotal {
-      border-bottom: 1px solid #000;
+      
     }
 
     &_total {
-      border-bottom: 3px double #000;
-      font-weight: 600;
+      
     }
     &_dueAmount {
-      font-weight: 600;
+      
     }
   }
 
diff --git a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
index 9624e7d53..ad61859e8 100644
--- a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
+++ b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
@@ -27,39 +27,7 @@
     }
   }
   .bigcapital-datatable {
-    .table {
-      border: 1px solid #d1dee2;
-      min-width: auto;
-
-      .tbody,
-      .tbody-inner {
-        height: auto;
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-      .tbody {
-        .tr .td {
-          padding: 0.4rem;
-          margin-left: -1px;
-          border-left: 1px solid #ececec;
-        }
-
-        .bp3-form-group {
-          margin-bottom: 0;
-
-          &:not(.bp3-intent-danger) .bp3-input {
-            border: 1px solid #d0dfe2;
-
-            &:focus {
-              box-shadow: 0 0 0 1px #116cd0;
-              border-color: #116cd0;
-            }
-          }
-        }
-      }
-    }
+    
   }
 
   .credit-remaining {