feat: optimize style of invoice details.

feat: optimize style of credit note details.
feat: optimize global style checkbox  of the application.

src/common/TableStyle.js

@@ -0,0 +1,6 @@
+
+
+export const TableStyle = {
+  Constrant: 'constrant',
+  Regular: 'regular'
+}

src/common/index.js

@@ -0,0 +1,4 @@
+
+
+
+export * from './TableStyle';

src/components/Button/ButtonLink.js

@@ -5,6 +5,7 @@ export const ButtonLink = styled.button`
   border: 0;
   background: transparent;
   cursor: pointer;
+  text-align: inherit;
 
   &:hover,
   &:active {

src/components/Card.js

@@ -1,6 +1,11 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
- 
+import styled from 'styled-components';
+
 export default function Card({ className, children }) {
-  return <div className={classNames('card', className)}>{children}</div>;
+  return <CardRoot className={clsx('card', className)}>{children}</CardRoot>;
 }
+
+const CardRoot = styled.div`
+  padding: 15px;
+`;

src/components/CommercialDoc/index.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import Card from '../Card';
+import DataTable from '../DataTable';
+
+export const CommercialDocBox = styled(Card)`
+  padding: 22px 20px;
+`;
+
+export const CommercialDocHeader = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const CommercialDocTopHeader = styled.div`
+  margin-bottom: 30px;
+`;
+
+export const CommercialDocEntriesTable = styled(DataTable)`
+  .tbody .tr:last-child .td {
+    border-bottom: 1px solid #d2dce2;
+  }
+`;

src/components/Dashboard/DashboardActionsBar.js

@@ -1,16 +1,19 @@
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'classnames';
 import { Navbar } from '@blueprintjs/core';
 
-export default function DashboardActionsBar({ children, name }) {
+export default function DashboardActionsBar({ className, children, name }) {
   return (
     <div
-      className={classnames({
+      className={clsx(
-        'dashboard__actions-bar': true,
+        {
-        [`dashboard__actions-bar--${name}`]: !!name
+          'dashboard__actions-bar': true,
-      })}
+          [`dashboard__actions-bar--${name}`]: !!name,
+        },
+        className,
+      )}
     >
-      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
+      <Navbar className="navbar--dashboard-actions-bar">{children}</Navbar>
     </div>
   );
 }

src/components/Datatable/TableWrapper.js

@@ -16,6 +16,7 @@ export default function TableWrapper({ children }) {
       expandable,
       virtualizedRows,
       className,
+      styleName,
       size,
     },
   } = useContext(TableContext);
@@ -28,6 +29,7 @@ export default function TableWrapper({ children }) {
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,
+        [`table--${styleName}`]: styleName,
       })}
     >
       <ScrollSync>

src/components/Details/index.js

@@ -17,6 +17,7 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
 export function DetailsMenu({
   children,
   direction = DIRECTION.VERTICAL,
+  textAlign,
   minLabelSize,
   className,
 }) {
@@ -27,6 +28,7 @@ export function DetailsMenu({
         {
           'details-menu--vertical': direction === DIRECTION.VERTICAL,
           'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
+          [`align-${textAlign}`]: textAlign,
         },
         className,
       )}

src/components/Drawer/DrawerActionsBar.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+export function DrawerActionsBar({ ...props }) {
+  return <DrawerActionsBarRoot {...props} />;
+}
+
+const DrawerActionsBarRoot = styled(DashboardActionsBar)`
+  border-bottom: 1px solid #d9d9da;
+`;

src/components/Drawer/DrawerMainTabs.js

@@ -1,15 +1,54 @@
 import React from 'react';
 import { Tabs } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 /**
  * Drawer main tabs.
  */
 export function DrawerMainTabs({ children, ...restProps }) {
   return (
-    <div class="drawer__main-tabs">
+    <DrawerMainTabsRoot>
       <Tabs animate={true} large={true} {...restProps}>
         {children}
       </Tabs>
-    </div>
+    </DrawerMainTabsRoot>
   );
 }
+
+const DrawerMainTabsRoot = styled.div`
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+      background-color: #fff;
+      padding: 0 15px;
+      border-bottom: 2px solid #e1e2e8;
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #7f8596;
+        margin: 0 1rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: #0052cc;
+        }
+      }
+      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+        height: 2px;
+        bottom: -2px;
+      }
+    }
+
+    .bp3-tab-panel {
+      margin-top: 0;
+
+      .card {
+        margin: 15px;
+      }
+    }
+  }
+`;

src/components/Drawer/index.js

@@ -13,3 +13,5 @@ export function DrawerLoading({ loading, mount = false, children }) {
 export function DrawerBody({ children }) {
   return <div className={Classes.DRAWER_BODY}>{children}</div>;
 }
+
+export * from './DrawerActionsBar';

src/components/Tags/CurrencyTag.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const CurrencyTag = styled.span`
+  background: #3e9215;
+  color: #fff;
+  display: inline-block;
+  border-radius: 3px;
+  padding: 2px 4px;
+  line-height: 1;
+  margin-left: 4px;
+`;

src/components/Tags/index.js

@@ -0,0 +1,3 @@
+
+
+export * from './CurrencyTag';

src/components/index.js

@@ -90,6 +90,8 @@ export * from './Contacts';
 export * from './Utils/Join';
 export * from './Typo';
 export * from './TextStatus';
+export * from './Tags';
+export * from './CommercialDoc';
 
 const Hint = FieldHint;
 

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js

@@ -1,38 +1,51 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
+import styled from 'styled-components';
 import intl from 'react-intl-universal';
-import { DrawerMainTabs } from 'components';
 
+import { DrawerMainTabs } from 'components';
+import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
-import clsx from 'classnames';
-
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
 
 /**
  * Credit Note view detail.
+ * @returns {React.JSX}
  */
 export default function CreditNoteDetail() {
   return (
-    <div className={clsx(CreditNoteDetailCls.root)}>
+    <CreditNoteRoot>
-      <DrawerMainTabs>
+      <CreditNoteDetailActionsBar />
-        <Tab
+      <CreditNoteDetailsTabs />
-          title={intl.get('details')}
+    </CreditNoteRoot>
-          id={'details'}
-          panel={<CreditNoteDetailPanel />}
-        />
-        <Tab
-          title={intl.get('credit_note.drawer.label_refund_transactions')}
-          id={'refund_transactions'}
-          panel={<RefundCreditNoteTransactionsTable />}
-        />
-        <Tab
-          title={intl.get('credit_note.drawer.label_invoices_reconciled')}
-          id={'reconcile_transactions'}
-          panel={<ReconcileCreditNoteTransactionsTable />}
-        />
-      </DrawerMainTabs>
-    </div>
   );
 }
+
+/**
+ * Credit note details tabs.
+ * @returns {React.JSX}
+ */
+function CreditNoteDetailsTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<CreditNoteDetailPanel />}
+      />
+      <Tab
+        title={intl.get('credit_note.drawer.label_refund_transactions')}
+        id={'refund_transactions'}
+        panel={<RefundCreditNoteTransactionsTable />}
+      />
+      <Tab
+        title={intl.get('credit_note.drawer.label_invoices_reconciled')}
+        id={'reconcile_transactions'}
+        panel={<ReconcileCreditNoteTransactionsTable />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const CreditNoteRoot = styled.div``;

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import {
   Button,
   NavbarGroup,
@@ -8,17 +7,17 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
-import { CreditNoteMenuItem } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, If, Can } from 'components';
+import { DrawerActionsBar, Icon, FormattedMessage as T, If } from 'components';
 
 import { compose } from 'utils';
+import { CreditNoteMenuItem } from './utils';
 
 /**
  * Credit note detail actions bar.
@@ -57,7 +56,7 @@ function CreditNoteDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Button
           className={Classes.MINIMAL}
@@ -69,7 +68,7 @@ function CreditNoteDetailActionsBar({
         <If condition={!creditNote.is_closed && !creditNote.is_draft}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            icon={<Icon icon="arrow-upward" iconSize={18} />}
             text={<T id={'refund'} />}
             onClick={handleRefundCreditNote}
           />
@@ -82,13 +81,7 @@ function CreditNoteDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteCreditNote}
         />
-        <If
+        <If condition={creditNote.is_published && !creditNote.is_closed}>
-          condition={
-            !creditNote.is_draft &&
-            !creditNote.is_closed
-            // creditNote.is_published
-          }
-        >
           <NavbarDivider />
           <CreditNoteMenuItem
             payload={{
@@ -97,7 +90,7 @@ function CreditNoteDetailActionsBar({
           />
         </If>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js

@@ -67,7 +67,9 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
     >
       <DrawerHeaderContent
         name="credit-note-detail-drawer"
-        title={intl.get('credit_note.drawer_credit_note_detail')}
+        title={intl.get('credit_note.drawer_credit_note_detail', {
+          creditNumber: creditNote.credit_note_number,
+        })}
       />
       <CreditNoteDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js

@@ -1,12 +1,22 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import {
+  FormatDate,
+  T,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  ButtonLink,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from 'components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+import { CreditNoteDetailsStatus } from './utils';
 
 /**
  * Credit note details drawer header.
@@ -15,46 +25,76 @@ export default function CreditNoteDetailHeader() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
 
   return (
-    <div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
+    <CommercialDocHeader>
-      <DetailsMenu>
+      <CommercialDocTopHeader>
-        <DetailItem label={intl.get('amount')}>
+        <DetailsMenu>
-          <span class="big-number">{creditNote.formatted_amount}</span>
+          <AmountItem label={intl.get('amount')}>
-        </DetailItem>
+            <span class="big-number">{creditNote.formatted_amount}</span>
-        <DetailItem
+          </AmountItem>
-          label={intl.get('credit_note.drawer.label_credit_note_no')}
-          children={defaultTo(creditNote.credit_note_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={creditNote.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('credit_note.drawer.label_credit_note_date')}
-          children={
-            <FormatDate value={creditNote.formatted_credit_note_date} />
-          }
-        />
-        <DetailItem
-          label={intl.get('credit_note.drawer.label_credits_remaining')}
-          children={creditNote.formatted_credits_remaining}
-        />
-      </DetailsMenu>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+          <StatusItem>
-        <DetailItem
+            <CreditNoteDetailsStatus creditNote={creditNote} />
-          label={intl.get('reference')}
+          </StatusItem>
-          children={creditNote.reference_no}
+        </DetailsMenu>
-        />
+      </CommercialDocTopHeader>
-        <DetailItem
-          label={intl.get('note')}
-          children={defaultTo(creditNote.note, '-')}
-        />
 
-        <DetailItem
+      <Row>
-          label={<T id={'credit_note.drawer.label_created_at'} />}
+        <Col xs={6}>
-          children={<FormatDate value={creditNote.created_at} />}
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        />
+            <DetailItem
-      </DetailsMenu>
+              label={intl.get('credit_note.drawer.label_credit_note_no')}
-    </div>
+            >
+              {defaultTo(creditNote.credit_note_number, '-')}
+            </DetailItem>
+
+            <DetailItem label={intl.get('customer_name')}>
+              <ButtonLink>{creditNote.customer?.display_name}</ButtonLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_date')}
+            >
+              <FormatDate value={creditNote.formatted_credit_note_date} />
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credits_remaining')}
+            >
+              <strong>{creditNote.formatted_credits_remaining}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(creditNote.reference_no, '-')}
+            />
+            <DetailItem
+              label={intl.get('note')}
+              children={defaultTo(creditNote.note, '-')}
+            />
+
+            <DetailItem
+              label={<T id={'credit_note.drawer.label_created_at'} />}
+              children={<FormatDate value={creditNote.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+
+const AmountItem = styled(DetailItem)`
+  width: 50%;
+`;

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js

@@ -1,24 +1,20 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailHeader from './CreditNoteDetailHeader';
 import CreditNoteDetailTable from './CreditNoteDetailTable';
-import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
+// import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
-
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
 
+/**
+ * Credit note details panel.
+ */
 export default function CreditNoteDetailPanel() {
   return (
-    <div className={clsx(CreditNoteDetailCls.detail_panel)}>
+    <CommercialDocBox>
-      <CreditNoteDetailActionsBar />
+      <CreditNoteDetailHeader />
-      <Card>
+      <CreditNoteDetailTable />
-        <CreditNoteDetailHeader />
+      {/* <CreditNoteDetailDrawerFooter /> */}
-        <CreditNoteDetailTable />
+    </CommercialDocBox>
-        <CreditNoteDetailDrawerFooter />
-      </Card>
-    </div>
   );
 }

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
+
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
-
 import { useCreditNoteReadOnlyEntriesColumns } from './utils';
 
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
-
 /**
  * Credit note detail table.
+ * @returns {React.JSX}
  */
 export default function CreditNoteDetailTable() {
   const {
@@ -20,12 +18,10 @@ export default function CreditNoteDetailTable() {
   const columns = useCreditNoteReadOnlyEntriesColumns();
 
   return (
-    <div className={clsx(CreditNoteDetailCls.detail_panel_table)}>
+    <CommercialDocEntriesTable
-      <DataTable
+      columns={columns}
-        columns={columns}
+      data={entries}
-        data={entries}
+      className={'table-constrant'}
-        className={'table-constrant'}
+    />
-      />
-    </div>
   );
 }

src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { DataTable, Card } from 'components';
 
-import '../../../../style/pages/RefundCreditNote/List.scss';
+import { TableStyle } from 'common';
-
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
-
 import {
   useReconcileCreditTransactionsTableColumns,
   ActionsMenu,
@@ -21,8 +19,10 @@ function RefundCreditNoteTransactionsTable({
   // #withAlertsActions
   openAlert,
 }) {
+  // Credit note drawer context.
   const { reconcileCreditNotes } = useCreditNoteDetailDrawerContext();
 
+  // Reconcile credit transactions table columns.
   const columns = useReconcileCreditTransactionsTableColumns();
 
   // Handle delete reconile credit.
@@ -39,6 +39,7 @@ function RefundCreditNoteTransactionsTable({
         payload={{
           onDelete: handleDeleteReconcileCreditNote,
         }}
+        styleName={TableStyle.Constrant}
         className={'datatable--refund-transactions'}
       />
     </Card>

src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js

@@ -20,6 +20,9 @@ export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   );
 }
 
+/**
+ * Credit note reconcilation with invoices table columns.
+ */
 export function useReconcileCreditTransactionsTableColumns() {
   return React.useMemo(
     () => [

src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { DataTable, Card } from 'components';
 
-import '../../../../style/pages/RefundCreditNote/List.scss';
+import { TableStyle } from 'common';
-
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
@@ -22,10 +21,10 @@ function RefundCreditNoteTransactionsTable({
 }) {
   const { refundCreditNote } = useCreditNoteDetailDrawerContext();
 
+  // Refund credit transactions table columns.
   const columns = useRefundCreditTransactionsTableColumns();
 
   // Handle delete refund credit.
-
   const handleDeleteRefundCreditNote = ({ id }) => {
     openAlert('refund-credit-delete', { creditNoteId: id });
   };
@@ -36,10 +35,10 @@ function RefundCreditNoteTransactionsTable({
         columns={columns}
         data={refundCreditNote}
         ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
         payload={{
           onDelete: handleDeleteRefundCreditNote,
         }}
-        className={'datatable--refund-transactions'}
       />
     </Card>
   );

src/containers/Drawers/CreditNoteDetailDrawer/utils.js

@@ -7,11 +7,14 @@ import {
   Position,
   MenuItem,
   Menu,
+  Tag,
+  Intent,
 } from '@blueprintjs/core';
 import {
   Icon,
   FormattedMessage as T,
   FormatNumberCell,
+  Choose,
 } from '../../../components';
 
 export const useCreditNoteReadOnlyEntriesColumns = () =>
@@ -58,7 +61,11 @@ export const useCreditNoteReadOnlyEntriesColumns = () =>
     [],
   );
 
-export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
+/**
+ * Credit note more actions mneu.
+ * @returns {React.JSX}
+ */
+export function CreditNoteMenuItem({ payload: { onReconcile } }) {
   return (
     <Popover
       minimal={true}
@@ -79,4 +86,32 @@ export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
       <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
     </Popover>
   );
-};
+}
+
+/**
+ * Credit note details status.
+ * @returns {React.JSX}
+ */
+export function CreditNoteDetailsStatus({ creditNote }) {
+  return (
+    <Choose>
+      <Choose.When condition={creditNote.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -1,45 +1,50 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
+import styled from 'styled-components';
-import clsx from 'classnames';
 
 import { DrawerMainTabs } from 'components';
 
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
+import InvoiceGLEntriesTable from './InvoiceGLEntriesTable';
 import InvoicePaymentTransactionsTable from './InvoicePaymentTransactions/InvoicePaymentTransactionsTable';
 import InvoiceDetailTab from './InvoiceDetailTab';
-import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+/**
+ * Invoice details tabs.
+ * @returns {React.JSX}
+ */
+function InvoiceDetailsTabs() {
+  return (
+    <DrawerMainTabs
+      renderActiveTabPanelOnly={true}
+      defaultSelectedTabId="details"
+    >
+      <Tab title={'Overview'} id={'details'} panel={<InvoiceDetailTab />} />
+      <Tab
+        title={'Journal Entries'}
+        id={'journal_entries'}
+        panel={<InvoiceGLEntriesTable />}
+      />
+      <Tab
+        title={'Payment Transactions'}
+        id={'payment_transactions'}
+        panel={<InvoicePaymentTransactionsTable />}
+      />
+    </DrawerMainTabs>
+  );
+}
 
 /**
  * Invoice view detail.
+ * @returns {React.JSX}
  */
 export default function InvoiceDetail() {
-  const { transactions } = useInvoiceDetailDrawerContext();
-
   return (
-    <div className={clsx(InvoiceDrawerCls.invoice_details)}>
+    <InvoiceDetailsRoot>
-      <DrawerMainTabs
+      <InvoiceDetailActionsBar />
-        renderActiveTabPanelOnly={true}
+      <InvoiceDetailsTabs />
-        defaultSelectedTabId="details"
+    </InvoiceDetailsRoot>
-      >
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<InvoiceDetailTab />}
-        />
-        <Tab
-          title={intl.get('journal_entries')}
-          id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-        <Tab
-          title={intl.get('payment_transactions')}
-          id={'payment_transactions'}
-          panel={<InvoicePaymentTransactionsTable />}
-        />
-      </DrawerMainTabs>
-    </div>
   );
 }
+
+export const InvoiceDetailsRoot = styled.div``;

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import {
   Button,
   NavbarGroup,
@@ -8,7 +7,6 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
@@ -16,7 +14,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Can, Icon, FormattedMessage as T } from 'components';
+import { If, Can, Icon, DrawerActionsBar, FormattedMessage as T } from 'components';
 import {
   SaleInvoiceAction,
   PaymentReceiveAction,
@@ -24,7 +22,6 @@ import {
 } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
-
 import { BadDebtMenuItem } from './utils';
 
 /**
@@ -81,7 +78,7 @@ function InvoiceDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
           <Button
@@ -90,14 +87,13 @@ function InvoiceDetailActionsBar({
             text={<T id={'edit_invoice'} />}
             onClick={handleEditInvoice}
           />
-
           <NavbarDivider />
         </Can>
         <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
           <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
             <Button
               className={Classes.MINIMAL}
-              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+              icon={<Icon icon="arrow-downward" iconSize={18} />}
               text={<T id={'add_payment'} />}
               onClick={handleQuickPaymentInvoice}
             />
@@ -132,7 +128,7 @@ function InvoiceDetailActionsBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import InvoiceDetail from './InvoiceDetail';
 import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
 
 /**
  * Invoice detail drawer content.
+ * @returns {React.JSX}
  */
 export default function InvoiceDetailDrawerContent({
   // #ownProp

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js

@@ -1,45 +1,30 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
-import {
+import { useInvoice } from 'hooks/query';
-  useTransactionsByReference,
-  useInvoice,
-  useInvoicePaymentTransactions,
-} from 'hooks/query';
 
 const InvoiceDetailDrawerContext = React.createContext();
 /**
  * Invoice detail provider.
  */
 function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: invoiceId,
-      reference_type: 'SaleInvoice',
-    },
-    { enabled: !!invoiceId },
-  );
-
   // Fetch sale invoice details.
   const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
     enabled: !!invoiceId,
   });
 
-  //provider.
+  // Provider.
   const provider = {
-    transactions,
     invoiceId,
     invoice,
   };
   return (
-    <DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
+    <DrawerLoading loading={isInvoiceLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
-        title={intl.get('invoice_details')}
+        title={intl.get('invoice_details.drawer.title', {
+          invoiceNumber: invoice.invoice_no,
+        })}
       />
       <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { T, TotalLines, FormatNumber, TotalLine } from 'components';
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
@@ -12,29 +11,55 @@ export function InvoiceDetailFooter() {
   const { invoice } = useInvoiceDetailDrawerContext();
 
   return (
-    <div className={clsx(InvoiceDrawerCls.detail_panel_footer)}>
+    <InvoiceDetailsFooterRoot>
       <TotalLines>
-        <TotalLine
+        <SubTotalLine
           title={<T id={'invoice.details.subtotal'} />}
           value={<FormatNumber value={invoice.balance} />}
-          className={InvoiceDrawerCls.total_line_subtotal}
         />
-        <TotalLine
+        <InvoiceTotalLine
           title={<T id={'invoice.details.total'} />}
           value={invoice.formatted_amount}
-          className={InvoiceDrawerCls.total_line_total}
         />
         <TotalLine
           title={<T id={'invoice.details.payment_amount'} />}
           value={invoice.formatted_payment_amount}
-          className={InvoiceDrawerCls.total_line_payment}
         />
-        <TotalLine
+        <DueAmountLine
           title={<T id={'invoice.details.due_amount'} />}
           value={invoice.formatted_due_amount}
-          className={InvoiceDrawerCls.total_line_dueAmount}
         />
       </TotalLines>
-    </div>
+    </InvoiceDetailsFooterRoot>
   );
 }
+
+const SubTotalLine = styled(TotalLine)`
+  border-bottom: 1px solid #000;
+`;
+
+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;
+    }
+  }
+`;

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js

@@ -1,12 +1,20 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import {
+  ButtonLink,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  FormatDate,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
-
+import { InvoiceDetailsStatus } from './utils';
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
 
 /**
  * Invoice detail header.
@@ -14,44 +22,81 @@ import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss
 export default function InvoiceDetailHeader() {
   const { invoice } = useInvoiceDetailDrawerContext();
 
-  return (
+  const handleCustomerLinkClick = () => {};
-    <div className={clsx(InvoiceDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <h3 class="big-number">{invoice.formatted_amount}</h3>
-        </DetailItem>
-        <DetailItem
-          label={intl.get('invoice_no')}
-          children={invoice.invoice_no}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={invoice.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('invoice_date')}
-          children={<FormatDate value={invoice.invoice_date} />}
-        />
-        <DetailItem
-          label={intl.get('due_date')}
-          children={<FormatDate value={invoice.due_date} />}
-        />
-      </DetailsMenu>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+  return (
-        <DetailItem
+    <CommercialDocHeader>
-          label={intl.get('due_amount')}
+      <CommercialDocTopHeader>
-          children={invoice.formatted_due_amount}
+        <DetailsMenu>
-        />
+          <AmountDetailItem label={intl.get('amount')}>
-        <DetailItem
+            <h3 class="big-number">{invoice.formatted_amount}</h3>
-          label={intl.get('reference')}
+          </AmountDetailItem>
-          children={defaultTo(invoice.reference_no, '--')}
+
-        />
+          <StatusDetailItem label={''}>
-        <DetailItem
+            <InvoiceDetailsStatus invoice={invoice} />
-          label={intl.get('invoice.details.created_at')}
+          </StatusDetailItem>
-          children={<FormatDate value={invoice.created_at} />}
+        </DetailsMenu>
-        />
+      </CommercialDocTopHeader>
-      </DetailsMenu>
+
-    </div>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('invoice_date')}>
+              <FormatDate value={invoice.invoice_date} />
+            </DetailItem>
+
+            <DetailItem label={intl.get('due_date')}>
+              <FormatDate value={invoice.due_date} />
+            </DetailItem>
+
+            <DetailItem label={intl.get('customer_name')}>
+              <ButtonLink onClick={handleCustomerLinkClick}>
+                {invoice.customer?.display_name}
+              </ButtonLink>
+            </DetailItem>
+
+            <DetailItem label={intl.get('invoice_no')}>
+              {invoice.invoice_no}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+            textAlign={'right'}
+          >
+            <DetailItem label={intl.get('due_amount')}>
+              <strong>{invoice.formatted_due_amount}</strong>
+            </DetailItem>
+
+            <DetailItem label={intl.get('payment_amount')}>
+              <strong>{invoice.formatted_payment_amount}</strong>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(invoice.reference_no, '--')}
+            />
+            <DetailItem
+              label={intl.get('invoice.details.created_at')}
+              children={<FormatDate value={invoice.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;
+
+const AmountDetailItem = styled(DetailItem)`
+  width: 50%;
+`;

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js

@@ -1,28 +1,20 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
 import InvoiceDetailHeader from './InvoiceDetailHeader';
 import InvoiceDetailTable from './InvoiceDetailTable';
 import { InvoiceDetailFooter } from './InvoiceDetailFooter';
 
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
-
 /**
  * Invoice readonly details tab panel.
  */
 export default function InvoiceDetailTab() {
   return (
-    <div className={clsx(InvoiceDrawerCls.detail_panel)}>
+    <CommercialDocBox>
-      <InvoiceDetailActionsBar />
+      <InvoiceDetailHeader />
-
+      <InvoiceDetailTable />
-      <Card>
+      <InvoiceDetailFooter />
-        <InvoiceDetailHeader />
+    </CommercialDocBox>
-        <InvoiceDetailTable />
-        <InvoiceDetailFooter />
-      </Card>
-    </div>
   );
-}
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
 
 import { useInvoiceReadonlyEntriesColumns } from './utils';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+import { TableStyle } from '../../../common';
 
 /**
  * Invoice readonly details entries table columns.
@@ -14,17 +13,16 @@ import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss
 export default function InvoiceDetailTable() {
   const columns = useInvoiceReadonlyEntriesColumns();
 
+  // Invoice details drawer context.
   const {
     invoice: { entries },
   } = useInvoiceDetailDrawerContext();
 
   return (
-    <div className={clsx(InvoiceDrawerCls.detail_panel_table)}>
+    <CommercialDocEntriesTable
-      <DataTable
+      columns={columns}
-        columns={columns}
+      data={entries}
-        data={entries}
+      styleName={TableStyle.Constrant}
-        className={'table-constrant'}
+    />
-      />
-    </div>
   );
-}
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Invoice GL entries table.
+ * @returns {React.JSX}
+ */
+export default function InvoiceGLEntriesTable() {
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: invoiceId,
+      reference_type: 'SaleInvoice',
+    },
+    { enabled: !!invoiceId },
+  );
+
+  return (
+    <InvoiceGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <InvoiceGLEntriesDatatable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </InvoiceGLEntriesRoot>
+  );
+}
+
+const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)`
+  .table .tbody .tr:last-child .td {
+    border-bottom: 0;
+  }
+`;
+
+const InvoiceGLEntriesRoot = styled(Card)`
+  padding: 15px;
+`;

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js

@@ -7,12 +7,17 @@ import { useInvoicePaymentTransactionsColumns } from './components';
 import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
 import { useInvoicePaymentTransactions } from 'hooks/query';
 
+import { TableStyle } from '../../../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
 /**
  * Invoice payment transactions datatable.
  */
 export default function InvoicePaymentTransactionsTable() {
+  // Retrieve invoice payment transactions columns.
   const columns = useInvoicePaymentTransactionsColumns();
 
+  // Invoice drawer context.
   const { invoiceId } = useInvoiceDetailDrawerContext();
 
   // Fetch invoice payment transactions.
@@ -23,6 +28,7 @@ export default function InvoicePaymentTransactionsTable() {
   } = useInvoicePaymentTransactions(invoiceId, {
     enabled: !!invoiceId,
   });
+
   return (
     <Card>
       <DataTable
@@ -31,7 +37,8 @@ export default function InvoicePaymentTransactionsTable() {
         loading={isPaymentTransactionLoading}
         headerLoading={isPaymentTransactionLoading}
         progressBarLoading={isPaymentTransactionFetching}
-        className={'payment-transactions'}
+        TableLoadingRenderer={TableSkeletonRows}
+        styleName={TableStyle.Constrant}
       />
     </Card>
   );

src/containers/Drawers/InvoiceDetailDrawer/index.js

@@ -21,7 +21,7 @@ function InvoiceDetailDrawer({
     <Drawer
       isOpen={isOpen}
       name={name}
-      style={{ minWidth: '700px', maxWidth: '900px' }}
+      style={{ minWidth: '700px', maxWidth: '1000px' }}
       size={'65%'}
     >
       <DrawerSuspense>

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 import {
   Button,
   Popover,
@@ -7,13 +8,20 @@ import {
   Position,
   MenuItem,
   Menu,
+  Intent,
+  Tag,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T, Choose, Can } from 'components';
+import {
+  FormatNumberCell,
+  Icon,
+  FormattedMessage as T,
+  Choose,
+  Can,
+} from 'components';
 import {
   SaleInvoiceAction,
   AbilitySubject,
 } from '../../../common/abilityOption';
-import { FormatNumberCell } from '../../../components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
@@ -63,6 +71,10 @@ export const useInvoiceReadonlyEntriesColumns = () =>
     [],
   );
 
+/**
+ * Invoice details more actions menu.
+ * @returns {React.JSX}
+ */
 export const BadDebtMenuItem = ({
   payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
 }) => {
@@ -106,3 +118,43 @@ export const BadDebtMenuItem = ({
   );
 };
 
+/**
+ * Invoice details status.
+ * @returns {React.JSX}
+ */
+export function InvoiceDetailsStatus({ invoice }) {
+  return (
+    <Choose>
+      <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
+        <StatusTag intent={Intent.SUCCESS} round={true}>
+          <T id={'paid'} />
+        </StatusTag>
+      </Choose.When>
+
+      <Choose.When condition={invoice.is_delivered}>
+        <Choose>
+          <Choose.When condition={invoice.is_overdue}>
+            <StatusTag intent={Intent.WARNING} round={true}>
+              Overdue
+            </StatusTag>
+          </Choose.When>
+          <Choose.Otherwise>
+            <StatusTag intent={Intent.PRIMARY} round={true}>
+              Delivered
+            </StatusTag>
+          </Choose.Otherwise>
+        </Choose>
+      </Choose.When>
+      <Choose.Otherwise>
+        <StatusTag round={true} minimal={true}>
+          <T id={'draft'} />
+        </StatusTag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+const StatusTag = styled(Tag)`
+  min-width: 65px;
+  text-align: center;
+`;

src/containers/JournalEntriesTable/JournalEntriesTable.js

@@ -1,58 +1,53 @@
 import React from 'react';
-import { DataTable, Card } from 'components';
+import { DataTable } from 'components';
-import intl from 'react-intl-universal';
-import moment from 'moment';
 
-import 'style/pages/JournalEntries/List.scss';
+import styled from 'styled-components';
+import * as R from 'ramda';
+
+import { CurrencyTag } from 'components';
+import { TableStyle } from '../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { useGLEntriesTableColumns } from './utils';
 
 /**
  * Journal entries table.
  */
-export default function JournalEntriesTable({ transactions }) {
+export default function JournalEntriesTable({ transactions, ...restProps }) {
-  const columns = React.useMemo(
+  const columns = useGLEntriesTableColumns();
-    () => [
-      {
-        Header: intl.get('date'),
-        accessor: 'date',
-        accessor: ({ formatted_date }) =>
-          moment(formatted_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'date',
-      },
-      {
-        Header: intl.get('account_name'),
-        accessor: 'account_name',
-        width: 140,
-        className: 'account_name',
-      },
-      {
-        Header: intl.get('contact'),
-        accessor: 'contactTypeFormatted',
-        width: 140,
-      },
-      {
-        Header: intl.get('credit'),
-        accessor: ({ credit }) => credit.formatted_amount,
-        width: 100,
-        className: 'credit',
-      },
-      {
-        Header: intl.get('debit'),
-        accessor: ({ debit }) => debit.formatted_amount,
-        width: 100,
-        className: 'debit',
-      },
-    ],
-    [],
-  );
 
   return (
-    <Card>
+    <DataTable
-      <DataTable
+      columns={columns}
-        columns={columns}
+      data={transactions}
-        data={transactions}
+      styleName={TableStyle.Constrant}
-        className={'datatable--journal-entries'}
+      TableLoadingRenderer={TableSkeletonRows}
-      />
+      {...restProps}
-    </Card>
+    />
   );
 }
+
+/**
+ *
+ * @returns {React.JSX}
+ */
+export function AmountDisplayedBaseCurrencyMessageJSX({
+  organization: { base_currency: baseCurrency },
+}) {
+  return (
+    <Message>
+      Amount is displayed in your base currency{' '}
+      <CurrencyTag>{baseCurrency}</CurrencyTag>
+    </Message>
+  );
+}
+
+export const AmountDisplayedBaseCurrencyMessage = R.compose(
+  withCurrentOrganization(),
+)(AmountDisplayedBaseCurrencyMessageJSX);
+
+const Message = styled.div`
+  font-size: 10px;
+  margin-bottom: 12px;
+`;

src/containers/JournalEntriesTable/utils.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+
+export const useGLEntriesTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: ({ formatted_date }) =>
+          moment(formatted_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'date',
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+        textAligment: 'right',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};

src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -27,53 +27,59 @@ import {
   AbilitySubject,
 } from '../../../../common/abilityOption';
 
+export function InvoiceStatus({ invoice }) {
+  return (
+    <Choose>
+      <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
+        <span className={'fully-paid-icon'}>
+          <Icon icon="small-tick" iconSize={18} />
+        </span>
+        <span class="fully-paid-text">
+          <T id={'paid'} />
+        </span>
+      </Choose.When>
+
+      <Choose.When condition={invoice.is_delivered}>
+        <Choose>
+          <Choose.When condition={invoice.is_overdue}>
+            <span className={'overdue-status'}>
+              {intl.get('overdue_by', { overdue: invoice.overdue_days })}
+            </span>
+          </Choose.When>
+          <Choose.Otherwise>
+            <span className={'due-status'}>
+              {intl.get('due_in', { due: invoice.remaining_days })}
+            </span>
+          </Choose.Otherwise>
+        </Choose>
+
+        <If condition={invoice.is_partially_paid}>
+          <span class="partial-paid">
+            {intl.get('day_partially_paid', {
+              due: formattedAmount(invoice.due_amount, invoice.currency_code),
+            })}
+          </span>
+          <ProgressBar
+            animate={false}
+            stripes={false}
+            intent={Intent.PRIMARY}
+            value={calculateStatus(invoice.balance_amount, invoice.balance)}
+          />
+        </If>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Tag minimal={true} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
 export const statusAccessor = (row) => {
   return (
     <div className={'status-accessor'}>
-      <Choose>
+      <InvoiceStatus invoice={row} />
-        <Choose.When condition={row.is_fully_paid && row.is_delivered}>
-          <span className={'fully-paid-icon'}>
-            <Icon icon="small-tick" iconSize={18} />
-          </span>
-          <span class="fully-paid-text">
-            <T id={'paid'} />
-          </span>
-        </Choose.When>
-
-        <Choose.When condition={row.is_delivered}>
-          <Choose>
-            <Choose.When condition={row.is_overdue}>
-              <span className={'overdue-status'}>
-                {intl.get('overdue_by', { overdue: row.overdue_days })}
-              </span>
-            </Choose.When>
-            <Choose.Otherwise>
-              <span className={'due-status'}>
-                {intl.get('due_in', { due: row.remaining_days })}
-              </span>
-            </Choose.Otherwise>
-          </Choose>
-
-          <If condition={row.is_partially_paid}>
-            <span class="partial-paid">
-              {intl.get('day_partially_paid', {
-                due: formattedAmount(row.due_amount, row.currency_code),
-              })}
-            </span>
-            <ProgressBar
-              animate={false}
-              stripes={false}
-              intent={Intent.PRIMARY}
-              value={calculateStatus(row.balance_amount, row.balance)}
-            />
-          </If>
-        </Choose.When>
-        <Choose.Otherwise>
-          <Tag minimal={true} round={true}>
-            <T id={'draft'} />
-          </Tag>
-        </Choose.Otherwise>
-      </Choose>
     </div>
   );
 };

src/lang/en/index.json

@@ -910,7 +910,7 @@
   "drag_drop_files_here_or_click_here": "Drag/Drop files here or click here.",
   "enter_an_item": "Enter an item...",
   "due_amount": "Due Amount",
-  "invoice_details": "Invoice details",
+  "invoice_details.drawer.title": "Invoice details ({invoiceNumber})",
   "setting_your_auto_generated_estimate_number": "Setting your auto-generated estimate number",
   "setting_your_auto_generated_journal_number": "Setting your auto-generated journal number",
   "setting_your_auto_generated_invoice_number": "Setting your auto-generated invoice number",
@@ -1531,7 +1531,7 @@
   "vendor_credit.auto_increment.auto": "Your vendor credit  numbers are set on auto-increment mode. Are you sure changing this setting?",
   "vendor_credit.auto_increment.manually": "Your vendor credit  numbers are set on manual mode. Are you sure chaning this settings?",
   "setting_your_auto_generated_vendor_credit_number": "Setting your auto-generated vendor credit number",
-  "credit_note.drawer_credit_note_detail": "Credit Note details",
+  "credit_note.drawer_credit_note_detail": "Credit Note details ({creditNumber})",
   "credit_note.drawer.label_credit_note_no": "Credit Note #",
   "credit_note.drawer.label_credit_note_date": "Credit Date",
   "credit_note.drawer.label_credits_remaining": "Credits Remaining",
@@ -1640,5 +1640,4 @@
   "invoice_transactions.column.withdrawal_account": "Deposit account",
   "bill_transactions.column.deposit_account": "Withdrawal account",
   "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module."
-}
+}
-

src/style/components/DataTable/DataTable.scss

@@ -120,7 +120,6 @@
       }
 
       .bp3-control.bp3-checkbox .bp3-control-indicator {
-        border: 1px solid #c2c2c2;
         cursor: auto;
 
         &,
@@ -359,12 +358,10 @@
   .ReactVirtualized__Grid {
     will-change: auto !important;
   }
-
-
-
 }
 
-.table-constrant {
+.table-constrant,
+.table--constrant {
   .table {
     .thead .th {
       background: transparent;
@@ -379,9 +376,5 @@
       padding: 0.5rem 0.5rem;
       border-bottom: 0;
     }
-
-    .tbody .tr:last-child .td {
-      border-bottom: 1px solid #d2dce2;
-    }
   }
 }

src/style/components/Details.scss

@@ -10,7 +10,7 @@
       flex-grow: 1;
 
       &__content{
-        margin: 5px 0;
+        margin: 2px 0;
       }
     }
   }
@@ -23,12 +23,16 @@
       flex-direction: row;
 
       &:not(:first-of-type){
-        margin-top: 16px;
+        margin-top: 12px;
       }
 
       &__label{
         padding-right: 10px;
       }
+
+      &__content{
+        width: 100%;
+      }
     }
   }
 

src/style/components/Drawers/CreditNoteDetails.module.scss

@@ -1,68 +0,0 @@
-.root {
-}
-
-.detail_panel {
-  :global .card {
-    padding: 22px 15px;
-    margin: 15px;
-  }
-
-  &_table {
-    :global .bigcapital-datatable {
-      margin-top: 30px;
-
-      .thead,
-      .tbody {
-        .quantity,
-        .rate,
-        .amount {
-          text-align: right;
-        }
-      }
-    }
-  }
-
-  &_footer {
-    :global .total_lines {
-      margin-left: auto;
-
-      &_line {
-        .title {
-          padding-left: 0;
-        }
-        .amount,
-        .title {
-          width: 180px;
-        }
-        .amount {
-          text-align: right;
-        }
-      }
-    }
-  }
-
-  &_footer {
-    display: flex;
-    margin-bottom: 20px;
-  }
-
-  .total_line {
-    &_subtotal {
-      border-bottom: 1px solid #000;
-    }
-
-    &_total {
-      border-bottom: 3px double #000;
-      font-weight: 600;
-    }
-    &_dueAmount {
-      font-weight: 600;
-    }
-  }
-
-  &_note {
-    b {
-      color: #727983;
-    }
-  }
-}

src/style/components/Drawers/InvoiceDrawer.module.scss

@@ -1,59 +0,0 @@
-
-.detail_panel {
-  :global .card {
-    padding: 22px 15px;
-  }
-
-  &_header {
-    margin-bottom: 30px;
-  }
-
-  &_table {
-    :global .bigcapital-datatable {
-
-      .thead,
-      .tbody {
-
-        .quantity,
-        .rate,
-        .amount {
-          text-align: right;
-        }
-      }
-    }
-  }
-
-  &_footer {
-    display: flex;
-
-    :global .total_lines {
-      margin-left: auto;
-    }
-
-    :global .total_lines_line {
-
-      .amount,
-      .title {
-        width: 180px;
-      }
-
-      .amount {
-        text-align: right;
-      }
-    }
-    .total_line {
-      &_subtotal {
-        border-bottom: 1px solid #000;
-      }
-
-      &_total {
-        border-bottom: 3px double #000;
-        font-weight: 600;
-      }
-
-      &_dueAmount {
-        font-weight: 600;
-      }
-    }
-  }
-}

src/style/objects/form.scss

@@ -504,4 +504,8 @@ label.bp3-label {
       }
     }
   }
+}
+
+.bp3-control.bp3-checkbox .bp3-control-indicator{
+  border-color: #666;
 }

src/style/pages/JournalEntries/List.scss

@@ -1,29 +1,29 @@
-.datatable--journal-entries {
+// .datatable--journal-entries {
-  // margin: 12px;
+//   // margin: 12px;
-  padding: 12px;
+//   padding: 12px;
 
-  .table {
+//   .table {
-    .tbody,
+//     .tbody,
-    .thead {
+//     .thead {
-      .tr .th {
+//       .tr .th {
-        padding: 8px 8px;
+//         padding: 8px 8px;
-        background-color: #fff;
+//         background-color: #fff;
-        font-size: 14px;
+//         font-size: 14px;
-        border-bottom: 1px solid #000;
+//         border-bottom: 1px solid #000;
-        border-top: 1px solid #000;
+//         border-top: 1px solid #000;
-      }
+//       }
-    }
+//     }
-    .tbody {
+//     .tbody {
-      .tr .td {
+//       .tr .td {
-        border-bottom: 0;
+//         border-bottom: 0;
-        padding-top: 0.4rem;
+//         padding-top: 0.4rem;
-        padding-bottom: 0.4rem;
+//         padding-bottom: 0.4rem;
 
-        &.credit,
+//         &.credit,
-        &.debit {
+//         &.debit {
-          font-weight: 600;
+//           font-weight: 600;
-        }
+//         }
-      }
+//       }
-    }
+//     }
-  }
+//   }
-}
+// }

src/style/pages/RefundCreditNote/List.scss

@@ -1,27 +0,0 @@
-.datatable--refund-transactions {
-  padding: 12px;
-  .table {
-    .tbody,
-    .thead {
-      .tr .th {
-        padding: 8px 8px;
-        background-color: #fff;
-        font-size: 14px;
-        border-bottom: 1px solid #000;
-        border-top: 1px solid #000;
-      }
-    }
-    .tbody {
-      .tr .td {
-        border-bottom: 0;
-        padding-top: 0.4rem;
-        padding-bottom: 0.4rem;
-
-        &.credit,
-        &.debit {
-          font-weight: 600;
-        }
-      }
-    }
-  }
-}