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

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

@@ -2,136 +2,92 @@
  *
  * Global header component
  */
-
 import { useContext, useEffect, useRef, useState } from 'react';
-
 import { motion, useAnimation } from 'framer-motion';
-
 import { boxVariants } from './animations';
-
 import { GlobalContext, GlobalProvider } from './../../Store';
-
 import { Link, useLocation } from 'react-router-dom';
-
 import { Avatar, Input, Tooltip, Typography } from 'antd';
-
 import ProgressBar from '../progress-bar/progress-bar'; // Adjust the path as needed
-
 import { Button } from '../../elements';
-
 import GenericHeader from '../header/generic-header';
-
-
 import { CustomerServiceOutlined, MenuOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
-
 import { Drawer } from 'antd';
-
 import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
-
 import SideMenu from './../sidemenu/sidemenu';
-
 import './global-header.scss';
-
 import LanguageSwitcher from '../language-switcher/language-switcher';
-
 import { useTranslation } from 'react-i18next';
-
 import SettingsUtil from '../../../utils/settings.utils';
 import SpotlightSearch from '../spotlight-search/spotlight-search.component';
-
+import { LicenseAlert } from '../../../components';
 const { Title } = Typography;
-
-function GlobalHeaderContent({ loading, appSettings, children, isConnected, history, modules = [], sidemenu = [], reload, meta = {}, ...props }) {
+function GlobalHeaderContent({ loading, appSettings, children, isConnected, history, modules = [], sidemenu = [], reload, meta = {}, licAlert,
+  licenseData ,...props }) {
   let location = useLocation();
   // let location = {};
-
   const { isMobile, user = { locations: [] }, kiosk, state, settings } = useContext(GlobalContext);
-
   const [visible, setVisible] = useState(false);
   const helpDeskSetting = settings?.HELPATR || {};
-
   // Variable to handle toggling of menu
   const [collapsed, setCollapsed] = useState(false);
   // varibale handle branch switcher
-
   // const [searchModalVisible, setSearchModalVisible] = useState(false);
-
   const { globalCustomerHeader = () => {} } = appSettings;
-
   const { t, i18n } = useTranslation();
-
   const spotlightRef = useRef();
-
   useEffect(() => {
     setTimeout(() => {
       i18n.changeLanguage(localStorage.selectedLanguage);
     }, 0);
   }, []);
-
   /**
    * Function to handle toggling of menu
    */
-
   const toggleCollapsed = () => {
     setVisible(true);
-
     collapsed === true ? setCollapsed(false) : setCollapsed(true);
   };
-
   const openSearchModal = () => {
     //  input to avoid typing
     SettingsUtil.openSpotlightModal();
   };
-
   /**
    * Function to remove toggling on mobile view
    */
   const hideToggle = () => {
     setVisible(true);
-
     setCollapsed(false);
   };
-
   /**
    * onClose Function
    */
-
   const onClose = () => {
     setVisible(false);
   };
-
   // const { model = {} } = menu;
-
   const { model: BaseModel = {}, menu = {} } = meta;
-
   const { model = {} } = menu;
-
   //Animations//
   const boxControls = useAnimation();
-
   async function animate() {
     await boxControls.start('entered');
-
     //await boxControls.start("show");
   }
-
   useEffect(() => {
     animate();
   }, []);
-
   useEffect(() => {}, [state.theme]);
-
   return (
+    <>
     <div
       className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
       style={{
         // background: state.theme.colors.bodyBackground,
-
-        height: 10,
+        height: 'auto',
       }}
     >
       {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
-
       <div className="layout-content">
         <div
           //whileHover="hover"
@@ -174,7 +130,6 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
             </Drawer>
           )}
         </div>
-
         {/* Right Section of the Component Loader */}
         <div
           className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
@@ -189,11 +144,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
               {/*  */}
               <div className="page-header-name">
                 <ProgressBar isLoading={loading} />
-
                 <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
                   <MenuOutlined />
                 </span>
-
                 {/* Back Button */}
                 {location.pathname !== '/' ? (
                   <span
@@ -206,39 +159,30 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                   </span>
                 ) : null}
                 {/* Back Button Ends */}
-
                 {location.pathname !== '/' ? (
                   <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
                     {menu.caption}
                   </h4>
                 ) : null}
               </div>
-
               {/* Page Menu Actions */}
-
               {user.role || user.id ? (
                 <div className="page-menu">
                   {/* Search Input in header start */}
                   {!isMobile && (
                     <div>
                       <Input placeholder="Search (Shift + F)" prefix={<SearchOutlined />} onClick={openSearchModal} readOnly style={{ width: 250 }} />
-
                       <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
                     </div>
                   )}
                   {/* Search Input in header start */}
-
                   {/** branchswitcher Option  */}
                   {/* branch switcher controlled with env for matria and nura */}
                   {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
                   {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
-
                   {/* Search Option */}
-
                   {/* <ModalSearch /> */}
-
                   {/* Search Option Ends */}
-
                   {/* Configurator Actions */}
                   {user.isAdmin ? (
                     <>
@@ -252,13 +196,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                     </>
                   ) : null}
                   {/* Configurator Actions Ends */}
-
                   {/* Reload Button */}
-
                   <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
-
                   {/* Reload Button Ends */}
-
                   {/* Help-desk-btn */}
                   {helpDeskSetting?.showSupportBtn
                     ? (() => {
@@ -277,11 +217,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                         );
                       })()
                     : null}
-
                   {/** Switch Languages starts */}
                   {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
                   {/** Switch Languages ends */}
-
                   {/* User Profile */}
                   <div style={{ padding: '10px' }}>
                     <ProfileAvatar />
@@ -290,11 +228,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                   {/* User Profile Ends */}
                 </div>
               ) : null}
-
               {/* Page Menu Actions Ends */}
             </div>
           ) : null}
-
           {/* The children is rendered */}
           {children}
           {/* The children is rendered */}
@@ -302,32 +238,40 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
         {/* Right Section of the Component Loader Ends */}
       </div>
     </div>
+     {licAlert && licenseData && (
+        <div
+          style={{
+            top: 0,
+            marginTop: '3rem',
+            right: '2%',
+            position: 'absolute',
+            zIndex: 1008,
+          }}
+        >
+          <LicenseAlert data={licenseData} />
+        </div>
+      )}
+   </>
   );
 }
-
 export default function GlobalHeader(props) {
   const context = useContext(GlobalContext);
-
   if (context.dispatch) {
     return <GlobalHeaderContent {...props} />;
   }
-
   return (
     <GlobalProvider {...props} appSettings={props.appSettings}>
       <GlobalHeaderContent {...props} />
     </GlobalProvider>
   );
 }
-
 /**
  *
  * @returns
  */
 function ProfileAvatar() {
   const { user = { locations: [] } } = useContext(GlobalContext);
-
   useEffect(() => {}, []);
-
   return (
     <Link className="profile-avatar" to="/profile">
       {user.photograph ? (
@@ -337,8 +281,7 @@ function ProfileAvatar() {
       ) : (
         <Avatar shape="square" size="small" icon={<UserOutlined />} />
       )}
-
       {/* {user.name} */}
     </Link>
   );
-}
+}

package/core/lib/components/index.js

@@ -109,7 +109,7 @@ import ConsentComponent from './consent/consent'
 import TaskOverviewLegacy from './../models/process/components/task-overview-legacy/task-overview-legacy'
 
 import ReportingDashboard from '../../modules/reporting/components/reporting-dashboard/reporting-dashboard';
-
+import ReportingTable from '../../modules/reporting/components/reporting-dashboard/reporting-table'
 import ProcessStepsPage from '../../modules/steps/steps'
 export {
 
@@ -198,7 +198,7 @@ export {
   TaskOverviewLegacy,
   // WebCamera,
   ConsentComponent,
-
+ReportingTable,
   ReportingDashboard,
   ProcessStepsPage
 

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,302 @@ 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 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={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>
   );
 };