refactor: Total lines of commercial documents.

src/components/TotalLines/TotalLines.module.scss

@@ -1,12 +0,0 @@
-.total_lines {}
-
-
-.total_line {
-    display: flex;
-    border-bottom: 1px solid #d2dde2;
-    
-    :global .amount,
-    :global .title{
-        padding: 8px;
-    }
-}

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
+    <TotalLineRoot
-      className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
+      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;
+  }
+`;

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)}>
+    <BillDetailsFooterRoot>
-      <TotalLines>
+      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'bill.details.subtotal'} />}
-          value={<FormatNumber value={bill.amount} />}
+          value={<FormatNumber value={bill.amont} />}
-          className={BillDrawerCls.total_line_subtotal}
+          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>
+      </BillTotalLines>
-    </div>
+    </BillDetailsFooterRoot>
   );
 }
+
+export const BillDetailsFooterRoot = styled.div``;
+
+export const BillTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

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);

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 />

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,12 +28,18 @@ export default function CashflowTransactionDrawerHeader() {
   } = useCashflowTransactionDrawerContext();
 
   return (
-    <div className={'cashflow-drawer__content-header'}>
+    <CommercialDocHeader>
+      <CommercialDocHeader>
         <DetailsMenu>
           <DetailItem name={'total'} label={<T id={'total'} />}>
             <h3 class="amount">{formatted_amount}</h3>
           </DetailItem>
+        </DetailsMenu>
+      </CommercialDocHeader>
 
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem
               name={'transaction_type'}
               label={<T id={'cash_flow_drawer.label_transaction_type'} />}
@@ -43,21 +53,24 @@ export default function CashflowTransactionDrawerHeader() {
             >
               {transaction_number}
             </DetailItem>
-        <DetailItem
+
-          label={<T id={'date'} />}
+            <DetailItem label={<T id={'date'} />}>
-          children={<FormatDate value={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">
+      {/* <div class="cashflow-drawer__content-description">
         <b class="title">
           <T id={'description'} />
         </b>
         : {defaultTo(description, '—')}
-      </div>
+      </div> */}
-    </div>
+    </CommercialDocHeader>
   );
 }

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 (
+  return <CommercialDocEntriesTable columns={columns} data={transactions} />;
-    <div className="cashflow-drawer__content-table">
-      <DataTable columns={columns} data={transactions} />
-    </div>
-  );
 }

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)}>
+    <CreditNoteDetailsFooterRoot>
-      <TotalLines className={clsx(CreditNoteDetailCls.total_lines)}>
+      <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>
+      </CreditNoteTotalLines>
-    </div>
+    </CreditNoteDetailsFooterRoot>
   );
 }
+
+export const CreditNoteDetailsFooterRoot = styled.div``;
+
+export const CreditNoteTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

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>
   );
 }

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)}>
+    <EstimateDetailsFooterRoot>
-      <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
+      <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>
+      </EstimateTotalLines>
-
+    </EstimateDetailsFooterRoot>
-      <If condition={false}>
-        <div className={clsx(EstimateDetailsCls.detail_panel_note)}>
-          <p>
-            <b><T id={'estimate.details.note'} />:</b> --
-          </p>
-        </div>
-      </If>
-    </div>
   );
 }
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

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,7 +29,11 @@ export default function ExpenseDrawerHeader() {
             <Money amount={total_amount} currency={currency_code} />
           </h3>
         </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>
@@ -46,13 +50,17 @@ export default function ExpenseDrawerHeader() {
               {moment(published_at).format('YYYY MMM DD')}
             </DetailItem>
           </DetailsMenu>
+        </Col>
 
-      <DetailsMenu direction={'horizantal'}>
+        <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">
+    <CommercialDocEntriesTable
-      <DataTable columns={columns} data={expense.categories} />
+      columns={columns}
-    </div>
+      data={expense.categories}
+      styleName={TableStyle.Constrant}
+    />
   );
 }

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 {
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
-    inventoryAdjustment: {
-      date,
-      type,
-      adjustment_account,
-      inventory_direction,
-      description,
-      reference_no,
-      reason,
-      published_at,
-      created_at,
-    },
-  } = 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 {
+  // Inventory adjustment details drawer context.
-    inventoryAdjustment: { entries },
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
-  } = useInventoryAdjustmentDrawerContext();
 
   return (
-    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_table)}>
+    <CommercialDocEntriesTable
-      <DataTable
       columns={columns}
-        data={entries}
+      data={inventoryAdjustment.entries}
       className={'table-constrant'}
     />
-    </div>
   );
 }

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>
+      <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
-        <SubTotalLine
+        <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)`
+const InvoiceDetailsFooterRoot = styled.div``;
-  border-bottom: 1px solid #000;
-`;
 
-const InvoiceTotalLine = styled(TotalLine)`
+const InvoiceTotalLines = styled(TotalLines)`
-  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;
-    }
-  }
 `;

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.

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'}>
+    <ManualJournalDetailsRoot>
-      <ManualJournalDrawerActionBar manualJournal={manualJournal} />
+      <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,9 +28,13 @@ export default function ManualJournalDrawerHeader() {
     <div className={'journal-drawer__content-header'}>
       <DetailsMenu>
         <DetailItem name={'total'} label={<T id={'total'} />}>
-          <h3 class="amount">{formatted_amount}</h3>
+          <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>
@@ -41,6 +51,8 @@ export default function ManualJournalDrawerHeader() {
               {currency_code}
             </DetailItem>
           </DetailsMenu>
+        </Col>
+      </Row>
 
       <div class="journal-drawer__content-description">
         <b class="title">

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 {
+  const { manualJournal } = useManualJournalDrawerContext();
-    manualJournal: { entries, description },
-  } = useManualJournalDrawerContext();
 
   return (
-    <div className="journal-drawer__content-table">
+    <CommercialDocEntriesTable
-      <DataTable columns={columns} data={entries} />
+      columns={columns}
-
+      data={manualJournal.entries}
-      <If condition={description}>
+      styleName={TableStyle.Constrant}
-        <p className={'desc'}>
+    />
-          <b>Description</b>: {description}
-        </p>
-      </If>
-    </div>
   );
 }

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)}>
+    <PaymentReceiveDetailsFooterRoot>
-      <TotalLines>
+      <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>
+      </PaymentReceiveTotalLines>
-    </div>
+    </PaymentReceiveDetailsFooterRoot>
   );
 }
+
+export const PaymentReceiveDetailsFooterRoot = styled.div``;
+
+export const PaymentReceiveTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

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;
     }
   }
 }

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>

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';
 

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 {
-
+  T,
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+  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)}>
+    <ReceiptDetailsFooterRoot>
-      <TotalLines>
+      <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>
+      </ReceiptTotalLines>
-    </div>
+    </ReceiptDetailsFooterRoot>
   );
 }
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

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)}>
+    <VendorCreditFooterRoot>
-      <TotalLines className={clsx(VendorCreditDetailCls.total_lines)}>
+      <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>
+      </VendorCreditTotalLines>
-    </div>
+    </VendorCreditFooterRoot>
   );
 }
+
+export const VendorCreditFooterRoot = styled.div``;
+
+export const VendorCreditTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

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>
   );
 }

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>
   );

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>
   );

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 }) => (

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>

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;

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;
+      
     }
   }
 

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 {