feat: optimize style of invoice details.

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

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 clsx from 'classnames';
+import styled from 'styled-components';
 
 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)}>
-      <DrawerMainTabs
-        renderActiveTabPanelOnly={true}
-        defaultSelectedTabId="details"
-      >
-        <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>
+    <InvoiceDetailsRoot>
+      <InvoiceDetailActionsBar />
+      <InvoiceDetailsTabs />
+    </InvoiceDetailsRoot>
   );
 }
+
+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 {
-  useTransactionsByReference,
-  useInvoice,
-  useInvoicePaymentTransactions,
-} from 'hooks/query';
+import { useInvoice } 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 InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+import { InvoiceDetailsStatus } from './utils';
 
 /**
  * Invoice detail header.
@@ -14,44 +22,81 @@ import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss
 export default function InvoiceDetailHeader() {
   const { invoice } = useInvoiceDetailDrawerContext();
 
-  return (
-    <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>
+  const handleCustomerLinkClick = () => {};
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('due_amount')}
-          children={invoice.formatted_due_amount}
-        />
-        <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>
-    </div>
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountDetailItem label={intl.get('amount')}>
+            <h3 class="big-number">{invoice.formatted_amount}</h3>
+          </AmountDetailItem>
+
+          <StatusDetailItem label={''}>
+            <InvoiceDetailsStatus invoice={invoice} />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <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)}>
-      <InvoiceDetailActionsBar />
-
-      <Card>
-        <InvoiceDetailHeader />
-        <InvoiceDetailTable />
-        <InvoiceDetailFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <InvoiceDetailHeader />
+      <InvoiceDetailTable />
+      <InvoiceDetailFooter />
+    </CommercialDocBox>
   );
-}
+}

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)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
-}
+}

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