feat: style payment receive and made details drawers.

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 = () => {
-    return paymentMadeId
-      ? (history.push(`/payment-mades/${paymentMadeId}/edit`),
-        closeDrawer('payment-made-detail-drawer'))
-      : null;
+  const handleEditPaymentMade = () => {
+    history.push(`/payment-mades/${paymentMadeId}/edit`);
+    closeDrawer('payment-made-detail-drawer');
   };
 
   // Handle delete payment made.
-  const onDeletePaymentMade = () => {
-    return paymentMadeId
-      ? (openAlert('payment-made-delete', { paymentMadeId }),
-        closeDrawer('payment-made-detail-drawer'))
-      : null;
+  const handleDeletePaymentMade = () => {
+    openAlert('payment-made-delete', { paymentMadeId });
   };
 
   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 {
-    paymentEntries: { total_payment_amount },
-  } = usePaymentMadeDetailContext();
+  const { } = usePaymentMadeDetailContext();
 
   return (
-    <div className="payment-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">Subtotal</div>
-          <div class="amount">{total_payment_amount}</div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">TOTAL</div>
-          <div class="amount">{total_payment_amount}</div>
-        </div>
-      </div>
+    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
+      <TotalLines>
+        <TotalLine
+          title={'Subtotal'}
+          value={1000}
+          className={clsx(PaymentDrawerCls.total_line_subtotal)}
+        />
+        <TotalLine
+          title={'TOTAL'}
+          value={1000}
+          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 {
-    paymentMade: {
-      formatted_amount,
-      payment_number,
-      payment_account,
-      formatted_payment_date,
-      vendor,
-      created_at,
-      statement,
-    },
-  } = usePaymentMadeDetailContext();
+  const { paymentMade } = 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>
-        </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}
+          <h3 class="big-number" children={paymentMade.formatted_amount} />
         </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'}>
-        <DetailItem label={intl.get('description')}>
-          {defaultTo(statement, '—')}
-        </DetailItem>
-        <DetailItem label={intl.get('created_at')}>
-          {moment(created_at).format('YYYY MMM DD')}
-        </DetailItem>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
+        <DetailItem
+          label={intl.get('description')}
+          children={defaultTo(paymentMade.statement, '-')}
+        />
+        <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 />
-        </Card>
-      </div>
+
+      <Card>
+        <PaymentMadeDetailHeader />
+        <PaymentMadeDetailTable />
+        <PaymentMadeDetailFooter />
+      </Card>
     </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">
-      <DataTable columns={columns} data={paymentEntries} />
+    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
+      <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">
-      <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
+    <div className={clsx(PaymentDrawerCls.root)}>
+      <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={{
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
+      style={{ 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',
     },
-  ]);
+  ], []);