ui-soxo-bootstrap-core 2.6.44 → 2.6.46-dev.1

package/core/lib/components/global-header/global-header.js

@@ -85,7 +85,7 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
       className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
       style={{
         // background: state.theme.colors.bodyBackground,
-        height: auto,
+        height: 'auto',
       }}
     >
       {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}

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

@@ -6,24 +6,62 @@
  * @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 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 } from 'antd';
+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();
 
-export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
   /**
    * exportToExcel function
    * Triggered on button click, generates and downloads an Excel file
    */
 
-  const exportToExcel = () => {
+  const exportToExcel = (downloadFileName) => {
     // if (!csvData?.length) return;
 
     let worksheet;
@@ -75,14 +113,361 @@ export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
     const blob = new Blob([excelBuffer], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
     });
-    const flName = fileName || 'Report.xlsx';
+    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 headersToUse = headers?.length
+      ? headers
+      : Object.keys(csvData?.[0] || {}).map((key) => ({ label: key, key }));
+    const pageSize = headersToUse.length > 12 ? [1190, 842] : [842, 595];
+    const margin = 30;
+    const minRowHeight = 20;
+    const titleHeight = 38;
+    const fontSize = headersToUse.length > 12 ? 7 : 8;
+    const headerFontSize = headersToUse.length > 12 ? 7 : 8;
+    const lineHeight = fontSize + 2;
+    const headerLineHeight = headerFontSize + 2;
+    const cellPaddingX = 4;
+    const cellPaddingY = 5;
+    const availableWidth = pageSize[0] - margin * 2;
+    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 getTextWidth = (text, textFont, size) => textFont.widthOfTextAtSize(sanitizeValue(text), size);
+
+    const splitLongWord = (word, maxWidth, textFont, size) => {
+      const characters = Array.from(word);
+      const chunks = [];
+      let chunk = '';
+
+      characters.forEach((character) => {
+        const nextChunk = `${chunk}${character}`;
+
+        if (chunk && getTextWidth(nextChunk, textFont, size) > maxWidth) {
+          chunks.push(chunk);
+          chunk = character;
+        } else {
+          chunk = nextChunk;
+        }
+      });
+
+      if (chunk) chunks.push(chunk);
+      return chunks;
+    };
+
+    const wrapText = (value, maxWidth, textFont, size) => {
+      const text = sanitizeValue(value);
+      const usableWidth = Math.max(maxWidth, 1);
+      const paragraphs = text.split(/\r?\n/);
+
+      return paragraphs.flatMap((paragraph) => {
+        const words = paragraph.split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = '';
+
+        if (!words.length) return [''];
+
+        words.forEach((word) => {
+          if (getTextWidth(word, textFont, size) > usableWidth) {
+            if (line) {
+              lines.push(line);
+              line = '';
+            }
+
+            const chunks = splitLongWord(word, usableWidth, textFont, size);
+            chunks.forEach((chunk, chunkIndex) => {
+              if (chunkIndex === chunks.length - 1) {
+                line = chunk;
+              } else {
+                lines.push(chunk);
+              }
+            });
+
+            return;
+          }
+
+          const nextLine = line ? `${line} ${word}` : word;
+          if (getTextWidth(nextLine, textFont, size) <= usableWidth) {
+            line = nextLine;
+          } else {
+            if (line) lines.push(line);
+            line = word;
+          }
+        });
+
+        if (line) lines.push(line);
+        return lines;
+      });
+    };
+
+    const getColumnWidths = () => {
+      if (!headersToUse.length) return [availableWidth];
+
+      const sampleRows = (csvData || []).slice(0, 100);
+      const minWidths = [];
+      const preferredWidths = headersToUse.map((header, index) => {
+        const label = sanitizeValue(header.label);
+        const compactColumn = label === '#' || ['slno', 'sl no'].includes(label.toLowerCase());
+        const minWidth = compactColumn ? 28 : 36;
+        const values = [label, ...sampleRows.map((row) => sanitizeValue(row[header.key]))];
+        const longestValueWidth = values.reduce((maxWidth, value) => Math.max(maxWidth, getTextWidth(value, font, fontSize)), 0);
+        const longestWordWidth = values.reduce((maxWidth, value) => {
+          const words = value.split(/\s+/).filter(Boolean);
+          return words.reduce((wordMaxWidth, word) => Math.max(wordMaxWidth, getTextWidth(word, font, fontSize)), maxWidth);
+        }, 0);
+        const headerWidth = getTextWidth(label, boldFont, headerFontSize);
+        const preferredWidth = Math.max(
+          minWidth,
+          Math.min(longestValueWidth + cellPaddingX * 2, compactColumn ? 48 : 130),
+          Math.min(longestWordWidth + cellPaddingX * 2, compactColumn ? 48 : 95),
+          headerWidth + cellPaddingX * 2
+        );
+
+        minWidths[index] = minWidth;
+        return preferredWidth;
+      });
+
+      const minTotal = minWidths.reduce((total, width) => total + width, 0);
+      const preferredTotal = preferredWidths.reduce((total, width) => total + width, 0);
+
+      if (preferredTotal <= availableWidth) {
+        const extraWidth = availableWidth - preferredTotal;
+        return preferredWidths.map((width) => width + (extraWidth * width) / preferredTotal);
+      }
+
+      if (minTotal >= availableWidth) {
+        return minWidths.map((width) => (width * availableWidth) / minTotal);
+      }
+
+      const flexibleTotal = preferredWidths.reduce((total, width, index) => total + (width - minWidths[index]), 0);
+      const extraWidth = availableWidth - minTotal;
+
+      return preferredWidths.map((width, index) => {
+        const flexibleWidth = width - minWidths[index];
+        return minWidths[index] + (extraWidth * flexibleWidth) / flexibleTotal;
+      });
+    };
+
+    const columnWidths = getColumnWidths();
+
+    const getMaxLineCount = (cellLines) => Math.max(1, ...cellLines.map((lines) => lines.length));
+
+    const getRowHeight = (cellLines, rowLineHeight) =>
+      Math.max(minRowHeight, getMaxLineCount(cellLines) * rowLineHeight + cellPaddingY * 2);
+
+    const drawTableRow = (cellLines, rowHeight, options) => {
+      let x = margin;
+
+      cellLines.forEach((lines, index) => {
+        const width = columnWidths[index] || availableWidth;
+        page.drawRectangle({
+          x,
+          y: y - rowHeight,
+          width,
+          height: rowHeight,
+          color: options.backgroundColor,
+          borderColor: options.borderColor,
+          borderWidth: 0.5,
+        });
+
+        lines.forEach((line, lineIndex) => {
+          page.drawText(line, {
+            x: x + cellPaddingX,
+            y: y - cellPaddingY - options.fontSize - lineIndex * options.lineHeight,
+            size: options.fontSize,
+            font: options.font,
+            color: options.textColor,
+          });
+        });
+
+        x += width;
+      });
+
+      y -= rowHeight;
+    };
+
+    const headerCellLines = headersToUse.map((header, index) =>
+      wrapText(header.label, columnWidths[index] - cellPaddingX * 2, boldFont, headerFontSize)
+    );
+    const headerRowHeight = getRowHeight(headerCellLines, headerLineHeight);
+
+    const drawHeader = () => {
+      drawTableRow(headerCellLines, headerRowHeight, {
+        backgroundColor: rgb(0.92, 0.94, 0.96),
+        borderColor: rgb(0.72, 0.75, 0.78),
+        font: boldFont,
+        fontSize: headerFontSize,
+        lineHeight: headerLineHeight,
+        textColor: rgb(0.1, 0.1, 0.1),
+      });
+    };
+
+    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;
+      drawHeader();
+    };
+
+    const drawDataRow = (row) => {
+      const rowFont = row.isSummaryRow ? boldFont : font;
+      const cellLines = headersToUse.map((header, index) =>
+        wrapText(row[header.key], columnWidths[index] - cellPaddingX * 2, rowFont, fontSize)
+      );
+      let remainingCellLines = cellLines.map((lines) => (lines.length ? lines : ['']));
+      const fullPageDataHeight = pageSize[1] - margin * 2 - titleHeight - headerRowHeight;
+
+      while (remainingCellLines.some((lines) => lines.length)) {
+        const rowHeight = getRowHeight(remainingCellLines, lineHeight);
+        const availableHeight = y - margin;
+
+        if (rowHeight > availableHeight && rowHeight <= fullPageDataHeight) {
+          addPage();
+          continue;
+        }
+
+        const maxLinesOnPage =
+          rowHeight > availableHeight
+            ? Math.max(1, Math.floor((availableHeight - cellPaddingY * 2) / lineHeight))
+            : getMaxLineCount(remainingCellLines);
+        const segmentCellLines = remainingCellLines.map((lines) => lines.slice(0, maxLinesOnPage));
+        const segmentHeight = getRowHeight(segmentCellLines, lineHeight);
+
+        if (segmentHeight > availableHeight && availableHeight < fullPageDataHeight) {
+          addPage();
+          continue;
+        }
+
+        drawTableRow(segmentCellLines, segmentHeight, {
+          backgroundColor: row.isSummaryRow ? rgb(0.97, 0.97, 0.97) : rgb(1, 1, 1),
+          borderColor: rgb(0.82, 0.84, 0.86),
+          font: rowFont,
+          fontSize,
+          lineHeight,
+          textColor: rgb(0.12, 0.12, 0.12),
+        });
+
+        remainingCellLines = remainingCellLines.map((lines) => lines.slice(maxLinesOnPage));
+        if (remainingCellLines.some((lines) => lines.length)) addPage();
+      }
+    };
+
+    addPage();
+
+    (csvData || []).forEach((row) => {
+      drawDataRow(row);
+    });
+
+    if (!csvData?.length) {
+      page.drawText('No records found', {
+        x: margin,
+        y: y + 1,
+        size: fontSize,
+        font,
+        color: rgb(0.12, 0.12, 0.12),
+      });
+    }
+
+    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 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>
+  );
+
+  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>
+      </>
+
+    );
+  }
+
   // Render an Ant Design Button that triggers the Excel export
   return (
-    <Button type="secondary" size="small" onClick={exportToExcel}>
-      <Trans i18nKey="Download" />
+    <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>
   );
 };

package/core/lib/modules/generic/generic-list/generic-list.scss

@@ -32,3 +32,37 @@
         }
     }
 }
+
+.export-download-button {
+    &.ant-btn-primary {
+        background: #2f80ed;
+        border-color: #2f80ed;
+        color: #fff;
+
+        &:hover,
+        &:focus {
+            background: #1c7ed6;
+            border-color: #1c7ed6;
+            color: #fff;
+        }
+    }
+}
+
+.export-download-menu {
+    &__icon {
+        font-size: 16px;
+        vertical-align: -0.15em;
+
+        &--excel {
+            color: #18a058;
+        }
+
+        &--pdf {
+            color: #e03131;
+        }
+
+        &--mail {
+            color: #1c7ed6;
+        }
+    }
+}

package/core/models/core-scripts/core-scripts.js

@@ -80,6 +80,14 @@ class CoreScript extends Base {
     });
   };
 
+  // sentToReportMail = (formBody) => {
+  //   return ApiUtils.post({
+  //     baseUrl: 'http://localhost:8002/dev/',
+  //     url: `core-scripts/send-to-report-mail`,
+  //     formBody,
+  //   });
+  // };
+
   /**
    *Updating user details
    * @returns

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js

@@ -70,6 +70,10 @@ export default function ReportingDashboard({
 
   const [formContents, setformContents] = useState({});
   const [liveFormContents, setLiveFormContents] = useState({});
+  const [reportMailRequest, setReportMailRequest] = useState({
+    scriptId: null,
+    inputParameters: {},
+  });
 
   const scriptId = useRef(null);
 
@@ -300,6 +304,11 @@ export default function ReportingDashboard({
         formBody = { body: { ...scope, ...paginationData } };
       }
 
+      setReportMailRequest({
+        scriptId: coreScriptId,
+        inputParameters: formBody,
+      });
+
       // Fetch result
       const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
 
@@ -668,6 +677,8 @@ export default function ReportingDashboard({
             selectedSearchFields={selectedSearchFields}
             handleRemoveSearchField={handleRemoveSearchField}
             fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
+            reportScriptId={reportMailRequest.scriptId}
+            reportInputParameters={reportMailRequest.inputParameters}
           />
           {/** GuestList component end*/}
         </>
@@ -676,6 +687,29 @@ export default function ReportingDashboard({
   );
 }
 
+/**
+ * Filters report records using the same search text that drives the table.
+ *
+ * @param {Array<Object>} records - Report rows.
+ * @param {string} searchText - Current table search text.
+ * @returns {Array<Object>} Rows matching the search text.
+ */
+function filterReportRecords(records, searchText) {
+  if (!Array.isArray(records)) return [];
+
+  const query = String(searchText || '').trim().toLowerCase();
+
+  if (!query) return records;
+
+  return records.filter((record) =>
+    Object.values(record).some((value) => {
+      if (value === undefined || value === null || typeof value === 'object') return false;
+
+      return String(value).toLowerCase().indexOf(query) !== -1;
+    })
+  );
+}
+
 /**
  *
  * @param root0
@@ -703,6 +737,8 @@ function GuestList({
   selectedSearchFields,
   handleRemoveSearchField,
   fetchReportData,
+  reportScriptId,
+  reportInputParameters,
 }) {
   /**
    * @param {*} propValues
@@ -791,13 +827,13 @@ function GuestList({
         return col;
       });
       const summaryCols = columns.filter((col) => col.enable_summary);
-      let dataToExport = [...patients];
+      let dataToExport = [...filterReportRecords(patients, query)];
 
       if (summaryCols.length > 0) {
         // Build one synthetic row for CSV export that mirrors the table layout:
         // numeric summary cells are populated from `calculateSummaryValues`, while
         // non-summary columns stay blank unless a configured caption should be shown.
-        const summaryValues = calculateSummaryValues(summaryCols, patients);
+        const summaryValues = calculateSummaryValues(summaryCols, dataToExport);
         const summaryRow = { isSummaryRow: true };
 
         cols.forEach((col, index) => {
@@ -824,37 +860,15 @@ function GuestList({
       }
       let exportDatas = getExportData(dataToExport, exportCols);
 
-      if (exportDatas.exportDataColumns.length && exportDatas.exportDataHeaders.length) {
+      if (exportDatas.exportDataHeaders.length) {
         setExportData({ exportDatas });
+      } else {
+        setExportData({});
       }
     }
-  }, [patients, columns]);
-
-  let filtered;
-
-  if (patients) {
-    filtered = patients.filter((record) => {
-      if (query) {
-        // Keys
-        let keys = Object.keys(record);
-
-        let flag = false;
+  }, [patients, columns, query]);
 
-        keys.forEach((key) => {
-          let ele = record[key];
-
-          if (ele && typeof ele === 'string' && ele.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
-            flag = true;
-          }
-        });
-
-        /**Will return flag */
-        return flag;
-      } else {
-        return true;
-      }
-    });
-  }
+  let filtered = filterReportRecords(patients, query);
 
   /**
    * Checks for a match in the filtered patient list based on a scanned code,
@@ -977,11 +991,18 @@ function GuestList({
           <Search className="table-search-input" placeholder="Enter Search Value" allowClear onChange={onSearch} />
           <div className="table-export-button">
             {exportData.exportDatas && (
-              <ExportReactCSV
-                title={config.caption}
-                headers={exportData.exportDatas.exportDataHeaders}
-                csvData={exportData.exportDatas.exportDataColumns}
-              />
+              <>
+                <ExportReactCSV
+                  title={config.caption}
+                  headers={exportData.exportDatas.exportDataHeaders}
+                  csvData={exportData.exportDatas.exportDataColumns}
+                  fileName={`${config.caption || 'Report'}.xlsx`}
+                  pdfFileName={`${config.caption || 'Report'}.pdf`}
+                  scriptId={reportScriptId}
+                  inputParameters={reportInputParameters}
+                  dropdown
+                />
+              </>
             )}
           </div>
 
@@ -1036,7 +1057,7 @@ function GuestList({
               dataSource={filtered ? filtered : patients} // In case if there is no filtered values we can use patient data
               columns={cols}
               sticky
-              pagination={false}
+              pagination={true}
               summary={(pageData) => {
                 const summaryCols = columns.filter((col) => col.enable_summary);
                 if (!summaryCols.length) return null;

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.scss

@@ -52,6 +52,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    gap: 4px;
   }
   
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.44",
+  "version": "2.6.46-dev.1",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"