ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

package/core/lib/modules/generic/generic-list/ExportReactCSV.js

@@ -1,414 +1,414 @@
-/**
- * Exports the provided data as an `.xlsx` Excel file using the `xlsx` and `file-saver` libraries.
- *
- * Props:
- * @param {Array<Object>} csvData - The data array to export.
- * @param {Array<{ label: string, key: string }>} [headers] - Optional column headers and field mappings.
- * @param {string} [fileName='Report.xlsx'] - Optional name for the downloaded Excel file.
- */
- 
-import React, { useState } from 'react';
-// Import XLSX library to handle Excel file creation
-import * as XLSX from 'xlsx';
-import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
-// import * as XLSX from 'xlsx-js-style';
-// import * as XLSX from 'xlsx-js-style';
-// Import saveAs from file-saver to trigger file download in browser
-import { saveAs } from 'file-saver';
-import { Button, Dropdown, Form, Input, Menu, Modal, Radio, message } from 'antd';
-import { DownOutlined, FileExcelFilled, FilePdfFilled, MailFilled, DownloadOutlined } from '@ant-design/icons';
-import { Trans } from 'react-i18next';
-import { CoreScripts } from '../../../../models';
-import './generic-list.scss';
-
-const normalizeScriptId = (value) => {
-  if (value === undefined || value === null || value === '') return value;
-
-  const numberValue = Number(value);
-  return Number.isNaN(numberValue) ? value : numberValue;
-};
-
-const getRecipients = (value) => {
-  if (Array.isArray(value)) return value.filter(Boolean);
-
-  return String(value || '')
-    .split(/[\n,;]+/)
-    .map((email) => email.trim())
-    .filter(Boolean);
-};
-
-
-export const ExportReactCSV = ({
-  csvData,
-  headers,
-  fileName,
-  pdfFileName,
-  title,
-  format = 'excel',
-  buttonText,
-  dropdown = false,
-  onSendReportToMail,
-  scriptId,
-  inputParameters,
-}) => {
-  const [mailModalVisible, setMailModalVisible] = useState(false);
-  const [sendingMail, setSendingMail] = useState(false);
-  const [selectedFormat, setSelectedFormat] = useState('excel');
-  const [mailForm] = Form.useForm();
-
-  /**
-   * exportToExcel function
-   * Triggered on button click, generates and downloads an Excel file
-   */
-
-  const exportToExcel = (downloadFileName) => {
-    // if (!csvData?.length) return;
-
-    let worksheet;
-    // If headers are provided, use them to create the sheet with custom columns
-    if (headers?.length) {
-      // Extract label names for the header row
-      const headerLabels = headers.map((h) => h.label);
-      // Map data rows according to the headers' key order
-      const rows = csvData.map((row) =>
-        headers.map((h, hIndex) => {
-          let value = row[h.key];
-          // If it's a summary row, return a cell object with bold styling
-          if (row.isSummaryRow) {
-            // Remove the index value (typically the first column) for the summary row
-            if (hIndex === 0) value = "";
-
-            return {
-              v: value,
-              s: {
-                font: { bold: true },
-                // "Thick" visual indicator via border
-                // Visual indicator via border
-                border: { bottom: { style: "thick", color: { rgb: "000000" } } }
-              }
-            };
-          }
-          return value;
-        })
-      );
-      // Create a worksheet from an array of arrays (header + rows)
-      const data = [[title || "Report"], [], headerLabels, ...rows];
-      // worksheet = XLSX.utils.aoa_to_sheet([headerLabels, ...rows]);
-      worksheet = XLSX.utils.aoa_to_sheet(data);
-    } else {
-      // If no headers, convert JSON data directly to a worksheet
-      worksheet = XLSX.utils.json_to_sheet(csvData);
-    }
-    // Create a new workbook
-    const workbook = XLSX.utils.book_new();
-    // Append the worksheet to the workbook with the name 'Sheet1'
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
-    // Write workbook to a buffer as an array
-    const excelBuffer = XLSX.write(workbook, {
-      bookType: 'xlsx',
-      type: 'array',
-      cellStyles: true, // Required to export styles
-    });
-    // Create a Blob object from the buffer with correct MIME type
-    const blob = new Blob([excelBuffer], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-    });
-    const flName = downloadFileName || fileName || 'Report.xlsx';
-    // Trigger download using file-saver
-    saveAs(blob, flName);
-  };
-
-  const exportToPdf = async (downloadFileName) => {
-    const pdfDoc = await PDFDocument.create();
-    const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
-    const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
-    const pageSize = [842, 595];
-    const margin = 30;
-    const rowHeight = 20;
-    const titleHeight = 38;
-    const fontSize = 8;
-    const headerFontSize = 8;
-    const headersToUse = headers?.length
-      ? headers
-      : Object.keys(csvData?.[0] || {}).map((key) => ({ label: key, key }));
-    const availableWidth = pageSize[0] - margin * 2;
-    const columnWidth = headersToUse.length ? availableWidth / headersToUse.length : availableWidth;
-    let page;
-    let y;
-
-    const sanitizeValue = (value) => {
-      if (value === undefined || value === null) return '';
-      if (typeof value === 'object') return JSON.stringify(value);
-      return String(value);
-    };
-
-    const fitText = (text, width, textFont, size) => {
-      const sanitizedText = sanitizeValue(text);
-      if (textFont.widthOfTextAtSize(sanitizedText, size) <= width) return sanitizedText;
-
-      let fittedText = sanitizedText;
-      while (fittedText.length && textFont.widthOfTextAtSize(`${fittedText}...`, size) > width) {
-        fittedText = fittedText.slice(0, -1);
-      }
-      return fittedText ? `${fittedText}...` : '';
-    };
-
-    const addPage = () => {
-      page = pdfDoc.addPage(pageSize);
-      y = pageSize[1] - margin;
-
-      page.drawText(title || 'Report', {
-        x: margin,
-        y,
-        size: 14,
-        font: boldFont,
-        color: rgb(0.1, 0.1, 0.1),
-      });
-
-      y -= titleHeight;
-
-      headersToUse.forEach((header, index) => {
-        const x = margin + index * columnWidth;
-        page.drawRectangle({
-          x,
-          y: y - 5,
-          width: columnWidth,
-          height: rowHeight,
-          color: rgb(0.92, 0.94, 0.96),
-          borderColor: rgb(0.72, 0.75, 0.78),
-          borderWidth: 0.5,
-        });
-        page.drawText(fitText(header.label, columnWidth - 8, boldFont, headerFontSize), {
-          x: x + 4,
-          y: y + 1,
-          size: headerFontSize,
-          font: boldFont,
-          color: rgb(0.1, 0.1, 0.1),
-        });
-      });
-
-      y -= rowHeight;
-    };
-
-    addPage();
-
-    (csvData || []).forEach((row) => {
-      if (y < margin + rowHeight) addPage();
-
-      headersToUse.forEach((header, index) => {
-        const x = margin + index * columnWidth;
-        page.drawRectangle({
-          x,
-          y: y - 5,
-          width: columnWidth,
-          height: rowHeight,
-          color: row.isSummaryRow ? rgb(0.97, 0.97, 0.97) : rgb(1, 1, 1),
-          borderColor: rgb(0.82, 0.84, 0.86),
-          borderWidth: 0.5,
-        });
-        page.drawText(fitText(row[header.key], columnWidth - 8, row.isSummaryRow ? boldFont : font, fontSize), {
-          x: x + 4,
-          y: y + 1,
-          size: fontSize,
-          font: row.isSummaryRow ? boldFont : font,
-          color: rgb(0.12, 0.12, 0.12),
-        });
-      });
-
-      y -= rowHeight;
-    });
-
-    const pdfBytes = await pdfDoc.save();
-    const blob = new Blob([pdfBytes], { type: 'application/pdf' });
-    const flName = downloadFileName || pdfFileName || fileName || 'Report.pdf';
-    saveAs(blob, flName);
-  };
-
-  const handleDownloadMenuClick = ({ key }) => {
-    if (key === 'excel') {
-      exportToExcel(fileName);
-      return;
-    }
-
-    if (key === 'pdf') {
-      exportToPdf(pdfFileName);
-      return;
-    }
-
-    if (key === 'mail') {
-      setMailModalVisible(true);
-    }
-  };
-
-  const handleMailModalClose = () => {
-    setMailModalVisible(false);
-    mailForm.resetFields();
-    setSelectedFormat('excel');
-  };
-
-  const handleFormatToggle = (value) => {
-    const nextValue = selectedFormat === value ? null : value;
-    setSelectedFormat(nextValue);
-    mailForm.setFieldsValue({ format: nextValue });
-  };
-
-  // const handleSendReportToMail = async (values) => {
-  //   setSendingMail(true);
-
-  //   try {
-  //     const mailFormat = values.format || selectedFormat || 'excel';
-  //     const isBoth = mailFormat === 'both';
-  //     const payload = {
-  //       script_id: normalizeScriptId(scriptId),
-  //       input_parameters: inputParameters || {},
-  //       is_pdf: mailFormat === 'pdf' || isBoth,
-  //       is_excel: mailFormat === 'excel' || isBoth,
-  //       is_both: isBoth,
-  //       recipients: getRecipients(values.email),
-  //     };
-  //     const data = onSendReportToMail
-  //       ? await onSendReportToMail(payload)
-  //       : await CoreScripts.sentToReportMail(payload);
-
-  //     if (data?.success === false) throw data;
-
-  //     message.success(data?.message || 'Report mail sent successfully');
-  //     handleMailModalClose();
-  //   } catch (error) {
-  //     message.error(error?.message || 'Unable to send report mail');
-  //   } finally {
-  //     setSendingMail(false);
-  //   }
-  // };
-
-  const downloadMenu = (
-    <Menu className="export-download-menu" onClick={handleDownloadMenuClick}>
-      <Menu.Item
-        key="excel"
-        icon={<FileExcelFilled className="export-download-menu__icon export-download-menu__icon--excel" />}
-      >
-        Download Excel Sheet
-      </Menu.Item>
-      <Menu.Item
-        key="pdf"
-        icon={<FilePdfFilled className="export-download-menu__icon export-download-menu__icon--pdf" />}
-      >
-        Download PDF
-      </Menu.Item>
-      {/* <Menu.Item
-        key="mail"
-        icon={<MailFilled className="export-download-menu__icon export-download-menu__icon--mail" />}
-      >
-        Send report to mail
-      </Menu.Item> */}
-    </Menu>
-  );
-
-  const isPdf = format === 'pdf';
-  const handleExportButtonClick = () => {
-    if (isPdf) {
-      exportToPdf();
-      return;
-    }
-
-    exportToExcel();
-  };
-
-  if (dropdown) {
-    return (
-      <>
-        <Dropdown overlay={downloadMenu} trigger={['click']} placement="bottomRight">
-          <Button type="primary" size="small" className="export-download-button">
-            <Trans i18nKey={buttonText || 'Download'} /> <DownloadOutlined className="export-download-button__icon" />
-          </Button>
-        </Dropdown>
-{/* 
-        <Modal
-          title="Send report to mail"
-          open={mailModalVisible}
-          onCancel={handleMailModalClose}
-          footer={null}
-          destroyOnClose
-          width={460}
-        >
-          <Form
-            form={mailForm}
-            layout="vertical"
-            initialValues={{ format: 'excel' }}
-            onFinish={handleSendReportToMail}
-          >
-            <Form.Item
-              name="format"
-              style={{ marginBottom: 16 }}
-              rules={[
-                {
-                  validator: () =>
-                    selectedFormat
-                      ? Promise.resolve()
-                      : Promise.reject(new Error('Please select a format')),
-                },
-              ]}
-            >
-              <div
-                className="export-mail-format-options"
-                style={{ display: 'flex', alignItems: 'center', columnGap: 24 }}
-              >
-                <Radio
-                  checked={selectedFormat === 'excel'}
-                  style={{ marginRight: 0 }}
-                  onClick={() => handleFormatToggle('excel')}
-                >
-                  Excel
-                </Radio>
-                <Radio
-                  checked={selectedFormat === 'pdf'}
-                  style={{ marginRight: 0 }}
-                  onClick={() => handleFormatToggle('pdf')}
-                >
-                  PDF
-                </Radio>
-                <Radio
-                  checked={selectedFormat === 'both'}
-                  style={{ marginRight: 0 }}
-                  onClick={() => handleFormatToggle('both')}
-                >
-                  Both
-                </Radio>
-              </div>
-            </Form.Item>
-
-            <Form.Item
-              name="email"
-              label="EMAIL ID"
-              rules={[
-                { required: true, message: 'Please enter email id' },
-                { type: 'email', message: 'Please enter a valid email id' },
-              ]}
-            >
-              <Input placeholder="Enter Mail Id" />
-            </Form.Item>
-
-            <Form.Item
-              name="remarks"
-              label="REMARKS"
-              rules={[{ required: true, message: 'Please enter remarks' }]}
-            >
-              <Input.TextArea placeholder="Enter Remarks" rows={4} />
-            </Form.Item>
-
-            <Button type="primary" htmlType="submit" loading={sendingMail}>
-              Send
-            </Button>
-          </Form>
-        </Modal> */}
-      </>
-    );
-  }
-
-  // Render an Ant Design Button that triggers the Excel export
-  return (
-    <Button type="secondary" size="small" onClick={handleExportButtonClick} className="export-download-button">
-      <Trans i18nKey={buttonText || (isPdf ? 'PDF Download' : 'Download')} /> <DownloadOutlined className="export-download-button__icon" />
-    </Button>
-  );
-};
+/**
+ * Exports the provided data as an `.xlsx` Excel file using the `xlsx` and `file-saver` libraries.
+ *
+ * Props:
+ * @param {Array<Object>} csvData - The data array to export.
+ * @param {Array<{ label: string, key: string }>} [headers] - Optional column headers and field mappings.
+ * @param {string} [fileName='Report.xlsx'] - Optional name for the downloaded Excel file.
+ */
+ 
+import React, { useState } from 'react';
+// Import XLSX library to handle Excel file creation
+import * as XLSX from 'xlsx';
+import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
+// import * as XLSX from 'xlsx-js-style';
+// import * as XLSX from 'xlsx-js-style';
+// Import saveAs from file-saver to trigger file download in browser
+import { saveAs } from 'file-saver';
+import { Button, Dropdown, Form, Input, Menu, Modal, Radio, message } from 'antd';
+import { DownOutlined, FileExcelFilled, FilePdfFilled, MailFilled, DownloadOutlined } from '@ant-design/icons';
+import { Trans } from 'react-i18next';
+import { CoreScripts } from '../../../../models';
+import './generic-list.scss';
+
+const normalizeScriptId = (value) => {
+  if (value === undefined || value === null || value === '') return value;
+
+  const numberValue = Number(value);
+  return Number.isNaN(numberValue) ? value : numberValue;
+};
+
+const getRecipients = (value) => {
+  if (Array.isArray(value)) return value.filter(Boolean);
+
+  return String(value || '')
+    .split(/[\n,;]+/)
+    .map((email) => email.trim())
+    .filter(Boolean);
+};
+
+
+export const ExportReactCSV = ({
+  csvData,
+  headers,
+  fileName,
+  pdfFileName,
+  title,
+  format = 'excel',
+  buttonText,
+  dropdown = false,
+  onSendReportToMail,
+  scriptId,
+  inputParameters,
+}) => {
+  const [mailModalVisible, setMailModalVisible] = useState(false);
+  const [sendingMail, setSendingMail] = useState(false);
+  const [selectedFormat, setSelectedFormat] = useState('excel');
+  const [mailForm] = Form.useForm();
+
+  /**
+   * exportToExcel function
+   * Triggered on button click, generates and downloads an Excel file
+   */
+
+  const exportToExcel = (downloadFileName) => {
+    // if (!csvData?.length) return;
+
+    let worksheet;
+    // If headers are provided, use them to create the sheet with custom columns
+    if (headers?.length) {
+      // Extract label names for the header row
+      const headerLabels = headers.map((h) => h.label);
+      // Map data rows according to the headers' key order
+      const rows = csvData.map((row) =>
+        headers.map((h, hIndex) => {
+          let value = row[h.key];
+          // If it's a summary row, return a cell object with bold styling
+          if (row.isSummaryRow) {
+            // Remove the index value (typically the first column) for the summary row
+            if (hIndex === 0) value = "";
+
+            return {
+              v: value,
+              s: {
+                font: { bold: true },
+                // "Thick" visual indicator via border
+                // Visual indicator via border
+                border: { bottom: { style: "thick", color: { rgb: "000000" } } }
+              }
+            };
+          }
+          return value;
+        })
+      );
+      // Create a worksheet from an array of arrays (header + rows)
+      const data = [[title || "Report"], [], headerLabels, ...rows];
+      // worksheet = XLSX.utils.aoa_to_sheet([headerLabels, ...rows]);
+      worksheet = XLSX.utils.aoa_to_sheet(data);
+    } else {
+      // If no headers, convert JSON data directly to a worksheet
+      worksheet = XLSX.utils.json_to_sheet(csvData);
+    }
+    // Create a new workbook
+    const workbook = XLSX.utils.book_new();
+    // Append the worksheet to the workbook with the name 'Sheet1'
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+    // Write workbook to a buffer as an array
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: 'xlsx',
+      type: 'array',
+      cellStyles: true, // Required to export styles
+    });
+    // Create a Blob object from the buffer with correct MIME type
+    const blob = new Blob([excelBuffer], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    });
+    const flName = downloadFileName || fileName || 'Report.xlsx';
+    // Trigger download using file-saver
+    saveAs(blob, flName);
+  };
+
+  const exportToPdf = async (downloadFileName) => {
+    const pdfDoc = await PDFDocument.create();
+    const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+    const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+    const pageSize = [842, 595];
+    const margin = 30;
+    const rowHeight = 20;
+    const titleHeight = 38;
+    const fontSize = 8;
+    const headerFontSize = 8;
+    const headersToUse = headers?.length
+      ? headers
+      : Object.keys(csvData?.[0] || {}).map((key) => ({ label: key, key }));
+    const availableWidth = pageSize[0] - margin * 2;
+    const columnWidth = headersToUse.length ? availableWidth / headersToUse.length : availableWidth;
+    let page;
+    let y;
+
+    const sanitizeValue = (value) => {
+      if (value === undefined || value === null) return '';
+      if (typeof value === 'object') return JSON.stringify(value);
+      return String(value);
+    };
+
+    const fitText = (text, width, textFont, size) => {
+      const sanitizedText = sanitizeValue(text);
+      if (textFont.widthOfTextAtSize(sanitizedText, size) <= width) return sanitizedText;
+
+      let fittedText = sanitizedText;
+      while (fittedText.length && textFont.widthOfTextAtSize(`${fittedText}...`, size) > width) {
+        fittedText = fittedText.slice(0, -1);
+      }
+      return fittedText ? `${fittedText}...` : '';
+    };
+
+    const addPage = () => {
+      page = pdfDoc.addPage(pageSize);
+      y = pageSize[1] - margin;
+
+      page.drawText(title || 'Report', {
+        x: margin,
+        y,
+        size: 14,
+        font: boldFont,
+        color: rgb(0.1, 0.1, 0.1),
+      });
+
+      y -= titleHeight;
+
+      headersToUse.forEach((header, index) => {
+        const x = margin + index * columnWidth;
+        page.drawRectangle({
+          x,
+          y: y - 5,
+          width: columnWidth,
+          height: rowHeight,
+          color: rgb(0.92, 0.94, 0.96),
+          borderColor: rgb(0.72, 0.75, 0.78),
+          borderWidth: 0.5,
+        });
+        page.drawText(fitText(header.label, columnWidth - 8, boldFont, headerFontSize), {
+          x: x + 4,
+          y: y + 1,
+          size: headerFontSize,
+          font: boldFont,
+          color: rgb(0.1, 0.1, 0.1),
+        });
+      });
+
+      y -= rowHeight;
+    };
+
+    addPage();
+
+    (csvData || []).forEach((row) => {
+      if (y < margin + rowHeight) addPage();
+
+      headersToUse.forEach((header, index) => {
+        const x = margin + index * columnWidth;
+        page.drawRectangle({
+          x,
+          y: y - 5,
+          width: columnWidth,
+          height: rowHeight,
+          color: row.isSummaryRow ? rgb(0.97, 0.97, 0.97) : rgb(1, 1, 1),
+          borderColor: rgb(0.82, 0.84, 0.86),
+          borderWidth: 0.5,
+        });
+        page.drawText(fitText(row[header.key], columnWidth - 8, row.isSummaryRow ? boldFont : font, fontSize), {
+          x: x + 4,
+          y: y + 1,
+          size: fontSize,
+          font: row.isSummaryRow ? boldFont : font,
+          color: rgb(0.12, 0.12, 0.12),
+        });
+      });
+
+      y -= rowHeight;
+    });
+
+    const pdfBytes = await pdfDoc.save();
+    const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+    const flName = downloadFileName || pdfFileName || fileName || 'Report.pdf';
+    saveAs(blob, flName);
+  };
+
+  const handleDownloadMenuClick = ({ key }) => {
+    if (key === 'excel') {
+      exportToExcel(fileName);
+      return;
+    }
+
+    if (key === 'pdf') {
+      exportToPdf(pdfFileName);
+      return;
+    }
+
+    if (key === 'mail') {
+      setMailModalVisible(true);
+    }
+  };
+
+  const handleMailModalClose = () => {
+    setMailModalVisible(false);
+    mailForm.resetFields();
+    setSelectedFormat('excel');
+  };
+
+  const handleFormatToggle = (value) => {
+    const nextValue = selectedFormat === value ? null : value;
+    setSelectedFormat(nextValue);
+    mailForm.setFieldsValue({ format: nextValue });
+  };
+
+  // const handleSendReportToMail = async (values) => {
+  //   setSendingMail(true);
+
+  //   try {
+  //     const mailFormat = values.format || selectedFormat || 'excel';
+  //     const isBoth = mailFormat === 'both';
+  //     const payload = {
+  //       script_id: normalizeScriptId(scriptId),
+  //       input_parameters: inputParameters || {},
+  //       is_pdf: mailFormat === 'pdf' || isBoth,
+  //       is_excel: mailFormat === 'excel' || isBoth,
+  //       is_both: isBoth,
+  //       recipients: getRecipients(values.email),
+  //     };
+  //     const data = onSendReportToMail
+  //       ? await onSendReportToMail(payload)
+  //       : await CoreScripts.sentToReportMail(payload);
+
+  //     if (data?.success === false) throw data;
+
+  //     message.success(data?.message || 'Report mail sent successfully');
+  //     handleMailModalClose();
+  //   } catch (error) {
+  //     message.error(error?.message || 'Unable to send report mail');
+  //   } finally {
+  //     setSendingMail(false);
+  //   }
+  // };
+
+  const downloadMenu = (
+    <Menu className="export-download-menu" onClick={handleDownloadMenuClick}>
+      <Menu.Item
+        key="excel"
+        icon={<FileExcelFilled className="export-download-menu__icon export-download-menu__icon--excel" />}
+      >
+        Download Excel Sheet
+      </Menu.Item>
+      <Menu.Item
+        key="pdf"
+        icon={<FilePdfFilled className="export-download-menu__icon export-download-menu__icon--pdf" />}
+      >
+        Download PDF
+      </Menu.Item>
+      {/* <Menu.Item
+        key="mail"
+        icon={<MailFilled className="export-download-menu__icon export-download-menu__icon--mail" />}
+      >
+        Send report to mail
+      </Menu.Item> */}
+    </Menu>
+  );
+
+  const isPdf = format === 'pdf';
+  const handleExportButtonClick = () => {
+    if (isPdf) {
+      exportToPdf();
+      return;
+    }
+
+    exportToExcel();
+  };
+
+  if (dropdown) {
+    return (
+      <>
+        <Dropdown overlay={downloadMenu} trigger={['click']} placement="bottomRight">
+          <Button type="primary" size="small" className="export-download-button">
+            <Trans i18nKey={buttonText || 'Download'} /> <DownloadOutlined className="export-download-button__icon" />
+          </Button>
+        </Dropdown>
+{/* 
+        <Modal
+          title="Send report to mail"
+          open={mailModalVisible}
+          onCancel={handleMailModalClose}
+          footer={null}
+          destroyOnClose
+          width={460}
+        >
+          <Form
+            form={mailForm}
+            layout="vertical"
+            initialValues={{ format: 'excel' }}
+            onFinish={handleSendReportToMail}
+          >
+            <Form.Item
+              name="format"
+              style={{ marginBottom: 16 }}
+              rules={[
+                {
+                  validator: () =>
+                    selectedFormat
+                      ? Promise.resolve()
+                      : Promise.reject(new Error('Please select a format')),
+                },
+              ]}
+            >
+              <div
+                className="export-mail-format-options"
+                style={{ display: 'flex', alignItems: 'center', columnGap: 24 }}
+              >
+                <Radio
+                  checked={selectedFormat === 'excel'}
+                  style={{ marginRight: 0 }}
+                  onClick={() => handleFormatToggle('excel')}
+                >
+                  Excel
+                </Radio>
+                <Radio
+                  checked={selectedFormat === 'pdf'}
+                  style={{ marginRight: 0 }}
+                  onClick={() => handleFormatToggle('pdf')}
+                >
+                  PDF
+                </Radio>
+                <Radio
+                  checked={selectedFormat === 'both'}
+                  style={{ marginRight: 0 }}
+                  onClick={() => handleFormatToggle('both')}
+                >
+                  Both
+                </Radio>
+              </div>
+            </Form.Item>
+
+            <Form.Item
+              name="email"
+              label="EMAIL ID"
+              rules={[
+                { required: true, message: 'Please enter email id' },
+                { type: 'email', message: 'Please enter a valid email id' },
+              ]}
+            >
+              <Input placeholder="Enter Mail Id" />
+            </Form.Item>
+
+            <Form.Item
+              name="remarks"
+              label="REMARKS"
+              rules={[{ required: true, message: 'Please enter remarks' }]}
+            >
+              <Input.TextArea placeholder="Enter Remarks" rows={4} />
+            </Form.Item>
+
+            <Button type="primary" htmlType="submit" loading={sendingMail}>
+              Send
+            </Button>
+          </Form>
+        </Modal> */}
+      </>
+    );
+  }
+
+  // Render an Ant Design Button that triggers the Excel export
+  return (
+    <Button type="secondary" size="small" onClick={handleExportButtonClick} className="export-download-button">
+      <Trans i18nKey={buttonText || (isPdf ? 'PDF Download' : 'Download')} /> <DownloadOutlined className="export-download-button__icon" />
+    </Button>
+  );
+};