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

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

@@ -1,88 +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 from 'react';
-// Import XLSX library to handle Excel file creation
-import * as XLSX from 'xlsx';
-// 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 } from 'antd';
-import { Trans } from 'react-i18next';
-
-export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
-  /**
-   * exportToExcel function
-   * Triggered on button click, generates and downloads an Excel file
-   */
-
-  const exportToExcel = () => {
-    // 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 = fileName || 'Report.xlsx';
-    // Trigger download using file-saver
-    saveAs(blob, flName);
-  };
-  // Render an Ant Design Button that triggers the Excel export
-  return (
-    <Button type="secondary" size="small" onClick={exportToExcel}>
-      <Trans i18nKey="Download" />
-    </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>
+  );
+};