feat: style payment receive and made details drawers.

client/src/components/DrawersContainer.js

@@ -2,7 +2,7 @@ import React from 'react';
 // import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer';
 // import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer';
 // import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer';
-import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer';
+// import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer';
 import AccountDrawer from 'containers/Drawers/AccountDrawer';
 import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer';
 import ExpenseDrawer from 'containers/Drawers/ExpenseDrawer';
@@ -23,10 +23,6 @@ import { DRAWERS } from 'common/drawers';
 export default function DrawersContainer() {
   return (
     <div>
-      {/* <EstimateDrawer name={DRAWERS.EstimateDrawer} /> */}
-      {/* <InvoiceDrawer name={'invoice-drawer'} /> */}
-      {/* <ReceiptDrawer name={'receipt-drawer'} /> */}
-      <PaymentReceiveDrawer name={'payment-receive-drawer'} />
       <AccountDrawer name={DRAWERS.ACCOUNT_DRAWER} />
       <ManualJournalDrawer name={DRAWERS.JOURNAL_DRAWER} />
       <ExpenseDrawer name={DRAWERS.EXPENSE_DRAWER} />

client/src/containers/Drawers/BillDrawer/BillDetailHeader.js

@@ -22,7 +22,7 @@ export default function BillDetailHeader() {
           children={<h3 class="big-number">{bill.formatted_amount}</h3>}
         />
         <DetailItem
-          label={intl.get('bill_number')}
+          label={intl.get('bill.details.bill_number')}
           children={defaultTo(bill.bill_number, '-')}
         />
         <DetailItem

client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js

@@ -21,7 +21,7 @@ export default function EstimateDetailHeader() {
           <span class="big-number">{estimate.formatted_amount}</span>
         </DetailItem>
         <DetailItem
-          label={intl.get('estimate_number')}
+          label={intl.get('estimate.details.estimate_number')}
           children={defaultTo(estimate.estimate_number, '-')}
         />
         <DetailItem

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js

@@ -32,14 +32,13 @@ export default function InvoiceDetailHeader() {
           label={intl.get('invoice_date')}
           children={invoice.formatted_invoice_date}
         />
-
         <DetailItem
           label={intl.get('due_date')}
           children={invoice.formatted_due_date}
         />
       </DetailsMenu>
 
-      <DetailsMenu direction={'horizantal'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
         <DetailItem
           label={intl.get('due_amount')}
           children={invoice.formatted_due_amount}

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js

@@ -18,8 +18,11 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { Icon, FormattedMessage as T } from 'components';
 
-import { safeCallback, compose } from 'utils';
+import { compose } from 'utils';
 
+/**
+ * Payment made - Details panel - actions bar.
+ */
 function PaymentMadeDetailActionsBar({
   // #withAlertsActions
   openAlert,
@@ -32,19 +35,14 @@ function PaymentMadeDetailActionsBar({
   const { paymentMadeId } = usePaymentMadeDetailContext();
 
   // Handle edit payment made.
-  const onEditPaymentMade = () => {
+  const handleEditPaymentMade = () => {
-    return paymentMadeId
+    history.push(`/payment-mades/${paymentMadeId}/edit`);
-      ? (history.push(`/payment-mades/${paymentMadeId}/edit`),
+    closeDrawer('payment-made-detail-drawer');
-        closeDrawer('payment-made-detail-drawer'))
-      : null;
   };
 
   // Handle delete payment made.
-  const onDeletePaymentMade = () => {
+  const handleDeletePaymentMade = () => {
-    return paymentMadeId
+    openAlert('payment-made-delete', { paymentMadeId });
-      ? (openAlert('payment-made-delete', { paymentMadeId }),
-        closeDrawer('payment-made-detail-drawer'))
-      : null;
   };
 
   return (
@@ -54,7 +52,7 @@ function PaymentMadeDetailActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="pen-18" />}
           text={<T id={'edit_payment_made'} />}
-          onClick={safeCallback(onEditPaymentMade)}
+          onClick={handleEditPaymentMade}
         />
         <NavbarDivider />
         <Button
@@ -62,7 +60,7 @@ function PaymentMadeDetailActionsBar({
           icon={<Icon icon={'trash-16'} iconSize={16} />}
           text={<T id={'delete'} />}
           intent={Intent.DANGER}
-          onClick={safeCallback(onDeletePaymentMade)}
+          onClick={handleDeletePaymentMade}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js

@@ -10,10 +10,10 @@ import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
  */
 export default function PaymentMadeDetailContent({
   // #ownProp
-  paymentMade,
+  paymentMadeId,
 }) {
   return (
-    <PaymentMadeDetailProvider paymentMadeId={paymentMade}>
+    <PaymentMadeDetailProvider paymentMadeId={paymentMadeId}>
       <PaymentMadeDetails />
     </PaymentMadeDetailProvider>
   );

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js

@@ -1,24 +1,32 @@
 import React from 'react';
+import clsx from 'classnames';
+
+import { TotalLines, TotalLine } from 'components';
 
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made - Details panel - Footer.
+ */
 export default function PaymentMadeDetailFooter() {
-  const {
+  const { } = usePaymentMadeDetailContext();
-    paymentEntries: { total_payment_amount },
-  } = usePaymentMadeDetailContext();
 
   return (
-    <div className="payment-drawer__content-footer">
+    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
-      <div class="total-lines">
+      <TotalLines>
-        <div class="total-lines__line total-lines__line--subtotal">
+        <TotalLine
-          <div class="title">Subtotal</div>
+          title={'Subtotal'}
-          <div class="amount">{total_payment_amount}</div>
+          value={1000}
-        </div>
+          className={clsx(PaymentDrawerCls.total_line_subtotal)}
-        <div class="total-lines__line total-lines__line--total">
+        />
-          <div class="title">TOTAL</div>
+        <TotalLine
-          <div class="amount">{total_payment_amount}</div>
+          title={'TOTAL'}
-        </div>
+          value={1000}
-      </div>
+          className={clsx(PaymentDrawerCls.total_line_total)}
+        />
+      </TotalLines>
     </div>
   );
 }

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js

@@ -1,56 +1,54 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
-
+import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
 import { DetailsMenu, DetailItem } from 'components';
 
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
 /**
- * Payment made detail header.
+ * Payment made - detail panel - header.
  */
 export default function PaymentMadeDetailHeader() {
-  const {
+  const { paymentMade } = usePaymentMadeDetailContext();
-    paymentMade: {
-      formatted_amount,
-      payment_number,
-      payment_account,
-      formatted_payment_date,
-      vendor,
-      created_at,
-      statement,
-    },
-  } = usePaymentMadeDetailContext();
 
   return (
-    <div className={'payment-drawer__content-header'}>
+    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
       <DetailsMenu>
         <DetailItem label={intl.get('amount')}>
-          <h3 class="big-number">{formatted_amount}</h3>
+          <h3 class="big-number" children={paymentMade.formatted_amount} />
-        </DetailItem>
-        <DetailItem label={intl.get('payment_receive_no')}>
-          {payment_number}
-        </DetailItem>
-        <DetailItem label={intl.get('customer_name')}>
-          {vendor?.display_name}
-        </DetailItem>
-        <DetailItem label={intl.get('payment_account')}>
-          {payment_account?.name}
-        </DetailItem>
-        <DetailItem label={intl.get('payment_date')}>
-          {formatted_payment_date}
         </DetailItem>
+        <DetailItem
+          label={intl.get('payment_made.details.payment_number')}
+          children={defaultTo(paymentMade.payment_number, '-')}
+        />
+        <DetailItem
+          label={intl.get('customer_name')}
+          children={paymentMade.vendor?.display_name}
+        />
+        <DetailItem
+          label={intl.get('payment_account')}
+          children={paymentMade.payment_account?.name}
+        />
+        <DetailItem
+          label={intl.get('payment_date')}
+          children={paymentMade.formatted_payment_date}
+        />
       </DetailsMenu>
 
-      <DetailsMenu direction={'horizantal'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
-        <DetailItem label={intl.get('description')}>
+        <DetailItem
-          {defaultTo(statement, '—')}
+          label={intl.get('description')}
-        </DetailItem>
+          children={defaultTo(paymentMade.statement, '-')}
-        <DetailItem label={intl.get('created_at')}>
+        />
-          {moment(created_at).format('YYYY MMM DD')}
+        <DetailItem
-        </DetailItem>
+          label={intl.get('created_at')}
+          children={moment(paymentMade.created_at).format('YYYY MMM DD')}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js

@@ -1,21 +1,28 @@
 import React from 'react';
+import clsx from 'classnames';
 
 import { Card } from 'components';
 
 import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
 import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
 import PaymentMadeDetailTable from './PaymentMadeDetailTable';
+import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
 
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made detail tab.
+ */
 export default function PaymentMadeDetailTab() {
   return (
-    <div className={'payment-drawer'}>
+    <div className={clsx(PaymentDrawerCls.detail_panel)}>
       <PaymentMadeDetailActionsBar />
-      <div>
+
       <Card>
         <PaymentMadeDetailHeader />
         <PaymentMadeDetailTable />
+        <PaymentMadeDetailFooter />
       </Card>
     </div>
-    </div>
   );
 }

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js

@@ -1,17 +1,26 @@
 import React from 'react';
+import clsx from 'classnames';
+
 import { usePaymentMadeEntriesColumns } from './utils';
 import { DataTable } from 'components';
 
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
 export default function PaymentMadeDetailTable() {
   const columns = usePaymentMadeEntriesColumns();
 
+  // Payment made details context.
   const { paymentEntries } = usePaymentMadeDetailContext();
 
   return (
-    <div className="payment-drawer__content--table">
+    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
-      <DataTable columns={columns} data={paymentEntries} />
+      <DataTable
+        columns={columns}
+        data={paymentEntries}
+        className={'table-constrant'}
+      />
     </div>
   );
 }

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js

@@ -1,31 +1,35 @@
 import React from 'react';
-import { Tabs, Tab } from '@blueprintjs/core';
+import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 
+import { DrawerMainTabs } from 'components';
 import PaymentMadeDetailTab from './PaymentMadeDetailTab';
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
 /**
- * payment made view detail.
+ * Payment made - view detail.
  */
 export default function PaymentMadeDetails() {
   const { transactions } = usePaymentMadeDetailContext();
 
   return (
-    <div className="view-detail-drawer">
+    <div className={clsx(PaymentDrawerCls.root)}>
-      <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
+      <DrawerMainTabs defaultSelectedTabId="details">
         <Tab
-          title={intl.get('details')}
           id={'details'}
+          title={intl.get('details')}
           panel={<PaymentMadeDetailTab />}
         />
         <Tab
-          title={intl.get('journal_entries')}
           id={'journal_entries'}
+          title={intl.get('journal_entries')}
           panel={<JournalEntriesTable transactions={transactions} />}
         />
-      </Tabs>
+      </DrawerMainTabs>
     </div>
   );
 }

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDrawer.module.scss

@@ -0,0 +1,53 @@
+.root {}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+  &_table {
+    :global .bigcapital-datatable {
+
+      .thead,
+      .tbody {
+        .bill_amount,
+        .amount_due,
+        .payment_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;
+    }
+  }
+}

client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js

@@ -22,13 +22,10 @@ function PaymentMadeDetailDrawer({
       isOpen={isOpen}
       name={name}
       size={'65%'}
-      style={{
+      style={{ minWidth: '700px', maxWidth: '900px' }}
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
     >
       <DrawerSuspense>
-        <PaymentMadeDetailContent paymentMade={paymentMadeId} />
+        <PaymentMadeDetailContent paymentMadeId={paymentMadeId} />
       </DrawerSuspense>
     </Drawer>
   );

client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js

@@ -9,27 +9,32 @@ export const usePaymentMadeEntriesColumns = () =>
       accessor: (row) => moment(row.date).format('YYYY MMM DD'),
       width: 100,
       disableSortBy: true,
+      className: 'date',
     },
     {
       Header: intl.get('bill_number'),
       accessor: 'bill_no',
       width: 150,
       disableSortBy: true,
+      className: 'bill_number',
     },
     {
       Header: intl.get('bill_amount'),
       accessor: 'amount',
+      className: 'amount',
     },
     {
       Header: intl.get('due_amount'),
       accessor: 'due_amount',
       width: 100,
       disableSortBy: true,
+      className: 'due_amount',
     },
     {
       Header: intl.get('payment_amount'),
       accessor: 'payment_amount',
       width: 100,
       disableSortBy: true,
+      className: 'payment_amount',
     },
-  ]);
+  ], []);

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js

@@ -18,7 +18,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { Icon, FormattedMessage as T } from 'components';
 
-import { safeCallback, compose } from 'utils';
+import { compose } from 'utils';
 
 function PaymentReceiveActionsBar({
   // #withAlertsActions
@@ -29,23 +29,18 @@ function PaymentReceiveActionsBar({
 }) {
   const history = useHistory();
 
+  // Retrieve the payment receive drawer context.
   const { paymentReceiveId } = usePaymentReceiveDetailContext();
 
-
   // Handle edit payment receive.
-  const onEditPaymentReceive = () => {
+  const handleEditPaymentReceive = () => {
-    return paymentReceiveId
+    history.push(`/payment-receives/${paymentReceiveId}/edit`);
-      ? (history.push(`/payment-receives/${paymentReceiveId}/edit`),
+    closeDrawer('payment-receive-detail-drawer');
-        closeDrawer('payment-receive-detail-drawer'))
-      : null;
   };
 
   // Handle delete payment receive.
-  const onDeletePaymentReceive = () => {
+  const handleDeletePaymentReceive = () => {
-    return paymentReceiveId
+    openAlert('payment-receive-delete', { paymentReceiveId });
-      ? (openAlert('payment-receive-delete', { paymentReceiveId }),
-        closeDrawer('payment-receive-detail-drawer'))
-      : null;
   };
 
   return (
@@ -55,7 +50,7 @@ function PaymentReceiveActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="pen-18" />}
           text={<T id={'edit_payment_receive'} />}
-          onClick={safeCallback(onEditPaymentReceive)}
+          onClick={handleEditPaymentReceive}
         />
         <NavbarDivider />
         <Button
@@ -63,7 +58,7 @@ function PaymentReceiveActionsBar({
           icon={<Icon icon={'trash-16'} iconSize={16} />}
           text={<T id={'delete'} />}
           intent={Intent.DANGER}
-          onClick={safeCallback(onDeletePaymentReceive)}
+          onClick={handleDeletePaymentReceive}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js

@@ -1,31 +1,36 @@
 import React from 'react';
-import { Tabs, Tab } from '@blueprintjs/core';
+import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { DrawerMainTabs } from 'components';
 import PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
 /**
- * payment receive view detail.
+ * Payment receive view detail.
  */
 export default function PaymentReceiveDetail() {
   const { transactions } = usePaymentReceiveDetailContext();
 
   return (
-    <div className="view-detail-drawer">
+    <div className={clsx(PaymentDrawerCls.root)}>
-      <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
+      <DrawerMainTabs defaultSelectedTabId="details">
         <Tab
-          title={intl.get('details')}
           id={'details'}
+          title={intl.get('details')}
           panel={<PaymentReceiveDetailTab />}
         />
         <Tab
-          title={intl.get('journal_entries')}
           id={'journal_entries'}
+          title={intl.get('journal_entries')}
           panel={<JournalEntriesTable transactions={transactions} />}
         />
-      </Tabs>
+      </DrawerMainTabs>
     </div>
   );
 }

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js

@@ -1,8 +1,5 @@
 import React from 'react';
 
-
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import PaymentReceiveDetail from './PaymentReceiveDetail';
 import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
 
@@ -11,10 +8,10 @@ import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
  */
 export default function PaymentReceiveDetailContent({
   // #ownProp
-  paymentReceive,
+  paymentReceiveId,
 }) {
   return (
-    <PaymentReceiveDetailProvider paymentReceiveId={paymentReceive}>
+    <PaymentReceiveDetailProvider paymentReceiveId={paymentReceiveId}>
       <PaymentReceiveDetail />
     </PaymentReceiveDetailProvider>
   );

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js

@@ -1,24 +1,31 @@
 import React from 'react';
+import clsx from 'classnames';
 
+import { TotalLine, TotalLines } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
+/**
+ * Payment receive detail footer.
+ */
 export default function PaymentReceiveDetailFooter() {
-  const {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
-    paymentReceive: { formatted_amount },
-  } = usePaymentReceiveDetailContext();
 
   return (
-    <div className="payment-drawer__content-footer">
+    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
-      <div class="total-lines">
+      <TotalLines>
-        <div class="total-lines__line total-lines__line--subtotal">
+        <TotalLine
-          <div class="title">Subtotal</div>
+          title={'Subtotal'}
-          <div class="amount">{formatted_amount}</div>
+          value={paymentReceive.amount}
-        </div>
+          className={PaymentDrawerCls.total_line_subtotal}
-        <div class="total-lines__line total-lines__line--total">
+        />
-          <div class="title">TOTAL</div>
+        <TotalLine
-          <div class="amount">{'Amount'}</div>
+          title={'TOTAL'}
-        </div>
+          value={paymentReceive.amount}
-      </div>
+          className={PaymentDrawerCls.total_line_total}
+        />
+      </TotalLines>
     </div>
   );
 }

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js

@@ -1,56 +1,58 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+import clsx from 'classnames';
 
 import { defaultTo } from 'lodash';
 
-import { Card, DetailsMenu, DetailItem } from 'components';
+import { DetailsMenu, DetailItem } from 'components';
 
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
 /**
  * Payment receive detail header.
  */
 export default function PaymentReceiveDetailHeader() {
-  const {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
-    paymentReceive: {
-      formatted_amount,
-      payment_receive_no,
-      customer,
-      deposit_account,
-      formatted_payment_date,
-      statement,
-      created_at,
-    },
-  } = usePaymentReceiveDetailContext();
 
   return (
-    <div className={'payment-drawer__content-header'}>
+    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
       <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
+        <DetailItem
-          <h3 class="big-number">{formatted_amount}</h3>
+          label={intl.get('amount')}
-        </DetailItem>
+          children={
-        <DetailItem label={intl.get('payment_receive_no')}>
+            <h3 class="big-number">{paymentReceive.formatted_amount}</h3>
-          {payment_receive_no}
+          }
-        </DetailItem>
+        />
-        <DetailItem label={intl.get('customer_name')}>
+        <DetailItem
-          {customer?.display_name}
+          label={intl.get('payment_receive.details.payment_number')}
-        </DetailItem>
+          children={defaultTo(paymentReceive.payment_receive_no, '-')}
-        <DetailItem label={intl.get('deposit_account')}>
+        />
-          {deposit_account?.name}
+        <DetailItem
-        </DetailItem>
+          label={intl.get('customer_name')}
-        <DetailItem label={intl.get('payment_date')}>
+          children={paymentReceive.customer?.display_name}
-          {formatted_payment_date}
+        />
-        </DetailItem>
+        <DetailItem
+          label={intl.get('deposit_account')}
+          children={paymentReceive.deposit_account?.name}
+        />
+        <DetailItem
+          label={intl.get('payment_date')}
+          children={paymentReceive.formatted_payment_date}
+        />
       </DetailsMenu>
 
-      <DetailsMenu direction={'horizantal'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem label={intl.get('description')}>
+        <DetailItem
-          {defaultTo(statement, '—')}
+          label={intl.get('description')}
-        </DetailItem>
+          children={defaultTo(paymentReceive.statement, '—')}
-        <DetailItem label={intl.get('created_at')}>
+        />
-          {moment(created_at).format('YYYY MMM DD')}
+        <DetailItem
-        </DetailItem>
+          label={intl.get('created_at')}
+          children={moment(paymentReceive.created_at).format('YYYY MMM DD')}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js

@@ -9,8 +9,11 @@ const PaymentReceiveDetailContext = React.createContext();
  * Payment receive detail provider.
  */
 function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
-  const { data: paymentReceive, isFetching: isPaymentReceiveLoading } =
+  const {
-    usePaymentReceive(paymentReceiveId, {
+    data: paymentReceive,
+    isLoading: isPaymentLoading,
+    isFetching: isPaymentFetching,
+  } = usePaymentReceive(paymentReceiveId, {
     enabled: !!paymentReceiveId,
   });
 
@@ -26,11 +29,11 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
     { enabled: !!paymentReceiveId },
   );
 
-  //provider.
+  // Provider.
   const provider = { transactions, paymentReceive, paymentReceiveId };
 
   return (
-    <DashboardInsider loading={isTransactionLoading || isPaymentReceiveLoading}>
+    <DashboardInsider loading={isTransactionLoading || isPaymentLoading}>
       <DrawerHeaderContent
         name="payment-receive-detail-drawer"
         title={intl.get('payment_receive_details')}

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'classnames';
 
 import { Card } from 'components';
 
@@ -7,17 +8,18 @@ import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
 import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
 import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
 
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
 export default function PaymentReceiveDetailTab() {
   return (
-    <div className={'payment-drawer'}>
+    <div className={clsx(PaymentDrawerCls.detail_panel)}>
       <PaymentReceiveActionsBar />
-      <div>
+
       <Card>
         <PaymentReceiveDetailHeader />
         <PaymentReceiveDetailTable />
-          {/* <PaymentReceiveDetailFooter /> */}
+        <PaymentReceiveDetailFooter />
       </Card>
     </div>
-    </div>
   );
 }

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js

@@ -1,18 +1,30 @@
 import React from 'react';
+import clsx from 'classnames';
+
 import { usePaymentReceiveEntriesColumns } from './utils';
-import { DataTable, Card } from 'components';
+import { DataTable } from 'components';
 
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
+/**
+ * Payment receive readonly details table.
+ */
 export default function PaymentReceiveDetailTable() {
   const columns = usePaymentReceiveEntriesColumns();
+
   const {
     paymentReceive: { entries },
   } = usePaymentReceiveDetailContext();
 
   return (
-    <div className="payment-drawer__content--table">
+    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
-      <DataTable columns={columns} data={entries} />
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
     </div>
   );
 }

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss

@@ -0,0 +1,53 @@
+.root {}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+  &_table {
+    :global .bigcapital-datatable {
+
+      .thead,
+      .tbody {
+        .invoice_amount,
+        .amount_due,
+        .payment_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;
+    }
+  }
+}

client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js

@@ -22,13 +22,10 @@ function PaymentReceiveDetailDrawer({
       isOpen={isOpen}
       name={name}
       size={'65%'}
-      style={{
+      style={{ minWidth: '700px', maxWidth: '900px' }}
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
     >
       <DrawerSuspense>
-        <PaymentReceiveDetailContent paymentReceive={paymentReceiveId} />
+        <PaymentReceiveDetailContent paymentReceiveId={paymentReceiveId} />
       </DrawerSuspense>
     </Drawer>
   );

client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js

@@ -2,34 +2,45 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 
+/**
+ * Retrieve payment entries table columns.
+ */
 export const usePaymentReceiveEntriesColumns = () =>
-  React.useMemo(() => [
+  React.useMemo(
+    () => [
       {
         Header: intl.get('date'),
         accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
         width: 100,
+        className: 'date',
         disableSortBy: true,
       },
       {
         Header: intl.get('invoice_no'),
         accessor: 'invoice.invoice_no',
         width: 150,
+        className: 'invoice_number',
         disableSortBy: true,
       },
       {
         Header: intl.get('invoice_amount'),
         accessor: 'invoice.balance',
+        className: 'invoice_amount',
       },
       {
         Header: intl.get('amount_due'),
         accessor: 'invoice.amount_due',
+        className: 'amount_due',
         width: 100,
         disableSortBy: true,
       },
       {
         Header: intl.get('payment_amount'),
         accessor: 'invoice.payment_amount',
+        className: 'payment_amount',
         width: 100,
         disableSortBy: true,
       },
-  ]);
+    ],
+    [],
+  );

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js

@@ -22,7 +22,7 @@ export default function ReceiptDetailHeader() {
           <h3 class="big-number">{receipt.formatted_amount}</h3>
         </DetailItem>
         <DetailItem
-          label={intl.get('receipt_no')}
+          label={intl.get('receipt.details.receipt_number')}
           children={defaultTo(receipt.receipt_no, '-')}
         />
         <DetailItem

client/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js

@@ -62,6 +62,7 @@ export const PaymentMadeUniversalSearchSelect = withDrawerActions(
  * Payment made resource item to search item.
  */
 const paymentMadeToSearch = (payment) => ({
+  id: payment.id,
   text: payment.vendor.display_name,
   subText: payment.formatted_payment_date,
   label: payment.formatted_amount,

client/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.js

@@ -19,7 +19,7 @@ function PaymentReceiveUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.PAYMENT_RECEIVE) {
-    openDrawer('payment-receive-drawer', { paymentReceiveId: resourceId });
+    openDrawer('payment-receive-detail-drawer', { paymentReceiveId: resourceId });
   }
   return null;
 }
@@ -58,10 +58,9 @@ export function PaymentReceiveUniversalSearchItem(
 
 /**
  * Transformes payment receives to search.
- * @param {*} payment
- * @returns
  */
  const paymentReceivesToSearch = (payment) => ({
+  id: payment.id,
   text: payment.customer.display_name,
   subText: payment.formatted_payment_date,
   label: payment.formatted_amount,

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js

@@ -61,8 +61,6 @@ function PaymentReceiveActionsBar({
     refresh();
   };
 
-  console.log(fields, 'fields');
-
   return (
     <DashboardActionsBar>
       <NavbarGroup>

client/src/lang/en/index.json

@@ -1212,5 +1212,10 @@
   "edit_contact":"Edit {name}",
   "item.sell_description": "Sell description",
   "item.purchase_description": "Purchase description",
-  "closed_date":"Closed date"
+  "closed_date":"Closed date",
+  "payment_made.details.payment_number": "Payment #",
+  "payment_receive.details.payment_number": "Payment #",
+  "estimate.details.estimate_number": "Estimate #",
+  "receipt.details.receipt_number": "Receipt #",
+  "bill.details.bill_number": "Bill #"
 }

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

@@ -1,4 +1,3 @@
-.invoice_details {}
 
 .detail_panel {
   :global .card {