feat: application booting.

client/src/containers/Purchases/Bills/BillsLanding/BillsList.js

@@ -47,10 +47,7 @@ function BillsList({
 
       <DashboardPageContent>
         <BillsViewsTabs />
-
-        <DashboardContentTable>
-          <BillsTable />
-        </DashboardContentTable>
+        <BillsTable />
       </DashboardPageContent>
 
       <BillsAlerts />

client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { compose } from 'utils';
 
 import DataTable from 'components/DataTable';
+import { DashboardContentTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
@@ -92,6 +93,7 @@ function BillsDataTable({
   }
 
   return (
+    <DashboardContentTable>
     <DataTable
       columns={columns}
       data={bills}
@@ -118,6 +120,7 @@ function BillsDataTable({
         onViewDetails: handleViewDetailBill,
       }}
     />
+    </DashboardContentTable>
   );
 }
 

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js

@@ -42,10 +42,7 @@ function PaymentMadeList({
 
       <DashboardPageContent>
         <PaymentMadeViewTabs />
-
-        <DashboardContentTable>
-          <PaymentMadesTable />
-        </DashboardContentTable>
+        <PaymentMadesTable />
       </DashboardPageContent>
 
       <PaymentMadesAlerts />

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js

@@ -3,7 +3,8 @@ import { useHistory } from 'react-router-dom';
 
 import { compose } from 'utils';
 
-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';
+
 import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
@@ -76,31 +77,33 @@ function PaymentMadesTable({
   }
 
   return (
-    <DataTable
-      columns={columns}
-      data={paymentMades}
-      initialState={paymentMadesTableState}
-      onFetchData={handleDataTableFetchData}
-      loading={isPaymentsLoading}
-      headerLoading={isPaymentsLoading}
-      progressBarLoading={isPaymentsFetching}
-      manualSortBy={true}
-      selectionColumn={true}
-      noInitialFetch={true}
-      sticky={true}
-      pagination={true}
-      pagesCount={pagination.pagesCount}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onEdit: handleEditPaymentMade,
-        onDelete: handleDeletePaymentMade,
-        onViewDetails: handleViewDetailPaymentMade,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={paymentMades}
+        initialState={paymentMadesTableState}
+        onFetchData={handleDataTableFetchData}
+        loading={isPaymentsLoading}
+        headerLoading={isPaymentsLoading}
+        progressBarLoading={isPaymentsFetching}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditPaymentMade,
+          onDelete: handleDeletePaymentMade,
+          onViewDetails: handleViewDetailPaymentMade,
+        }}
+      />
+    </DashboardContentTable>
   );
 }