ui-soxo-bootstrap-core 2.6.40-dev.20 → 2.6.40-dev.22

package/core/lib/components/consent/signature-pad.js

@@ -1,5 +1,5 @@
 // src/components/SignatureCanvas.js
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import SignatureCanvas from 'react-signature-canvas';
 import { Button, message } from 'antd';
 import { useTranslation } from '../../../lib';
@@ -8,12 +8,22 @@ import './signature-pad.scss';
 
 
 
-const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }) => {
+const SignatureCanvasComponent = ({
+    onClear,
+    onSaveAndAddSignature,
+    btnloading,
+    showUpload = true,
+    accept = 'image/png',
+    maxSizeMB = 5,
+}) => {
     const sigCanvas = useRef({});
+    const fileInput = useRef(null);
+    const [uploadedName, setUploadedName] = useState(null);
     const { t, i18n } = useTranslation(); // To Translate to another language
 
     const clear = () => {
         sigCanvas.current.clear()
+        setUploadedName(null);
         if (onClear) onClear();
     };
 
@@ -34,6 +44,102 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
         }
     };
 
+    /**
+     * Open the (hidden) file picker
+     */
+    const selectImage = () => {
+        if (fileInput.current) fileInput.current.click();
+    };
+
+    /**
+     * Draw the picked image on the pad, scaled to fit and centered,
+     * so that Save / Clear keep working exactly as with a drawn signature
+     *
+     * @param {string} dataUrl 
+     */
+    const drawImageOnPad = (dataUrl) => {
+        const image = new Image();
+
+        image.onerror = () => message.error(t('Unable to load the selected image'));
+
+        image.onload = () => {
+            const canvas = sigCanvas.current.getCanvas();
+
+            if (!canvas || !image.naturalWidth || !image.naturalHeight) {
+                message.error(t('Unable to load the selected image'));
+                return;
+            }
+
+            // Size the canvas is drawn with, and its actual (device pixel) resolution
+            const drawWidth = canvas.offsetWidth || canvas.width;
+            const drawHeight = canvas.offsetHeight || canvas.height;
+            const ratio = canvas.width / drawWidth;
+
+            // Fit inside the pad without distorting the image
+            const scale = Math.min(
+                canvas.width / image.naturalWidth,
+                canvas.height / image.naturalHeight
+            );
+            const imageWidth = image.naturalWidth * scale;
+            const imageHeight = image.naturalHeight * scale;
+
+            const offscreen = document.createElement('canvas');
+            offscreen.width = canvas.width;
+            offscreen.height = canvas.height;
+            offscreen.getContext('2d').drawImage(
+                image,
+                (canvas.width - imageWidth) / 2,
+                (canvas.height - imageHeight) / 2,
+                imageWidth,
+                imageHeight
+            );
+
+            sigCanvas.current.clear();
+            sigCanvas.current.fromDataURL(offscreen.toDataURL('image/png'), {
+                width: drawWidth,
+                height: drawHeight,
+                ratio,
+            });
+        };
+
+        image.src = dataUrl;
+    };
+
+    /**
+     * Validate and read the picked image
+     *
+     * @param {Event} event 
+     */
+    const onFileSelect = (event) => {
+        const file = event.target.files && event.target.files[0];
+
+        // Reset so that picking the same file again still fires a change
+        event.target.value = '';
+
+        if (!file) return;
+
+        // Only the types listed in `accept` are allowed, whatever the file dialog let through
+        const allowed = accept.split(',').map((type) => type.trim()).filter(Boolean);
+
+        if (!file.type || allowed.indexOf(file.type) < 0) {
+            message.error(`${t('Please select a valid image file')} (${allowed.join(', ')})`);
+            return;
+        }
+
+        if (file.size > maxSizeMB * 1024 * 1024) {
+            message.error(`${t('Image should be smaller than')} ${maxSizeMB}MB`);
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onerror = () => message.error(t('Unable to read the selected image'));
+        reader.onload = () => {
+            drawImageOnPad(reader.result);
+            setUploadedName(file.name);
+        };
+        reader.readAsDataURL(file);
+    };
+
     return (
         <div className='signature-pad'>
             <SignatureCanvas
@@ -47,9 +153,19 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
             />
 
             <p>
-                <small>Click<strong> Save </strong>to add signature and save the document</small>
+                <small>
+                    {showUpload
+                        ? <>Draw the signature or <strong>Upload Image</strong>, then click<strong> Save </strong>to add signature and save the document</>
+                        : <>Click<strong> Save </strong>to add signature and save the document</>}
+                </small>
             </p>
 
+            {showUpload && uploadedName && (
+                <p className='signature-file-name'>
+                    <small>{uploadedName}</small>
+                </p>
+            )}
+
             <div className='signature-actions'>
                 <div className='left'>
                     <Button
@@ -61,6 +177,16 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
                     >
                         {t('Save')}
                     </Button>
+                    {showUpload && (
+                        <Button
+                            style={{ borderRadius: '2px' }}
+                            type="secondary"
+                            size="medium"
+                            onClick={selectImage}
+                        >
+                            {t('Upload Image')}
+                        </Button>
+                    )}
                     <Button
                         style={{ borderRadius: '2px' }}
                         type="secondary"
@@ -82,9 +208,20 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
                     {t('Add Signature')}
                 </Button> */}
             </div>
+
+            {showUpload && (
+                <input
+                    ref={fileInput}
+                    type="file"
+                    accept={accept}
+                    className='signature-file-input'
+                    style={{ display: 'none' }}
+                    onChange={onFileSelect}
+                />
+            )}
         </div>
 
     );
 };
 
-export default SignatureCanvasComponent;
+export default SignatureCanvasComponent;

package/core/lib/models/forms/components/form-creator/form-creator.js

@@ -211,7 +211,9 @@ function FormCreator({
         // Keep the same value preparation path for normal submit and search reset.
         fields.forEach((field) => {
 
-            if (field.field && field.field.includes('date')) {
+            // Only actual date inputs are converted , a field can be named with date
+            // and still hold a plain value ( eg : date_filter_type select )
+            if (field.field && field.field.includes('date') && ['date', 'datetime'].indexOf(field.type) !== -1) {
 
                 nextValues[field.field] = moment(nextValues[field.field]).valueOf();
 
@@ -530,7 +532,7 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onSearchRes
                     return (
                         <Select defaultValue={defaultValue}
                             required={field.required}
-                            style={{ width: '120' }}
+                            style={{ minWidth: '160px' }}
                             onChange={(value) => onChange(field, value)}
                         >
                             {field.options.map((option, key) => (

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

@@ -1,32 +1,22 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 
-import { Table, Skeleton, Input, Modal, message, Pagination, Tag } from 'antd';
+import { Table, Skeleton, Input, Modal, message, Tag } from 'antd';
 
-import { QrcodeOutlined } from '@ant-design/icons';
-
-import { Location, FormCreator, GlobalContext, ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
+import { Location, FormCreator, GlobalContext, Card } from './../../../../lib/';
 
 import { CoreScripts } from './../../../../models/';
 
 import moment from 'moment-timezone';
 
-import Button from '../../../../lib/elements/basic/button/button';
-
 import './reporting-dashboard.scss';
 
 // import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
 import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
-import { useHistory } from 'react-router-dom';
-import * as ReportingDashboardComp from '../index';
-import buildDisplayColumns from './display-columns/build-display-columns';
-import { getRedirectLink } from './display-columns/display-cell-renderer';
-import AdvancedSearchSelect from './adavance-search/advance-search';
-
-// import { isPdfFile } from 'pdfjs-dist';
 
-var genericComponents = require('./../../../../lib');
+import ReportingTable from './reporting-table';
 
-const { Search } = Input;
+// Input parameter that decides which date column the report is filtered by
+const DATE_FILTER_FIELD = 'date_filter_type';
 
 /**
  * ReportingDashboard component renders the dashboard and handles patient details,
@@ -56,7 +46,7 @@ export default function ReportingDashboard({
   const [config, setConfig] = useState({});
 
   // State to manage the layout of the form
-  const [formLayout, setFormLayout] = useState('vertical');
+  const [formLayout] = useState('inline');
 
   const [loading, setLoading] = useState(true);
 
@@ -79,7 +69,7 @@ export default function ReportingDashboard({
 
   //In case of reports from core_script , there will be id from params
   // In case of normal menu we need to take id from props
-  let id = reportId ? reportId : match.params.id;
+  let id = reportId ? reportId : match?.params?.id;
 
   const { CustomModels = {} } = useContext(GlobalContext);
 
@@ -87,9 +77,9 @@ export default function ReportingDashboard({
 
   const [columns, setColumns] = useState([]); // To set columns
 
-  const [summaryColumns, setSummaryColumns] = useState([]);
+  const [, setSummaryColumns] = useState([]);
 
-  const [patients, setPatients] = useState([]); //Patients list array
+  const [reportRequestPayload, setReportRequestPayload] = useState(null);
 
   const urlParams = Location.search();
 
@@ -110,7 +100,6 @@ export default function ReportingDashboard({
    * @returns {Promise<void>} A promise that resolves when the patient details have been fetched and the state has been updated.
    */
   async function getPatientDetails(idOverride) {
-    setPatients([]);
     const fetchId = idOverride || id;
     await CoreScripts.getRecord({ id: fetchId, dbPtr }).then(async ({ result }) => {
       // Check if display columns are provided from backend
@@ -188,6 +177,9 @@ export default function ReportingDashboard({
       if (urlParams[record.field]) {
         if (record.type === 'date') {
           formContent[record.field] = moment.utc(urlParams[record.field]);
+        } else if (record.type !== 'search') {
+          // Restore plain values ( eg : select filters ) back from the url
+          formContent[record.field] = urlParams[record.field];
         }
 
         // return formContent;
@@ -215,6 +207,10 @@ export default function ReportingDashboard({
             break;
 
           default:
+            // Any other default is taken as the value itself ( eg : select filters )
+            if (record.default !== undefined && record.default !== null && record.type !== 'date') {
+              formContent[record.field] = record.default;
+            }
             break;
         }
       }
@@ -223,6 +219,11 @@ export default function ReportingDashboard({
       if (record.type === 'date' && !formContent[record.field]) {
         formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
       }
+
+      // For a static select with no value yet , preselect the first option
+      if (record.type === 'select' && Array.isArray(record.options) && formContent[record.field] === undefined) {
+        formContent[record.field] = record.options[0]?.valueMember;
+      }
       if (record.type === 'search') {
         if (!formContent[record.field]) formContent[record.field] = [];
         return {
@@ -262,95 +263,57 @@ export default function ReportingDashboard({
       // If enabled, clear the details array
       setDetails([]);
     } else {
+      // The date filter input is shown only when the filter is enabled in otherDetails .
+      // Otherwise it stays hidden holding its default value , so the report keeps filtering
+      // on the default date
+      const filterKey = otherDetails ? Object.keys(otherDetails).find((key) => key.toLowerCase().trim() === 'enableuserfilter') : null;
+
+      const isFilterEnabled = filterKey ? otherDetails[filterKey] === true || otherDetails[filterKey] === 'true' : false;
+
       // Keep all parameters with a type (including search) to render in FormCreator
-      setDetails([...parameters.filter((ele) => ele.type)]);
+      setDetails([
+        ...parameters
+          .filter((ele) => ele.type)
+          .map((ele) => (ele.field === DATE_FILTER_FIELD ? { ...ele, visible: isFilterEnabled } : ele)),
+      ]);
     }
   }
 
   // Refresh patient details.
 
   function refresh() {
-    getPatientDetails();
+    getPatientDetails(scriptId.current || id);
   }
 
-  const fetchReportData = async (id, values, dbPtr, pagination, parsedColumns) => {
-    const { current, pageSize } = pagination || {};
-    // If card script id is exist load that id otherwise load id
-    const coreScriptId = scriptId.current ? scriptId.current : id;
-    const normalizedColumns = Array.isArray(parsedColumns) ? parsedColumns : Array.isArray(columns) ? columns : [];
+  const buildReportRequestPayload = (values = {}, paginationOverride) => {
+    const pager = paginationOverride || pagination;
+    const formattedValues = {};
 
-    setLoading(true);
-    try {
-      // Prepare payload for backend: format only here
-      const formattedValues = {};
-      Object.keys(values).forEach((key) => {
-        const val = values[key];
-        formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
-      });
-      // Pagination Data
-      const paginationData = {
-        page: pagination.current || 1,
-        limit: pagination.pageSize || 10,
-      };
-      // Combine form data + pagination
-      let formBody = {
+    Object.keys(values || {}).forEach((key) => {
+      const val = values[key];
+      formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
+    });
+
+    const paginationData = {
+      page: pager.current || 1,
+      limit: pager.pageSize || 10,
+    };
+
+    if (scope) {
+      return {
         body: {
-          ...formattedValues,
+          ...scope,
           ...paginationData,
         },
       };
-      // Optional override if `scope` exists
-      if (scope) {
-        formBody = { body: { ...scope, ...paginationData } };
-      }
-
-      setReportMailRequest({
-        scriptId: coreScriptId,
-        inputParameters: formBody,
-      });
-
-      // Fetch result
-      const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
-
-      const apiData = Array.isArray(result) ? result : Array.isArray(result?.result) ? result.result : [];
-
-      // Handle both result formats
-      let resultDetails = apiData[0] || [];
-      if (result?.result && result?.result[0]) {
-        resultDetails = result.result[0];
-      }
-      // Update patients
-      setPatients(resultDetails || []);
-
-      // When display_columns is missing, build columns from the response keys.
-      if (normalizedColumns.length === 0 && resultDetails.length > 0) {
-        // Create columns dynamically from resultDetails keys
-        setColumns((prev) => {
-          if (prev.length > 0) return prev;
-          return Object.keys(resultDetails[0]).map((key) => ({
-            title: key,
-            field: key,
-          }));
-        });
-      }
-
-      if (result.length) {
-        // Set Pgination data into URL
-        Location.search({ ...Location.search(), current, pageSize });
-
-        setPagination((prev) => ({
-          ...prev,
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: resultDetails?.[0]?.TotalCount ?? pagination?.total,
-        }));
-      }
-    } catch (error) {
-      console.error('Error fetching report data:', error);
-    } finally {
-      // Always runs, success or error
-      setLoading(false);
     }
+
+    return {
+      body: {
+        ...formattedValues,
+        ...paginationData,
+      },
+    };
   };
 
   const handleSubmit = (values) => {
@@ -561,17 +524,12 @@ export default function ReportingDashboard({
 
     // Call API
     try {
-      await fetchReportData(id, values, dbPtr, paginationData, parsedColumns);
-    } finally {
-      setLoading(false);
-      setCardLoading(false);
-    }
-  };
-
-  // Pagination Handler
-  const handlePagination = async (newPagination) => {
-    try {
-      await fetchReportData(id, formContents, dbPtr, newPagination);
+      setPagination((prev) => ({
+        ...prev,
+        current: paginationData.current,
+        pageSize: paginationData.pageSize,
+      }));
+      setReportRequestPayload(buildReportRequestPayload(values, paginationData));
     } finally {
       setLoading(false);
       setCardLoading(false);
@@ -659,459 +617,36 @@ export default function ReportingDashboard({
             ) : null}
           </div>
 
-          {/** GuestList component start*/}
-          <GuestList
-            patients={patients}
+          <ReportingTable
             columns={columns}
-            summaryColumns={summaryColumns}
             isFixedIndex={isFixedIndex}
             showScanner={showScanner}
+            reportId={reportId}
+            requestId={scriptId.current ? scriptId.current : id}
+            requestPayload={reportRequestPayload}
+            dbPtr={dbPtr}
             barcodeFilterKey={barcodeFilterKey}
-            CustomComponents={{ ...CustomComponents, ...genericComponents, ...ReportingDashboardComp }}
+            CustomComponents={CustomComponents}
             refresh={refresh}
             config={config}
+            
             loading={cardLoading}
             pagination={pagination}
-            handlePagination={handlePagination}
+            onPaginationChange={(nextPagination) => {
+              Location.search({
+                ...Location.search(),
+                current: nextPagination.current,
+                pageSize: nextPagination.pageSize,
+              });
+              setPagination((prev) => ({
+                ...prev,
+                ...nextPagination,
+              }));
+            }}
             attributes={attributes}
-            selectedSearchFields={selectedSearchFields}
-            handleRemoveSearchField={handleRemoveSearchField}
-            fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
-            reportScriptId={reportMailRequest.scriptId}
-            reportInputParameters={reportMailRequest.inputParameters}
           />
-          {/** GuestList component end*/}
         </>
       )}
     </Card>
   );
 }
-
-/**
- * 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
- * @param root0.patients
- * @param root0.CustomComponents
- * @param root0.summaryColumns
- * @param root0.refresh
- * @param root0.isFixedIndex
- * @returns {*}
- */
-//Renders a table displaying a list of patients with dynamic columns
-function GuestList({
-  patients,
-  columns,
-  loading,
-  CustomComponents,
-  refresh,
-  isFixedIndex,
-  barcodeFilterKey,
-  showScanner,
-  config,
-  pagination,
-  handlePagination,
-  attributes,
-  selectedSearchFields,
-  handleRemoveSearchField,
-  fetchReportData,
-  reportScriptId,
-  reportInputParameters,
-}) {
-  /**
-   * @param {*} propValues
-   */
-  const propValues = (attributes && JSON.parse(attributes)) || {};
-
-  const { buttonAttributes = [] } = propValues;
-
-  var [query, setQuery] = useState('');
-
-  const [exportData, setExportData] = useState({});
-
-  // const [data, setData] = useState([]);
-
-  //visibility of the QR scanner modal.
-  const [isScannerVisible, setScannerVisible] = useState(false);
-
-  // Stores the patients filtered specifically by QR scan match.
-  const [filteredPatients, setFilteredPatients] = useState([]); // Show all initially
-
-  // patient object to redirect to upon successful QR scan.
-  const [redirectPatient, setRedirectPatient] = useState(null);
-
-  const [visible, setVisible] = useState(false);
-
-  const [ActiveComponent, setActiveComponent] = useState(null);
-
-  let history = useHistory();
-
-  const { isMobile, dispatch } = useContext(GlobalContext);
-  const [single, setSingle] = useState({});
-  const otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
-
-  // const otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
-  // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
-  const cols = buildDisplayColumns({
-    columns,
-    patients,
-    isFixedIndex,
-    CustomComponents,
-    refresh,
-    otherDetails,
-  });
-
-  /**
-   *
-   * @param {*} result
-   */
-
-  // function changeView(result) {
-  //     setView(result);
-  // }
-
-  /**
-   *
-   * @param {*} event
-   */
-
-  function onSearch(event) {
-    setQuery(event.target.value);
-  }
-
-  /**
-   *
-   */
-
-  useEffect(() => {
-    //Cheaking if there is patient data exists
-    if (patients) {
-      // let data = patients?.map((entry) => {
-      //   entry.rowIndex = entry.opb_id;
-
-      //   entry.dispatch = dispatch;
-
-      //   return entry;
-      // });
-
-      // setData(data);
-
-      // Define export data
-      // Sanitize cols for export to ensure titles are strings
-      const exportCols = cols.map((col) => {
-        if (col.title && typeof col.title === 'object' && col.title.props) {
-          return { ...col, title: col.title.props.title };
-        }
-        return col;
-      });
-      const summaryCols = columns.filter((col) => col.enable_summary);
-      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, dataToExport);
-        const summaryRow = { isSummaryRow: true };
-
-        cols.forEach((col, index) => {
-          // Start each export column empty so the appended row keeps the same shape
-          // as the data rows and does not leak index/helper values into the export.
-          const colKey = col.field || col.key || col.dataIndex;
-          if (colKey && !summaryRow[colKey]) {
-            summaryRow[colKey] = '';
-          }
-
-          if (summaryValues[col.field] !== undefined) {
-            // Fill columns that have an aggregate configured (sum, count, avg, etc.).
-            summaryRow[col.field] = summaryValues[col.field];
-          } else {
-            // If this column is marked as the caption target for a summary column,
-            // place the configured label (for example "Total") into that cell.
-            const captionConfig = columns.find((c) => col.field && c.caption_field === col.field);
-            if (captionConfig) {
-              summaryRow[col.field] = captionConfig.summary_caption || '';
-            }
-          }
-        });
-        dataToExport.push(summaryRow);
-      }
-      let exportDatas = getExportData(dataToExport, exportCols);
-
-      if (exportDatas.exportDataHeaders.length) {
-        setExportData({ exportDatas });
-      } else {
-        setExportData({});
-      }
-    }
-  }, [patients, columns, query]);
-
-  let filtered = filterReportRecords(patients, query);
-
-  /**
-   * Checks for a match in the filtered patient list based on a scanned code,
-   * updates the relevant state if a match is found, and redirects to the
-   * patient's detail page. Displays a warning if no match is found.
-   *
-   * @param {string} code - The scanned code to match against a specific field of each patient.
-   */
-
-  const handleScanSuccess = (code) => {
-    // Filters patients based on the scanned code and the selected barcode key(using attributes 'barcodeFilterKey')
-    const matched = filtered.filter((patient) => patient[barcodeFilterKey] === code);
-
-    if (matched.length) {
-      const patient = matched[0];
-      setFilteredPatients(matched);
-      setRedirectPatient(matched);
-      message.success(`Match found for ${code}, redirecting...`);
-
-      const actionColumn = columns.find((col) => col.field === 'action') || columns.find((col) => col.type === 'action');
-      if (actionColumn) {
-        const redirectLink = getRedirectLink(actionColumn, patient);
-        // history.push(redirectLink);
-        window.location.href = redirectLink;
-      }
-    } else {
-      Modal.warning({
-        title: 'No matching records.',
-        content: `No match for scanned code: ${code}`,
-      });
-    }
-  };
-
-  //open the edit modal
-  const handleOpenEdit = (button) => {
-    const componentName = button.component;
-    const ComponentToRender = ReportingDashboardComp[componentName];
-
-    if (!ComponentToRender) {
-      console.error(`Component ${componentName} not found!`);
-      return;
-    }
-
-    setSingle({});
-    setActiveComponent(() => ComponentToRender);
-    setVisible(true);
-  };
-
-  // close the edit modal
-  const handleCloseEdit = () => {
-    setShowEdit(false);
-  };
-  /**
-   * Calculates aggregate values for the configured summary columns.
-   *
-   * Each summary definition contributes one value keyed by its `field`. Missing
-   * row values are treated as `0` for numeric operations so the table summary and
-   * export summary row can be built from the same result object.
-   *
-   * Supported functions:
-   * `sum` - totals all numeric values in the field.
-   * `count` - returns the number of rows in the current dataset.
-   * `avg` - returns the arithmetic mean of the field values.
-   * `min` - returns the smallest numeric value in the field.
-   * `max` - returns the largest numeric value in the field.
-   *
-   * @param {Array<Object>} summaryCols - Column configs with `field` and `function`.
-   * @param {Array<Object>} pageData - Rows currently being summarized.
-   * @returns {Object} Aggregate values keyed by field name.
-   */
-  function calculateSummaryValues(summaryCols, pageData) {
-    const summaryValues = {};
-
-    summaryCols.forEach((col) => {
-      const field = col.field;
-
-      if (col.function === 'sum') {
-        summaryValues[field] = pageData.reduce((total, row) => total + Number(row[field] || 0), 0);
-      }
-
-      if (col.function === 'count') {
-        summaryValues[field] = pageData.length;
-      }
-
-      if (col.function === 'avg') {
-        const total = pageData.reduce((sum, row) => sum + Number(row[field] || 0), 0);
-        summaryValues[field] = pageData.length ? total / pageData.length : 0;
-      }
-      if (col.function === 'min') {
-        const values = pageData.map((row) => Number(row[field] || 0));
-        summaryValues[field] = values.length ? Math.min(...values) : 0;
-      }
-
-      if (col.function === 'max') {
-        const values = pageData.map((row) => Number(row[field] || 0));
-        summaryValues[field] = values.length ? Math.max(...values) : 0;
-      }
-    });
-
-    return summaryValues;
-  }
-  return (
-    <>
-      <div className="table-header">
-        <div className="table-left">
-          {/* {selectedSearchFields?.length > 0 ? (
-            <div className="search-tags-container">
-              {selectedSearchFields.map((field) => (
-                <Tag key={field.field} closable color="blue" onClose={() => handleRemoveSearchField(field.field)}>
-                  {field.caption}
-                </Tag>
-              ))}
-            </div>
-          ) : null} */}
-        </div>
-
-        <div className="table-right">
-          {/* shwoing caption is not correct so this commented */}
-          {/* <span  className="menu-caption">{config.caption}</span> */}
-          <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}
-                  fileName={`${config.caption || 'Report'}.xlsx`}
-                  pdfFileName={`${config.caption || 'Report'}.pdf`}
-                  scriptId={reportScriptId}
-                  inputParameters={reportInputParameters}
-                  dropdown
-                />
-              </>
-            )}
-          </div>
-
-          {/* QR Scan start */}
-          {showScanner ? (
-            <Button size="small" type="primary" icon={<QrcodeOutlined />} onClick={() => setScannerVisible(true)}>
-              Scan QR
-            </Button>
-          ) : null}
-          {/** Add User button */}
-          {Array.isArray(buttonAttributes) &&
-            buttonAttributes.map((btn, index) => (
-              <Button key={index} size="small" type="primary" style={{ marginLeft: 8 }} onClick={() => handleOpenEdit(btn)}>
-                {btn.title}
-              </Button>
-            ))}
-
-          <Modal open={visible} onCancel={() => setVisible(false)} footer={null} destroyOnClose width={950} style={{ top: 10 }}>
-            {ActiveComponent && (
-              <ActiveComponent
-                formContent={single}
-                callback={() => {
-                  setVisible(false);
-                  refresh();
-                  setVisible(false);
-                  fetchReportData();
-                }}
-                // {...dynamicProps}
-              />
-            )}
-          </Modal>
-
-          <Modal open={isScannerVisible} title="Scan QR Code" footer={null} onCancel={() => setScannerVisible(false)} destroyOnClose>
-            <QrScanner onScanSuccess={handleScanSuccess} onClose={() => setScannerVisible(false)} />
-          </Modal>
-          {/* QR Scan End */}
-        </div>
-      </div>
-
-      <div>
-        <Card>
-          {loading ? (
-            <>
-              <Skeleton active paragraph={{ rows: 6 }} />
-            </>
-          ) : (
-            <TableComponent
-              size="small"
-              // scroll={{ x: 'max-content' }}
-              scroll={{ x: 'max-content', y: '60vh' }}
-              rowKey={(record) => record.OpNo}
-              dataSource={filtered ? filtered : patients} // In case if there is no filtered values we can use patient data
-              columns={cols}
-              sticky
-              pagination={true}
-              summary={(pageData) => {
-                const summaryCols = columns.filter((col) => col.enable_summary);
-                if (!summaryCols.length) return null;
-                /** calculate summary*/
-
-                const summaryValues = calculateSummaryValues(summaryCols, pageData);
-
-
-                return (
-                  <Table.Summary.Row className="report-summary-row">
-                    {cols.map((col, index) => {
-                      if (summaryValues[col.field] !== undefined) {
-                        return (
-                          <Table.Summary.Cell key={index}>
-                            <strong style={{ fontWeight: 900 }}>{summaryValues[col.field]}</strong>
-                          </Table.Summary.Cell>
-                        );
-                      }
-
-                      const captionConfig = columns.find((c) => col.field && c.caption_field === col.field);
-                      if (captionConfig) {
-                        return (
-                          <Table.Summary.Cell key={index}>
-                            <strong style={{ fontWeight: 900 }}>{captionConfig.summary_caption || ''}</strong>
-                          </Table.Summary.Cell>
-                        );
-                      }
-
-                      return <Table.Summary.Cell key={index} />;
-                    })}
-                  </Table.Summary.Row>
-                );
-              }}
-            />
-          )}
-
-          {/* Pagination aligned to the right */}
-          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
-            <Pagination
-              showSizeChanger
-              current={pagination.current}
-              pageSize={pagination.pageSize}
-              total={pagination.total}
-              pageSizeOptions={[20, 30, 50, 100]}
-              onChange={(page, pageSize) => handlePagination({ current: page, pageSize })}
-            />
-          </div>
-
-          {/*If patient data exists show the number else to 0 */}
-          <p className="size-hint">{patients ? patients.length : 0} records. </p>
-        </Card>
-        {/* </> */}
-        {/* )} */}
-      </div>
-    </>
-  );
-}

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

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useContext } from 'react';
 import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
 import { QrcodeOutlined } from '@ant-design/icons';
-import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
+import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner, GlobalContext, safeJSON } from './../../../../lib/';
 import moment from 'moment-timezone';
 import { CoreScripts } from './../../../../models/';
 import Button from '../../../../lib/elements/basic/button/button';
@@ -93,9 +93,22 @@ export default function ReportingTable({
   const [internalConfig, setInternalConfig] = useState({});
   const [internalPagination, setInternalPagination] = useState({ current: 1, pageSize: 20, total: 0 });
 
+  const { role = {} } = useContext(GlobalContext);
+  // When any of the logged in user's roles has `enableUserFilter: true` in its other details,
+  // reports receive `enableUserFilter: true` so they can restrict rows to the user's own records.
+  // `role` may be a single role object or an array of roles.
+  const roles = Array.isArray(role) ? role : role ? [role] : [];
+  const isUserFilterEnabled = roles.some((r) => {
+    const details = r?.other_details;
+    // Some records store other_details with single quotes, e.g. "{'enableUserFilter':true}"
+    const parsed = safeJSON(details) || (typeof details === 'string' ? safeJSON(details.replace(/'/g, '"')) : null) || {};
+    return parsed.enableUserFilter === true;
+  });
+  const userFilter = isUserFilterEnabled ? { enableUserFilter: true } : {};
+
   // Independent mode is enabled when enough identifiers are present for the
   // table to load its own schema and data instead of relying on parent props.
-  const shouldFetchData = !!(requestId || reportId || replacements.submode || replacements.mode);
+  const shouldFetchData = !!(requestId || reportId || replacements?.submode || replacements?.mode);
   const requestPayloadKey = JSON.stringify(requestPayload || {});
 
   const propValues = (attributes && JSON.parse(attributes)) || {};
@@ -189,6 +202,7 @@ export default function ReportingTable({
           page: currentPager.current,
           limit: currentPager.pageSize,
           ...(requestPayload?.body ? {} : { mode, submode }),
+          ...userFilter,
         },
       };
       // if (!isNuradesk) {
@@ -199,6 +213,7 @@ export default function ReportingTable({
             ...replacements,
             page: currentPager.current,
             limit: currentPager.pageSize,
+            ...userFilter,
           },
         };
       }
@@ -270,10 +285,28 @@ export default function ReportingTable({
     }
   };
 
+  const filtered = useMemo(() => {
+    if (!patients || !query) return patients;
+
+    return patients.filter((record) => {
+      let keys = Object.keys(record);
+      let flag = false;
+      keys.forEach((key) => {
+        let ele = record[key];
+        if (ele && typeof ele === 'string' && ele.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+          flag = true;
+        }
+      });
+      return flag;
+    });
+  }, [patients, query]);
+
   useEffect(() => {
-    if (patients) {
+    if (filtered) {
       // Export uses the visible display column structure and appends the same
       // summary row that appears in the table when summary columns are enabled.
+      // Uses `filtered` (not the raw `patients`) so the exported file matches
+      // whatever the search box currently shows on screen.
       const exportCols = cols.map((col) => {
         if (col.title && typeof col.title === 'object' && col.title.props) {
           return { ...col, title: col.title.props.title };
@@ -281,10 +314,10 @@ export default function ReportingTable({
         return col;
       });
       const summaryCols = columns.filter((col) => col.enable_summary);
-      let dataToExport = [...patients];
+      let dataToExport = [...filtered];
 
       if (summaryCols.length > 0) {
-        const summaryValues = calculateSummaryValues(summaryCols, patients);
+        const summaryValues = calculateSummaryValues(summaryCols, filtered);
         const summaryRow = { isSummaryRow: true };
 
         cols.forEach((col) => {
@@ -310,22 +343,7 @@ export default function ReportingTable({
         setExportData({ exportDatas });
       }
     }
-  }, [patients, columns]);
-
-  let filtered = patients;
-  if (patients && query) {
-    filtered = patients.filter((record) => {
-      let keys = Object.keys(record);
-      let flag = false;
-      keys.forEach((key) => {
-        let ele = record[key];
-        if (ele && typeof ele === 'string' && ele.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
-          flag = true;
-        }
-      });
-      return flag;
-    });
-  }
+  }, [filtered, columns]);
 
   /**
    * Handles successful QR scans by looking up a matching record and navigating
@@ -449,9 +467,11 @@ export default function ReportingTable({
             {exportData.exportDatas && !isNuradesk && (
               <ExportReactCSV
                 title={config.caption}
-                fileName={`${(config.caption || 'Report').trim().replace(/\s+/g, '_')}_${moment().format('YYYY-MM-DD-HH-mm-ss-SSS')}.xlsx`}
                 headers={exportData.exportDatas.exportDataHeaders}
                 csvData={exportData.exportDatas.exportDataColumns}
+                fileName={`${config.caption || 'Report'}.xlsx`}
+                pdfFileName={`${config.caption || 'Report'}.pdf`}
+                dropdown
               />
             )}
           </div>
@@ -464,14 +484,12 @@ export default function ReportingTable({
           ) : (
             <TableComponent
               size="small"
-              // Change x to '100%' or true to make it responsive to the container width
-              // Your vertical logic (adjust '10' based on how many rows fit on your screen)
-              scroll={{ x: 'max-content', y: (filtered?.length || 0) > 11 ? 400 : undefined }}
+              scroll={{ x: 'max-content', y: '60vh' }}
               rowKey={(record) => record.OpNo}
               dataSource={filtered}
               columns={cols}
               sticky
-              pagination={false}
+              pagination={true}
               summary={(pageData) => {
                 const summaryCols = columns.filter((col) => col.enable_summary);
                 if (!summaryCols.length) return null;
@@ -502,14 +520,14 @@ export default function ReportingTable({
             />
           )}
           <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
-            <Pagination
+            {/* <Pagination
               showSizeChanger
               current={pagination?.current}
               pageSize={pagination?.pageSize}
               total={pagination?.total}
               pageSizeOptions={[20, 30, 50, 100]}
-              onChange={(page, pageSize) => handlePaginationInternal({ current: page, pageSize })}
-            />
+              onChange={(page, pageSize) => handlePaginationInternal({ current: page, pageSize })} */}
+            {/* /> */}
           </div>
           <p className="size-hint">{patients ? patients.length : 0} records.</p>
         </Card>

package/package.json

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