boldreports · karthickthangasamy · Feb 10, 2025 · Feb 10, 2025
diff --git a/.eslintrc b/.eslintrc
@@ -5,5 +5,5 @@
      "rules": {
        "react/prop-types": 0
      },
-     "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
    }
diff --git a/build/build.js b/build/build.js
@@ -3,11 +3,11 @@ const runSequence = require('gulp4-run-sequence');
 var shelljs = require('shelljs');
 
 gulp.task('pre-build', function (done) {
-    runSequence('copy-barcode-assets', 'update-barcode', 'clean','copy-dependent-scripts', 'copy-src-assets', done);
+    runSequence('copy-extensions-assets', 'update-extensions-export', 'clean', 'copy-dependent-scripts', 'copy-src-assets', done);
 })
 
 gulp.task('build', function (done) {
-    if (shelljs.exec('npm run build')) {
+    if (shelljs.exec('npm run build').code == 0) {
         console.log('******* Build Successfully *******');
         done();
     }

diff --git a/build/copy.js b/build/copy.js
@@ -2,13 +2,15 @@ const gulp = require('gulp');
 var shelljs = require('shelljs');
 const fs = require('fs');
 
-const barcodeAssets = ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js'];
-const barCodeSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
-const barcodeDir = './src/controls/extensions/report-item-extensions/';
-const barcodeTeml = {
+const extensionsAssets = ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js', 'signature.reportitem.css','signature.dialog.css','signature.reportitem.js','signature.dialog.js'];
+const extensionsItemSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
+const extensionsItemDir = './src/controls/extensions/report-item-extensions/';
+const extensionsExportTemp = {
     '1D': 'export { EJBarcode };',
-    '2D': 'export { EJQRBarcode };'
-};
+    '2D': 'export { EJQRBarcode };',
+    'signature': 'export { EJSignature }',
+    'signatureDialog': 'export { SignatureDialog }'
+}
 
 gulp.task('copy-src-assets', function (done) {
     shelljs.mkdir(`${process.cwd()}/public/report-viewer`);
@@ -29,28 +31,35 @@ gulp.task('copy-dependent-scripts', function (done) {
     done();
 });
 
-gulp.task('copy-barcode-assets', (done) => {
+gulp.task('copy-extensions-assets', (done) => {
     shelljs.mkdir('-p',`${process.cwd()}/src/controls/extensions/report-item-extensions/`);
-    barcodeAssets.forEach(file => {
-        copyFile(`${process.cwd()}/${barCodeSrcDir + file}`, barcodeDir);
+    extensionsAssets.forEach(file => {
+        copyFile(`${process.cwd()}/${extensionsItemSrcDir + file}`, extensionsItemDir);
     })
     done();
 })
 
-gulp.task('update-barcode', (done) => {
-    if (fs.existsSync(`${barcodeDir}barcode.reportitem.js`) && fs.existsSync(`${barcodeDir}qrbarcode.reportitem.js`)) {
-        var barcode = fs.readFileSync(`${barcodeDir}barcode.reportitem.js`);
-        var qrbarcode = fs.readFileSync(`${barcodeDir}qrbarcode.reportitem.js`);
-        if (!barcode.includes(barcodeTeml['1D']))
-            fs.writeFileSync(`${barcodeDir}barcode.reportitem.js`, `${barcode} \n ${barcodeTeml['1D']}`);
-        if (!qrbarcode.includes(barcodeTeml['2D']))
-            fs.writeFileSync(`${barcodeDir}qrbarcode.reportitem.js`, `${qrbarcode} \n ${barcodeTeml['2D']}`);
-        done();
-    }
-    else {
-        console.log(`!!!... The Barcode files not found in ${barcodeDir} ...!!!`);
-        process.exit(1);
-    }
+gulp.task('update-extensions-export', (done) => {
+    const files = {
+        'barcode': ['barcode.reportitem.js', '1D'],
+        'qrbarcode': ['qrbarcode.reportitem.js', '2D'],
+        'signature': ['signature.reportitem.js', 'signature'],
+        'signatureDialog': ['signature.dialog.js', 'signatureDialog']
+    };
+    const updateFile = (key, [filename, exportKey]) => {
+        const filePath = `${extensionsItemDir}${filename}`;
+        if (fs.existsSync(filePath)) {
+            const content = fs.readFileSync(filePath, 'utf8');
+            if (!content.includes(extensionsExportTemp[exportKey])) {
+                fs.writeFileSync(filePath, `${content}\n${extensionsExportTemp[exportKey]}`);
+            }
+        } else {
+            console.log(`!!!... The ${key} file not found in ${extensionsItemDir} ...!!!`);
+            process.exit(1);
+        }
+    };
+    Object.entries(files).forEach(([key, value]) => updateFile(key, value));
+    done();
 });
 
 function copyFile(from , to){

diff --git a/package.json b/package.json
@@ -1,26 +1,26 @@
 {
   "name": "react-sample-browser",
-  "version": "6.3.16",
+  "version": "7.1.9",
   "private": true,
   "dependencies": {
-    "@boldreports/react-reporting-components": "6.3.16",
-    "@boldreports/javascript-reporting-extensions": "6.3.16",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.8.3",
-    "bootstrap": "^4.6.0",
-    "create-react-class": "^15.7.0",
+    "@boldreports/react-reporting-components": "7.1.9",
+    "@boldreports/javascript-reporting-extensions": "7.1.9",
+    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/react": "11.2.5",
+    "@testing-library/user-event": "12.8.3",
+    "bootstrap": "5.3.3",
+    "create-react-class": "15.7.0",
     "axios": "1.7.7",
     "fs": "0.0.1-security",
     "gulp": "4.0.2",
-    "path": "^0.12.7",
-    "prismjs": "^1.23.0",
-    "require-dir": "^1.2.0",
+    "path": "0.12.7",
+    "prismjs": "1.29.0",
+    "require-dir": "1.2.0",
     "gulp4-run-sequence": "1.0.1",
     "codemirror": "5.58.2",
-    "shelljs": "^0.8.4",
-    "typo-js": "^1.2.0",
-    "web-vitals": "^1.1.1"
+    "shelljs": "0.8.5",
+    "typo-js": "1.2.0",
+    "web-vitals": "1.1.1"
   },
   "homepage": "./",
   "scripts": {
@@ -32,10 +32,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest",
-      "eslint:recommended",
-      "plugin:react/recommended"
+      "react-app"
     ]
   },
   "browserslist": {
@@ -51,11 +48,18 @@
     ]
   },
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "eslint": "^7.27.0",
-    "eslint-plugin-react": "^7.23.2"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-router-dom": "5.2.0",
+    "react-scripts": "5.0.1",
+    "eslint": "9.19.0",
+    "eslint-plugin-react": "7.37.4",
+    "@babel/core": "7.25.2",
+    "@babel/eslint-parser": "7.26.5",
+    "babel-core": "7.0.0-bridge.0"
+  },
+  "resolutions": {
+    "@babel/core": "7.x",
+    "babel-core": "7.0.0-bridge.0"
   }
 }
diff --git a/src/assets/sidebar/portrait.png b/src/assets/sidebar/portrait.png
diff --git a/src/common/header/header.css b/src/common/header/header.css
@@ -367,6 +367,10 @@ a:hover#home_page {
   text-decoration: none;
 }
 
+#home_page {
+  text-decoration: none;
+}
+
 .ej-platform-name {
   margin: 0 21px 0 25px;
   font-size: 15px;

diff --git a/src/common/header/header.js b/src/common/header/header.js
@@ -86,7 +86,7 @@ class Header extends Component {
                         {this.props.isViewer ?
                             <div className={`dropdown show`} ref={this.dropdownContainer}>
                                 <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
-                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onClick={this.handleButtonClick}>
+                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onClick={this.handleButtonClick}>
                                 </button>
                                 {this.state.open && (<div className={`dropdown-menu show`} aria-labelledby="dropdownMenuButton">{Object.keys(otherPlatforms).map((name, index) => <a className={`dropdown-item ${name.includes('React') ? 'active' : ''}`} key={index} onClick={this.platformSwitcher.bind(this)}>{name}</a>)}</div>)}
                             </div> :
@@ -97,7 +97,7 @@ class Header extends Component {
                         {/* We hided this element as per management instruction  */}
                         {/* <a className="ej-sb-button nav-link bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo" target="_blank" rel="noreferrer">Schedule Free Demo</a> */}
                         <a className="ej-sb-button nav-link product-detail" href={this.props.isViewer || this.props.isPreview ? 'https://www.boldreports.com/embedded-reporting/react-report-viewer' : 'https://www.boldreports.com/embedded-reporting/react-report-designer'} target="_blank" rel="noreferrer">Product Detail</a>
-                        <a className="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
+                        <a className="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=194&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
                     </div>
                 </div>
             </ej-header>

diff --git a/src/common/main-content/main-content.css b/src/common/main-content/main-content.css
@@ -44,6 +44,7 @@
   align-items: center;
   color:#2b3a5c;
   border-bottom: 2px solid transparent;
+  text-decoration: none;
 }
 
 .ej-main-body-content .ej-nav-header .ej-nav-item a:hover {
@@ -69,6 +70,15 @@
 .tab-pane#ej-description {
   font-size: 14px;
   margin: 25px 3px 20px 20px;
+
+}
+
+.tab-pane#ej-description #description a {
+  text-decoration: none;
+}
+
+.tab-pane#ej-description #description a:hover {
+  text-decoration: underline;
 }
 
 .tab-pane form{
@@ -363,11 +373,22 @@
 }
 
 @media only screen and (min-width: 300px) and (max-width: 872px) {
-  .ej-main-child-content .ej-lp-footer, .ej-main-child-content .ej-lp-footer > div {
+  .ej-main-child-content .ej-lp-footer {
     display: block;
   }
+
+  .ej-main-child-content .ej-lp-footer .ej-lp-footer-copyright {
+    padding: 10px;
+  }
+}
+
+@media only screen and (max-width: 1095px) {
+  .ej-lp-footer .ej-lp-footer-links {
+    display: none;
+  }
+
   .ej-main-child-content .ej-lp-footer .ej-lp-footer-copyright {
     float: left;
-    line-height: 30px;
+    line-height: 21px;
   }
 }
diff --git a/src/common/main-content/main-content.js b/src/common/main-content/main-content.js
@@ -142,17 +142,17 @@ class MainContentSample extends Component {
                   <div id="parentTabContainer">
                     <ul className="nav ej-nav-header" id="parentTab" role="tablist">
                       <li className="ej-nav-item" onClick={this.DemoToggle}>
-                        <Link to={'#demo'} data-toggle="tab" role="tab" aria-selected="true" onClick={this.dontGoToLink} className={`${this.state.isDemoActive ? 'active' : ''}`}>
+                        <Link to={'#demo'} data-bs-toggle="tab" role="tab" aria-selected="true" onClick={this.dontGoToLink} className={`${this.state.isDemoActive ? 'active' : ''}`}>
                           <span className="ej-sb-icons ej-demo-icon"></span><span>DEMO</span>
                         </Link >
                       </li>
                       <li className="ej-nav-item source-tab" onClick={() => { this.SourceActive(); this.getSource(); }} >
-                        <Link to={'#source'} data-toggle="tab" role="tab" aria-selected="false" onClick={this.dontGoToLink} className={`${this.state.isSourceActive ? 'active' : ''}`}>
+                        <Link to={'#source'} data-bs-toggle="tab" role="tab" aria-selected="false" onClick={this.dontGoToLink} className={`${this.state.isSourceActive ? 'active' : ''}`}>
                           <span className="ej-sb-icons ej-source-icon"></span><span>SOURCE</span>
                         </Link>
                       </li>
                       {/*<li className="ej-nav-item desc-tab" onClick={this.DescActive}>
-                        <Link to={'#description'} data-toggle="tab" role="tab" aria-selected="false" onClick={this.dontGoToLink} className={`${this.state.isDescActive ? 'active' : ''}`} >
+                        <Link to={'#description'} data-bs-toggle="tab" role="tab" aria-selected="false" onClick={this.dontGoToLink} className={`${this.state.isDescActive ? 'active' : ''}`} >
                           <span className="ej-sb-icons ej-description-icon"></span><span>Description</span>
                         </Link>
     </li>*/}
@@ -179,10 +179,10 @@ class MainContentSample extends Component {
                           </div>
                           <ul className="nav ej-nav-header" id="childtTab" role="tablist">
                             <li className="ej-nav-item">
-                              <a className="active js-header " data-toggle="tab" role="tab" aria-selected="true">{this.props.report.routerPath + ".js"}</a>
+                              <a className="active js-header " data-bs-toggle="tab" role="tab" aria-selected="true">{this.props.report.routerPath + ".js"}</a>
                             </li>
                             {/* <li className="ej-nav-item">
-                          <a className="html-header" href="#html" data-toggle="tab" role="tab" aria-selected="false"></a>
+                          <a className="html-header" href="#html" data-bs-toggle="tab" role="tab" aria-selected="false"></a>
                         </li> */}
                           </ul>
                         </div>
@@ -231,14 +231,20 @@ class MainContentSample extends Component {
               <a href="https://www.boldreports.com/blog" target="_blank" rel="noreferrer">
                   Blog
               </a>
-              <a href="https://support.boldreports.com/" target="_blank" rel="noreferrer">
+              <a href="https://support.boldreports.com/support/tickets/create" target="_blank" rel="noreferrer">
                   Support
               </a>
               <a href="https://www.boldreports.com/feedback" target="_blank" rel="noreferrer">
                   Feedback
               </a>
+              <a href="https://support.boldreports.com/" target="_blank" rel="noreferrer">
+                Knowledge Base
+              </a>
+              <a href="https://www.boldreports.com/learn" target="_blank" rel="noreferrer">
+                Learning Center
+              </a>
               </div>
-              <div className="ej-lp-footer-copyright">Copyright © 2001-2024 Syncfusion Inc.</div>
+              <div className="ej-lp-footer-copyright">Copyright © 2001 - {data.copyrightYear} Syncfusion Inc.</div>
             </div>
           </div>
         </div>

diff --git a/src/common/sidebar/sidebar.css b/src/common/sidebar/sidebar.css
@@ -52,7 +52,7 @@
   width: 90px;
   margin: 8px;
   background-image: url('./../../assets/sidebar/portrait.png');
-  background-size: 100% 1800%;
+  background-size: 100% 2000%;
 }
 
 .ej-sidebar-content .ej-sb-toc .ej-sb-toc-card .ej-sb-toc-card-link{

diff --git a/src/controls/cmr-report.js b/src/controls/cmr-report.js
@@ -0,0 +1,36 @@
+/* eslint-disable */
+import React, { Component } from 'react';
+import { Globals } from '../globals';
+
+class CMRReport extends Component {
+    render() {
+        if (this.props.content !== 'desc') {
+            return (
+                <BoldReportViewerComponent
+                    id="report-viewer"
+                    reportServiceUrl={Globals.ServiceURL}
+                    reportPath={'cmr-report.rdl'}
+                    toolbarSettings={Globals.TOOLBAR_OPTIONS}
+                    toolBarItemClick={Globals.EDIT_REPORT}>
+                </BoldReportViewerComponent>)
+        }
+        else {
+            return (
+                <div id="description">
+                    <p>
+                    The CMR International Consignment Note outlines the terms, responsibilities, and legal framework for international road freight transport under the CMR Convention, presented in a comprehensive RDL format.
+                    </p>
+                    <ul>
+                        <li>The CMR International Consignment Note is effectively represented through a variety of table report items, each providing a detailed and informative view of the consignment details.</li>
+                    </ul>
+                    <p>
+                        More information about the image report item can be found in this <a
+                            href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/report-items/tablix/"
+                            target="_blank" rel="noreferrer">documentation</a> section.
+                    </p>
+                </div>
+            );
+        }
+    }
+}
+export default CMRReport;
diff --git a/src/controls/designer/designer.js b/src/controls/designer/designer.js
@@ -30,6 +30,17 @@ var reportItemExtensions = [{
     description: 'Display the barcode lines as report item.',
     title: '2D Barcode'
   }
+}, {
+  name: 'ESignature',
+  className: 'EJSignature',
+  imageClass: 'customitem-signature',
+  displayName: 'Electronic',
+  category: 'Signature',
+  toolTip: {
+      requirements: 'Add a report item to the designer area.',
+      description: 'This report item is used to add a graphic signature.',
+      title: 'Signature'
+  }
 }];
 
 function DESIGNER_TOOLBAR_RENDERING(args) {
@@ -193,4 +204,4 @@ class Designer extends Component {
   }
 }
 
-export { Designer };
+export { Designer };
diff --git a/src/controls/external-parameter-report.js b/src/controls/external-parameter-report.js
@@ -145,7 +145,7 @@ class ExternalParameterReport extends Component {
                         value: [2],
                         placeholder: "Select Option",
                         change: function(args) {
-                           $('#update').prop('disabled', !args.value.length);
+                            $('#update').prop('disabled', !args.value.length);
                         }
                     });
                     startDate.appendTo('#startdate');