From d446300a71f8de8d5d4c2a153c683392dc973b6d Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 12 Sep 2021 10:16:34 +0200
Subject: [PATCH] BIG-19 fix: scrollable area on details drawer.

---
 client/src/common/drawers.js                      |  1 +
 client/src/components/Drawer/DrawerSuspense.js    | 11 +++++------
 client/src/components/Drawer/index.js             | 15 +++++++++++++++
 client/src/components/DrawersContainer.js         |  2 +-
 client/src/components/index.js                    |  1 +
 .../Drawers/AccountDrawer/AccountDrawerContent.js |  9 ++++++---
 .../Drawers/AccountDrawer/AccountDrawerDetails.js |  4 +++-
 .../AccountDrawer/AccountDrawerProvider.js        |  8 ++++----
 .../src/containers/Drawers/AccountDrawer/index.js |  5 +----
 .../Drawers/BillDrawer/BillDrawerContent.js       |  6 ++++--
 .../Drawers/BillDrawer/BillDrawerProvider.js      | 10 +++++-----
 .../CustomerDetailsDrawerContent.js               |  5 ++++-
 .../CustomerDetailsDrawerProvider.js              |  6 +++---
 .../EstimateDetailDrawerContent.js                |  5 ++++-
 .../EstimateDetailDrawerProvider.js               |  6 +++---
 .../Drawers/ExpenseDrawer/ExpenseDrawerContent.js |  6 +++++-
 .../ExpenseDrawer/ExpenseDrawerProvider.js        |  7 ++++---
 .../src/containers/Drawers/ExpenseDrawer/index.js | 10 ++++------
 .../InventoryAdjustmentDetail.js                  |  1 +
 .../InventoryAdjustmentDetailActionsBar.js        |  4 +---
 .../InventoryAdjustmentDrawerContent.js           |  5 ++++-
 .../InventoryAdjustmentDrawerProvider.js          |  7 +++----
 .../InvoiceDetailDrawerContent.js                 |  5 ++++-
 .../InvoiceDetailDrawerProvider.js                |  6 +++---
 .../ItemDetailDrawer/ItemDetailDrawerContent.js   |  5 ++++-
 .../ItemDetailDrawer/ItemDetailDrawerProvider.js  |  6 +++---
 .../ManualJournalDrawerContent.js                 |  6 +++++-
 .../ManualJournalDrawerProvider.js                |  6 +++---
 .../Drawers/ManualJournalDrawer/index.js          |  7 ++-----
 .../PaymentMadeDetailContent.js                   |  5 ++++-
 .../PaymentMadeDetailProvider.js                  | 12 +++++++-----
 .../PaymentReceiveActionsBar.js                   |  3 +++
 .../PaymentReceiveDetailContent.js                |  5 ++++-
 .../PaymentReceiveDetailProvider.js               | 13 +++++++++----
 .../ReceiptDetailDrawerContent.js                 |  5 ++++-
 .../ReceiptDetailDrawerProvider.js                | 10 ++++++----
 .../VendorDetailsDrawerContent.js                 |  5 ++++-
 .../VendorDetailsDrawerProvider.js                | 15 ++++++---------
 38 files changed, 153 insertions(+), 95 deletions(-)
 create mode 100644 client/src/components/Drawer/index.js

diff --git a/client/src/common/drawers.js b/client/src/common/drawers.js
index af7978a77..4fb36ed80 100644
--- a/client/src/common/drawers.js
+++ b/client/src/common/drawers.js
@@ -7,5 +7,6 @@ export const DRAWERS = {
   ACCOUNT_DRAWER: 'account-drawer',
   JOURNAL_DRAWER: 'journal-drawer',
   EXPENSE_DRAWER: 'expense-drawer',
+  BILL_DRAWER: 'bill-drawer',
   INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
 };
diff --git a/client/src/components/Drawer/DrawerSuspense.js b/client/src/components/Drawer/DrawerSuspense.js
index c6d1fddf0..d9df19978 100644
--- a/client/src/components/Drawer/DrawerSuspense.js
+++ b/client/src/components/Drawer/DrawerSuspense.js
@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
-import { Spinner, Classes } from '@blueprintjs/core';
+import { DrawerLoading } from 'components';
 
+/**
+ * Loading content.
+ */
 function LoadingContent() {
-  return (
-    <div className={Classes.DRAWER_BODY}>
-      <Spinner size={30} />
-    </div>
-  );
+  return <DrawerLoading loading={true} />;
 }
 
 export default function DrawerSuspense({ children }) {
diff --git a/client/src/components/Drawer/index.js b/client/src/components/Drawer/index.js
new file mode 100644
index 000000000..005735517
--- /dev/null
+++ b/client/src/components/Drawer/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+export function DrawerLoading({ loading, mount = false, children }) {
+  return (
+    <LoadingIndicator loading={loading} mount={mount}>
+      {children}
+    </LoadingIndicator>
+  );
+}
+
+export function DrawerBody({ children }) {
+  return <div className={Classes.DRAWER_BODY}>{children}</div>;
+}
diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js
index a3858fa2d..e35b17f1d 100644
--- a/client/src/components/DrawersContainer.js
+++ b/client/src/components/DrawersContainer.js
@@ -25,7 +25,7 @@ export default function DrawersContainer() {
       <AccountDrawer name={DRAWERS.ACCOUNT_DRAWER} />
       <ManualJournalDrawer name={DRAWERS.JOURNAL_DRAWER} />
       <ExpenseDrawer name={DRAWERS.EXPENSE_DRAWER} />
-      <BillDrawer name={'bill-drawer'} />
+      <BillDrawer name={DRAWERS.BILL_DRAWER} />
       <InvoiceDetailDrawer name={'invoice-detail-drawer'} />
       <EstimateDetailDrawer name={'estimate-detail-drawer'} />
       <ReceiptDetailDrawer name={'receipt-detail-drawer'} />
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 68db361f5..7b3497368 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -75,6 +75,7 @@ export * from './TotalLines/index'
 export * from './Alert';
 export * from './Subscriptions';
 export * from './Dashboard';
+export * from './Drawer';
 
 const Hint = FieldHint;
 
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js
index 3bf0bf706..b1b5e79a9 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/AccountDrawer.scss';
 
@@ -11,11 +12,13 @@ import AccountDrawerDetails from './AccountDrawerDetails';
 export default function AccountDrawerContent({
   // #ownProp
   accountId,
-  name
+  name,
 }) {
   return (
     <AccountDrawerProvider name={name} accountId={accountId}>
-      <AccountDrawerDetails />
+      <DrawerBody>
+        <AccountDrawerDetails />
+      </DrawerBody>
     </AccountDrawerProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js
index 6ac80c2b6..2ee430cd1 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js
@@ -11,11 +11,13 @@ import AccountDrawerTable from './AccountDrawerTable';
  */
 export default function AccountDrawerDetails() {
   return (
-  <div className={'account-drawer'}>
+    <div className={'account-drawer'}>
       <AccountDrawerActionBar />
+
       <Card className={'card-header'}>
         <AccountDrawerHeader />
       </Card>
+
       <AccountDrawerTable />
     </div>
   );
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
index 5f36a3322..2bf24c129 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAccount, useAccountTransactions } from 'hooks/query';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const AccountDrawerContext = React.createContext();
 
@@ -22,7 +22,7 @@ function AccountDrawerProvider({ accountId, name, ...props }) {
   // Drawer title.
   const drawerTitle = `${account.name} ${account.code}`;
 
-  // provider.
+  // Provider.
   const provider = {
     accountId,
     account,
@@ -31,10 +31,10 @@ function AccountDrawerProvider({ accountId, name, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isAccountLoading || isAccountsLoading}>
+    <DrawerLoading loading={isAccountLoading || isAccountsLoading}>
       <DrawerHeaderContent name={'account-drawer'} title={drawerTitle} />
       <AccountDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/AccountDrawer/index.js b/client/src/containers/Drawers/AccountDrawer/index.js
index 52afe9ac7..b4704b40c 100644
--- a/client/src/containers/Drawers/AccountDrawer/index.js
+++ b/client/src/containers/Drawers/AccountDrawer/index.js
@@ -19,10 +19,7 @@ function AccountDrawer({
     <Drawer
       isOpen={isOpen}
       name={name}
-      style={{
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
       size={'65%'}
     >
       <DrawerSuspense>
diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js b/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js
index abe8932fa..bd6e6338a 100644
--- a/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -15,8 +16,9 @@ export default function BillDrawerContent({
 }) {
   return (
     <BillDrawerProvider billId={billId}>
-      <BillDrawerDetails />
-      {/* <BillDrawerAlerts /> */}
+      <DrawerBody>
+        <BillDrawerDetails />
+      </DrawerBody>
     </BillDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js b/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
index b8d880fbf..bef541bb0 100644
--- a/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import {
   useBill,
   useTransactionsByReference,
@@ -41,16 +41,16 @@ function BillDrawerProvider({ billId, ...props }) {
     bill,
   };
 
+  const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
+
   return (
-    <DashboardInsider
-      loading={isLandedCostLoading || isTransactionLoading || isBillLoading}
-    >
+    <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="bill-drawer"
         title={intl.get('bill_details')}
       />
       <BillDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerContent.js b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerContent.js
index f6862ff37..27e2839da 100644
--- a/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerContent.js
+++ b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerContent.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
 import CustomerDetails from './CustomerDetails';
 import { CustomerDetailsDrawerProvider } from './CustomerDetailsDrawerProvider';
 
@@ -12,7 +13,9 @@ export default function CustomerDetailsDrawerContent({
 }) {
   return (
     <CustomerDetailsDrawerProvider customerId={customerId}>
-      <CustomerDetails />
+      <DrawerBody>
+        <CustomerDetails />
+      </DrawerBody>
     </CustomerDetailsDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.js b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.js
index f0579272c..8b8a981ce 100644
--- a/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.js
+++ b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useCustomer } from 'hooks/query';
 
 const ContactDetailDrawerContext = React.createContext();
@@ -23,13 +23,13 @@ function CustomerDetailsDrawerProvider({ customerId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isCustomerLoading}>
+    <DrawerLoading loading={isCustomerLoading}>
       <DrawerHeaderContent
         name="customer-details-drawer"
         title={customer?.display_name}
       />
       <ContactDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.js
index 8b3ecf215..59e47bbdb 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import EstimateDetail from './EstimateDetail';
 import { EstimateDetailDrawerProvider } from './EstimateDetailDrawerProvider';
@@ -12,7 +13,9 @@ export default function EstimateDetailDrawerContent({
 }) {
   return (
     <EstimateDetailDrawerProvider estimateId={estimateId}>
-      <EstimateDetail />
+      <DrawerBody>
+        <EstimateDetail />
+      </DrawerBody>
     </EstimateDetailDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
index 646ba0fc3..bf11ea143 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { useEstimate } from 'hooks/query';
-import { DrawerHeaderContent, DrawerInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const EstimateDetailDrawerContext = React.createContext();
 
@@ -21,13 +21,13 @@ function EstimateDetailDrawerProvider({ estimateId, ...props }) {
   };
 
   return (
-    <DrawerInsider loading={isEstimateLoading}>
+    <DrawerLoading loading={isEstimateLoading}>
       <DrawerHeaderContent
         name="estimate-detail-drawer"
         title={intl.get('estimate_details')}
       />
       <EstimateDetailDrawerContext.Provider value={provider} {...props} />
-    </DrawerInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
index c84c074f4..810533ade 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
+
 import 'style/components/Drawers/ExpenseDrawer.scss';
 
 import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
@@ -14,7 +16,9 @@ export default function ExpenseDrawerContent({
 }) {
   return (
     <ExpenseDrawerProvider expenseId={expenseId}>
-      <ExpenseDrawerDetails />
+      <DrawerBody>
+        <ExpenseDrawerDetails />
+      </DrawerBody>
     </ExpenseDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js
index f16cbdddc..90e4b87a1 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useExpense } from 'hooks/query';
-import { DashboardInsider } from 'components';
+import { DrawerLoading } from 'components';
 
 const ExpenseDrawerDrawerContext = React.createContext();
 
@@ -25,10 +25,11 @@ function ExpenseDrawerProvider({ expenseId, ...props }) {
     isExpenseFetching,
     isExpenseLoading,
   };
+
   return (
-    <DashboardInsider loading={isExpenseLoading}>
+    <DrawerLoading loading={isExpenseLoading}>
       <ExpenseDrawerDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 const useExpenseDrawerContext = () =>
diff --git a/client/src/containers/Drawers/ExpenseDrawer/index.js b/client/src/containers/Drawers/ExpenseDrawer/index.js
index aadfe7946..1764da1fa 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/index.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/index.js
@@ -1,7 +1,8 @@
 import React, { lazy } from 'react';
+import intl from 'react-intl-universal';
+
 import { Drawer, DrawerSuspense } from 'components';
 import withDrawers from 'containers/Drawer/withDrawers';
-import intl from 'react-intl-universal';
 
 import { compose } from 'utils';
 
@@ -13,7 +14,7 @@ const ExpenseDrawerContent = lazy(() => import('./ExpenseDrawerContent'));
 function ExpenseDrawer({
   name,
 
-  //#withDrawer
+  // #withDrawer
   isOpen,
   payload: { expenseId },
 }) {
@@ -23,10 +24,7 @@ function ExpenseDrawer({
       name={name}
       title={intl.get('expense')}
       size={'65%'}
-      style={{
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
     >
       <DrawerSuspense>
         <ExpenseDrawerContent expenseId={expenseId} />
diff --git a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
index 3e6476f07..9c7e6b6c6 100644
--- a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
+++ b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
@@ -16,6 +16,7 @@ export default function InventoryAdjustmentDetail() {
   return (
     <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel)}>
       <InventoryAdjustmentDetailActionsBar />
+
       <Card>
         <InventoryAdjustmentDetailHeader />
         <InventoryAdjustmentDetailTable />
diff --git a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
index f054fb2ec..e97eee29c 100644
--- a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
+++ b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
@@ -26,9 +26,7 @@ function InventoryAdjustmentDetailActionsBar({
 
   // Handle delete inventory adjustment.
   const handleDeleteInventoryAdjustment = () => {
-    openAlert('inventory-adjustment-delete', {
-      inventoryId,
-    });
+    openAlert('inventory-adjustment-delete', { inventoryId });
     closeDrawer('inventory-adjustment-drawer');
   };
 
diff --git a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.js b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.js
index c6555fafc..596461354 100644
--- a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.js
+++ b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import InventoryAdjustmentDetail from './InventoryAdjustmentDetail';
 import { InventoryAdjustmentDrawerProvider } from './InventoryAdjustmentDrawerProvider';
@@ -9,7 +10,9 @@ import { InventoryAdjustmentDrawerProvider } from './InventoryAdjustmentDrawerPr
 export default function InventoryAdjustmentDrawerContent({ inventoryId }) {
   return (
     <InventoryAdjustmentDrawerProvider inventoryId={inventoryId}>
-      <InventoryAdjustmentDetail />
+      <DrawerBody>
+        <InventoryAdjustmentDetail />
+      </DrawerBody>
     </InventoryAdjustmentDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.js b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.js
index de07d0882..dd7b77f63 100644
--- a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.js
+++ b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useInventoryAdjustment } from 'hooks/query';
 
 const InventoryAdjustmentDrawerContext = React.createContext();
@@ -22,14 +22,13 @@ function InventoryAdjustmentDrawerProvider({ inventoryId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isAdjustmentsLoading}>
+    <DrawerLoading loading={isAdjustmentsLoading}>
       <DrawerHeaderContent
         name="inventory-adjustment-drawer"
         title={intl.get('inventory_adjustment.details_drawer.title')}
       />
-
       <InventoryAdjustmentDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
index 9d2ff7991..f0f02e483 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -14,7 +15,9 @@ export default function InvoiceDetailDrawerContent({
 }) {
   return (
     <InvoiceDetailDrawerProvider invoiceId={invoiceId}>
-      <InvoiceDetail />
+      <DrawerBody>
+        <InvoiceDetail />
+      </DrawerBody>
     </InvoiceDetailDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index d19a5906e..ccb64799b 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useTransactionsByReference, useInvoice } from 'hooks/query';
 
 const InvoiceDetailDrawerContext = React.createContext();
@@ -32,13 +32,13 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
     invoice,
   };
   return (
-    <DashboardInsider loading={isTransactionLoading || isInvoiceLoading}>
+    <DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
         title={intl.get('invoice_details')}
       />
       <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js
index 46ade648f..468fcaca3 100644
--- a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js
+++ b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import 'style/components/Drawers/ItemDrawer.scss';
 
+import { DrawerBody } from 'components';
 import ItemContentDetails from './ItemContentDetails';
 import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
 
@@ -14,7 +15,9 @@ export default function ItemDetailDrawerContent({
 }) {
   return (
     <ItemDetailDrawerProvider itemId={itemId}>
-      <ItemContentDetails />
+      <DrawerBody>
+        <ItemContentDetails />
+      </DrawerBody>
     </ItemDetailDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
index 095f19962..bb83783b3 100644
--- a/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useItem } from 'hooks/query';
 
 const ItemDetailDrawerContext = React.createContext();
@@ -21,10 +21,10 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isItemLoading}>
+    <DrawerLoading loading={isItemLoading}>
       <DrawerHeaderContent name="item-detail-drawer" title={item?.name} />
       <ItemDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 const useItemDetailDrawerContext = () =>
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js
index 905dd2174..7558f9951 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
+
 import 'style/components/Drawers/ViewDetails.scss';
 
 import { ManualJournalDrawerProvider } from './ManualJournalDrawerProvider';
@@ -14,7 +16,9 @@ export default function ManualJournalDrawerContent({
 }) {
   return (
     <ManualJournalDrawerProvider manualJournalId={manualJournalId}>
-      <ManualJournalDrawerDetails />
+      <DrawerBody>
+        <ManualJournalDrawerDetails />
+      </DrawerBody>
     </ManualJournalDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
index 527e259bb..0d007e7fb 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { useJournal } from 'hooks/query';
-import { DashboardInsider, DrawerHeaderContent } from 'components';
+import { DrawerLoading, DrawerHeaderContent } from 'components';
 
 const ManualJournalDrawerContext = React.createContext();
 
@@ -28,7 +28,7 @@ function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isJournalLoading}>
+    <DrawerLoading loading={isJournalLoading}>
       <DrawerHeaderContent
         name={'journal-drawer'}
         title={intl.get('manual_journal_number', {
@@ -36,7 +36,7 @@ function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
         })}
       />
       <ManualJournalDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/index.js b/client/src/containers/Drawers/ManualJournalDrawer/index.js
index eeecfc894..75b6667bb 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/index.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/index.js
@@ -14,7 +14,7 @@ const ManualJournalDrawerContent = lazy(() =>
 function ManualJournalDrawer({
   name,
 
-  //#withDrawer
+  // #withDrawer
   isOpen,
   payload: { manualJournalId },
 }) {
@@ -23,10 +23,7 @@ function ManualJournalDrawer({
       isOpen={isOpen}
       name={name}
       size={'65%'}
-      style={{
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
     >
       <DrawerSuspense>
         <ManualJournalDrawerContent manualJournalId={manualJournalId} />
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
index 5bab91ee3..c3f804381 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -14,7 +15,9 @@ export default function PaymentMadeDetailContent({
 }) {
   return (
     <PaymentMadeDetailProvider paymentMadeId={paymentMadeId}>
-      <PaymentMadeDetails />
+      <DrawerBody>
+        <PaymentMadeDetails />
+      </DrawerBody>
     </PaymentMadeDetailProvider>
   );
 }
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index d1d1cdb4b..bb22f3756 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import {
   useTransactionsByReference,
   usePaymentMade,
@@ -46,16 +46,18 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
     paymentMade,
     paymentEntries,
   };
+
+  const loading =
+    isTransactionLoading || isPaymentMadeLoading || isPaymentLoading;
+
   return (
-    <DashboardInsider
-      loading={isTransactionLoading || isPaymentMadeLoading || isPaymentLoading}
-    >
+    <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="payment-made-detail-drawer"
         title={intl.get('payment_made_details')}
       />
       <PaymentMadeDetailContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
index 2990085e1..1f4939feb 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -20,6 +20,9 @@ import { Icon, FormattedMessage as T } from 'components';
 
 import { compose } from 'utils';
 
+/**
+ * Payment receive actions bar.
+ */
 function PaymentReceiveActionsBar({
   // #withAlertsActions
   openAlert,
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js
index bb246b8b0..8837dd08c 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
 import PaymentReceiveDetail from './PaymentReceiveDetail';
 import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
 
@@ -12,7 +13,9 @@ export default function PaymentReceiveDetailContent({
 }) {
   return (
     <PaymentReceiveDetailProvider paymentReceiveId={paymentReceiveId}>
-      <PaymentReceiveDetail />
+      <DrawerBody>
+        <PaymentReceiveDetail />
+      </DrawerBody>
     </PaymentReceiveDetailProvider>
   );
 }
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
index 85117e1f3..aa79010e1 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useTransactionsByReference, usePaymentReceive } from 'hooks/query';
 
 const PaymentReceiveDetailContext = React.createContext();
@@ -30,16 +30,21 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
   );
 
   // Provider.
-  const provider = { transactions, paymentReceive, paymentReceiveId };
+  const provider = {
+    isPaymentFetching,
+    transactions,
+    paymentReceive,
+    paymentReceiveId,
+  };
 
   return (
-    <DashboardInsider loading={isTransactionLoading || isPaymentLoading}>
+    <DrawerLoading loading={isTransactionLoading || isPaymentLoading}>
       <DrawerHeaderContent
         name="payment-receive-detail-drawer"
         title={intl.get('payment_receive_details')}
       />
       <PaymentReceiveDetailContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
index c01872156..29fc0d98d 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -14,7 +15,9 @@ export default function ReceiptDetailDrawerContent({
 }) {
   return (
     <ReceiptDetailDrawerProvider receiptId={receiptId}>
-      <ReceiptDetail />
+      <DrawerBody>
+        <ReceiptDetail />
+      </DrawerBody>
     </ReceiptDetailDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
index 57dfd8d43..41365d214 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useTransactionsByReference, useReceipt } from 'hooks/query';
 
 // useTransactionsByReference
@@ -30,21 +30,23 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
     { enabled: !!receiptId },
   );
 
-  //provider.
+  // Provider.
   const provider = {
     transactions,
     receiptId,
     receipt,
   };
 
+  const loading = isTransactionLoading || isReceiptLoading;
+
   return (
-    <DashboardInsider loading={isTransactionLoading || isReceiptLoading}>
+    <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="receipt-detail-drawer"
         title={intl.get('receipt_details')}
       />
       <ReceiptDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 const useReceiptDetailDrawerContext = () =>
diff --git a/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerContent.js b/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerContent.js
index 8b5b3503a..d39d157a5 100644
--- a/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerContent.js
+++ b/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerContent.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
 import VendorDetails from './VendorDetails';
 import { VendorDetailsDrawerProvider } from './VendorDetailsDrawerProvider';
 
@@ -12,7 +13,9 @@ export default function VendorDetailsDrawerContent({
 }) {
   return (
     <VendorDetailsDrawerProvider vendorId={vendorId}>
-      <VendorDetails />
+      <DrawerBody>
+        <VendorDetails />
+      </DrawerBody>
     </VendorDetailsDrawerProvider>
   );
 }
diff --git a/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerProvider.js b/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerProvider.js
index 60e701a04..1f44b1fab 100644
--- a/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerProvider.js
+++ b/client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerProvider.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useVendor } from 'hooks/query';
 
 const VendorDetailDrawerContext = React.createContext();
@@ -9,12 +9,9 @@ const VendorDetailDrawerContext = React.createContext();
  */
 function VendorDetailsDrawerProvider({ vendorId, ...props }) {
   // Handle fetch vendor details.
-  const { data: vendor, isLoading: isVendorLoading } = useVendor(
-    vendorId,
-    {
-      enabled: !!vendorId,
-    },
-  );
+  const { data: vendor, isLoading: isVendorLoading } = useVendor(vendorId, {
+    enabled: !!vendorId,
+  });
   // Provider.
   const provider = {
     vendor,
@@ -23,13 +20,13 @@ function VendorDetailsDrawerProvider({ vendorId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isVendorLoading}>
+    <DrawerLoading loading={isVendorLoading}>
       <DrawerHeaderContent
         name="vendor-details-drawer"
         title={vendor?.display_name}
       />
       <VendorDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }