updates on the dispatch page and redesigned the maximum pages

src/components/third-party/ReactTable.js

@@ -5,8 +5,10 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import {
   Box,
+  Button,
   Checkbox,
   Chip,
+  CircularProgress,
   FormControl,
   Grid,
   ListItemText,
@@ -493,20 +495,36 @@ SortingSelect.propTypes = {
 
 // ==============================|| CSV EXPORT ||============================== //
 
-export const CSVExport = ({ data, filename, headers }) => {
+export const CSVExport = ({ data, filename, headers, label, style, btnLoading, onClick }) => {
   return (
     <CSVLink data={data} filename={filename} headers={headers}>
-      <Tooltip title="Download CSV">
-        <DownloadOutlined style={{ fontSize: '24px', color: 'gray', marginTop: 4, marginRight: 4, marginLeft: 4 }} />
+      <Tooltip title="CSV Export">
+        <Button
+          startIcon={!btnLoading && <DownloadOutlined />}
+          variant={btnLoading ? 'outlined' : 'contained'}
+          sx={{ ...style }}
+          disabled={btnLoading}
+          onClick={(e) => {
+            onClick?.(e);
+          }}
+        >
+          {btnLoading ? <CircularProgress size={20} thickness={5} /> : label || 'Download'}
+        </Button>
       </Tooltip>
     </CSVLink>
   );
 };
 
+export default CSVExport;
+
 CSVExport.propTypes = {
   data: PropTypes.array,
   headers: PropTypes.any,
-  filename: PropTypes.string
+  filename: PropTypes.string,
+  label: PropTypes.node,
+  style: PropTypes.object,
+  btnLoading: PropTypes.bool,
+  onClick: PropTypes.func
 };
 // ==============================|| EMPTY TABLE - NO DATA  ||============================== //