@medicus.ai/medicus-report-pdf-generator 1.3.13 → 1.3.15

package/lib/template.js

@@ -1,2227 +1,2227 @@
-const LocaleService = require('../app/services/localeService.js');
-const i18n = require('../app/i18n_wellbeing.config.js');
-fetchFileContents
-const fs = require("fs");
-const path = require('path');
-
-let useMonospace = false;
-function setUseMonospace(val) { useMonospace = val; }
-const INDENTATION = {
-    PANEL_TITLE: 12,
-    BIOMARKER_DETAILS: 12,
-    INSIGHT: 12,
-    PAGE_WIDTH: 794
-};
-var localeService = new LocaleService(i18n);
-
-
-function renderHTMLTemplate(html, isRtl, data, isIMCLab, lang = 'en') {
-    let dir = isRtl ? 'rtl' : 'ltr';
-    let language = isRtl ? 'ar' : 'en';
-    let IMCclass = isIMCLab ? 'imc-lab' : '';
-    let styles = fetchFileContents(path.resolve(__dirname, '../assets/medicus_pdf/styles.css'));
-    if (isRtl) {
-        styles += fetchFileContents(path.resolve(__dirname, '../assets/medicus_pdf/arabic.css'));
-    }
-    let bodyClass = "";
-    if (!data['approvalDate']) {
-        bodyClass = "draft-bg";
-        if (lang !== 'en' && ['ar', 'de', 'fr', 'nl-NL', 'pt', 'pt_BR', 'ar-SA'].includes(lang)) {
-
-            bodyClass = "draft-bg-" + lang;
-        }
-    }
-    if (data['labType'] === 18) {
-        bodyClass += ' smart-donor';
-    }
-    const fs = require('fs');
-    let content = `
-               <div>
-                   <div id="page_template" class="all-pages ${IMCclass}">
-                    
-                       ${html}
-                   </div>
-               </div>
-         `;
-
-    return content;
-}
-
-function returnIntroTemplate(data, isIMCLab) {
-    let profileItemHTML = '';
-    let classProfileItemContainer = "size4";
-    let widthProfileItemContainer = '';
-    let introWidth = '';
-    if (isIMCLab || (!process.env.SHOW_QR_BOX || process.env.SHOW_QR_BOX === "false")) {
-        classProfileItemContainer = '';
-        widthProfileItemContainer = 'width:100%';
-        introWidth = 'width:100%';
-
-        let length = 100 / 3;
-        let items = data['profileItems'];
-        if (data['reportProperties'] && isIMCLab) {
-            for (const [key, value] of Object.entries(data['reportProperties'])) {
-                items.push({title: key, value: value});
-            }
-        }
-
-        for (const item of items) {
-            profileItemHTML += `<div style='width: ${length}%; padding: 10px 0' class='grid-col size2'>
-                                    <div class='info-label'>${item.title}</div>
-                                    <div class='info-value'>${item.value}</div>
-                                </div>`;
-        }
-    } else {
-        let index = 0;
-        while (index < data['profileItems'].length - 1) {
-            let newDivId = 'sub' + index;
-            profileItemHTML += `<div id="${newDivId}" class='grid-row'>`;
-
-            for (let j = 0; j < 2; j++) {
-                let valueId = newDivId + '-' + j;
-                let profileItemValue = data['profileItems'][index]['value'];
-                let classAttr = /[A-Za-z]/.test(profileItemValue) && /[0-9]/.test(profileItemValue) ? "ltr_dir" : "";
-
-                profileItemHTML += `<div id='${valueId}' class='grid-col size2'>
-                                       <div class='info-label'>${data['profileItems'][index]['title']}</div>
-                                       <div class='info-value ${classAttr}'>${profileItemValue}</div>
-                                   </div>`;
-                index++;
-            }
-            profileItemHTML += `</div>`;
-        }
-
-        if (data['profileItems'].length % 2 !== 0) {
-            let newDivId = 'sub' + index;
-            let valueId = newDivId + '-0';
-            let profileItemValue = data['profileItems'][index]['value'];
-            let classAttr = /[A-Za-z]/.test(profileItemValue) && /[0-9]/.test(profileItemValue) ? "ltr_dir" : "";
-
-            profileItemHTML += `<div id="${newDivId}" class='grid-row'>
-                                    <div id='${valueId}' class='grid-col size2'>
-                                        <div class='info-label'>${data['profileItems'][index]['title']}</div>
-                                        <div class='info-value ${classAttr}'>${profileItemValue}</div>
-                                    </div>
-                                </div>`;
-        }
-    }
-
-    let moreLink = localeService.t('Access your detailed report online') + " ";
-    moreLink = moreLink.replace("{link}", `<strong><a href='${data['moreLink']}' target='_blank'>${data['moreLink']}</a></strong>`);
-
-    if (data['patientPin'] && data['showPIN'] && data['qrCode']) {
-        moreLink += localeService.t("Scan this report’s QR code or enter this PIN code:") + "";
-    } else if (data['patientPin'] && data['showPIN']) {
-        moreLink += localeService.t("Enter this PIN code:") + "";
-    } else if (data['qrCode']) {
-        moreLink += localeService.t("Scan this report’s QR code:") + "";
-    }
-
-    let content = '';
-    let pin = data['patientPin'] || '';
-    let qrImage = data['qrCode'] || '';
-    let displayPin = pin ? 'inline-block' : 'none';
-    let displayQR = qrImage ? 'inline-block' : 'none';
-    let reportTitle = data['labType'] === 18 ? 'Smart Report' : localeService.t('Smart Report');
-
-    content += `<div class="intro" style="${introWidth}">
-                    <div class="grid-row">
-                        <div class="profile-items-container grid-col ${classProfileItemContainer}" style="${widthProfileItemContainer}">
-                            <div id="report-title-header-ltr" class="report-title">
-                                <div class="heading">${reportTitle}</div>
-                            </div>
-                            <div id="patient-container">${profileItemHTML}</div>
-                        </div>`;
-
-    if (!isIMCLab && (process.env.SHOW_QR_BOX === "true" || process.env.SHOW_QR_BOX === true) && data['labType'] !== 18) {
-        content += `<div class="plus-info-container grid-col size4">
-                        <div class="plus-info">
-                            <div class="grid-row">
-                                <div class="grid-col size3">
-                                    <div id="more-link" class="description">${moreLink}
-                                        <span id="pin" class="pin" style="display:${displayPin}">${pin}</span>
-                                    </div>
-                                </div>
-                                <div class="grid-col size1 qr-container">
-                                    <div id="qrcode" class="pin-qr" style="display:${displayQR}"><img src="${qrImage}"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>`;
-    }
-
-    content += '</div></div>';
-
-    return content;
-}
-
-
-function renderDoctorNotes(doctorNotes, bioIndentStyle = '') {
-    let doctorNotesHTML = '';
-    if (doctorNotes && doctorNotes.length > 0) {
-        doctorNotes.forEach(note => {
-            let noteId = 'doctor-note-' + Math.random().toString(36).substr(2, 9);
-            doctorNotesHTML += `<div class="card-wrapper card-wrapper-note" style="${bioIndentStyle}">
-                                    <div id="${noteId}" class="card">
-                                        <div class="icon">
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                                <g fill="none" fill-rule="evenodd">
-                                                    <rect width="32" height="32" fill="" rx="16"/>
-                                                    <g fill="#295C42" fill-rule="nonzero">
-                                                        <path d="M20.613 23.8a.31.31 0 0 0 .217-.088l1.845-1.8a.296.296 0 0 0 .09-.212v-12c0-.166-.137-.3-.307-.3h-1.845a.304.304 0 0 0-.308.3c0 .166.138.3.308.3h1.537v11.576l-1.755 1.712a.295.295 0 0 0 0 .424.31.31 0 0 0 .218.088z"/>
-                                                        <path d="M11.387 10c.17 0 .308-.134.308-.3 0-.166-.138-.3-.308-.3H9.542a.304.304 0 0 0-.307.3v12.9c0 .662.552 1.2 1.23 1.2h8.918c.17 0 .307-.134.307-.3v-1.8c0-.136.137-.3.308-.3h1.23c.17 0 .307-.134.307-.3 0-.166-.137-.3-.307-.3h-1.23c-.492 0-.923.42-.923.9v1.5h-8.61a.608.608 0 0 1-.615-.6V10h1.537zM16 8.2c-.34 0-.615.27-.615.6 0 .33.276.6.615.6.34 0 .615-.27.615-.6 0-.33-.276-.6-.615-.6z"/>
-                                                        <path d="M22.458 8.2h-1.845a.304.304 0 0 0-.308.3c0 .166.138.3.308.3h1.845c.448 0 .922.463.922.9v13.8c0 .437-.474.9-.922.9H9.542c-.448 0-.922-.463-.922-.9V9.7c0-.437.474-.9.922-.9h1.845c.17 0 .308-.134.308-.3 0-.166-.138-.3-.308-.3H9.542c-.79 0-1.537.729-1.537 1.5v13.8c0 .771.747 1.5 1.537 1.5h12.916c.79 0 1.537-.729 1.537-1.5V9.7c0-.771-.747-1.5-1.537-1.5z"/>
-                                                    </g>
-                                                </g>
-                                            </svg>
-                                        </div>
-                                        <div class="text text-with-icon">
-                                            <div class="from-doctor">${localeService.t('noteFromDoctor')} ${note.createdByName}</div>
-                                            <div class="note-content">${note.content.replace(/\n/g, "<br/>")}</div>
-                                        </div>
-                                    </div>
-                                </div>`;
-        });
-    }
-    return doctorNotesHTML;
-}
-
-function renderDoctorNotesCompactView(doctorNotes, bioIndentStyle = '') {
-    let doctorNotesHTML = '';
-    if (doctorNotes && doctorNotes.length > 0) {
-        doctorNotes.forEach(note => {
-            doctorNotesHTML += `<div class="note-content">${note.content}</div>`;
-        });
-    }
-    return doctorNotesHTML;
-}
-
-function renderOneBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent) {
-
-    let biomarkerDetailsHtml = '';
-
-    if (biomarker.showInDetailsView === true) {
-        const biomarkerCssId = "dtl-bio-" + "db" + biomarker.id;
-        let customBiomarkerValueFontSize = '';
-        const rawFormattedValue = biomarker.formattedValue || biomarker.lingualReading || '';
-        const formattedValue = rawFormattedValue.replace(/,/g, "");
-        if (formattedValue.length > 35) {
-            customBiomarkerValueFontSize = 'font-size:12px;';
-        }
-        const biomarkerName = biomarker.name || '';
-        const biomarkerStatus = biomarker.status || '';
-        const insightsCount = biomarker.insightsCount || '';
-        let CircleStyles = '';
-        if (!isComponent) {
-            CircleStyles = GetBiomarkerCircleStyle(biomarker.color, biomarkerName, biomarkerStatus, insightsCount, '', false);
-        }
-
-        // Indent biomarker details based on panel level
-        let firstGridColClass = 'size5';
-        let firstGridColstyle = '';
-        let lastGridColClass = 'size3';
-        let bioIndentStyle = '';
-        let bioIndentNoteStyle = '';
-        if (nestingLevel > 0) {
-            // Replace classes
-            firstGridColClass = 'size5';
-            lastGridColClass = 'size3';
-            const extraPadding = ((nestingLevel + 10 % 10) + 1);
-            const levelNesting = extraPadding + nestingLevel * (INDENTATION.BIOMARKER_DETAILS || 0);
-            const levelNestingNote = extraPadding + nestingLevel * (INDENTATION.BIOMARKER_DETAILS || 0) + 16;
-            bioIndentStyle = 'padding-left: ' + levelNesting + 'px;';
-            bioIndentNoteStyle = 'padding-left: ' + levelNestingNote + 'px';
-        }
-
-        // IMC special case (large biomarker value)
-        let biomarkerClass = '';
-        if (rawFormattedValue.length >= 125) {
-            biomarkerClass = 'large-value-class';
-            firstGridColClass = '';
-            // firstGridColstyle = 'width:100%';
-        }
-
-        const biomarkerValue = rawFormattedValue.replace(/\r\n/g, "<br/>");
-
-        if (!biomarker.showScale) {
-            biomarkerClass += ' hide-scale ';
-        }
-
-        const biomarkerColor = (biomarker.color && !biomarker.isNormal) ? "color:" + biomarker.color + ";" : "";
-        let rangesPlaceholder = "";
-        let currentRange = "";
-        let currentPercent = 50;
-        let biomarkerTitleClass = '';
-        if (biomarker.ranges.length > 1 && biomarker.showScale) {
-            biomarkerTitleClass = 'has-ranges';
-        } else {
-            biomarkerTitleClass = 'has-no-ranges';
-        }
-
-        let childRangesPlaceholder = "";
-        let childCurrentRange = "";
-        let heightCount = 1;
-        let bioValue = "";
-        let bioUnit = "";
-        let afterBioInfoValue = '';
-        let History = '';
-        if (biomarker.childrenBiomarkers && biomarker.childrenBiomarkers.length > 0) {
-            biomarker.childrenBiomarkers.forEach(bio => {
-                if (bio.ranges.length > 1) {
-                    heightCount++;
-                    // Viewing the biomarker and unit of children after the parent ones
-                    bioValue = bio.formattedValue.replace(/\n/g, "<br />");
-                    let bioValue_style = "";
-                    if (bioValue.length > 33) {
-                        bioValue_style = "font-size:12px;";
-                    }
-                    bioUnit = bio.unit;
-                    childCurrentRange = '';
-                    // Generating the children ranges and display them under the parent ones
-                    childRangesPlaceholder += '<div class="extra-range-placeholder">'
-                        + convertToRangeLayout(bio.ranges, bio, isRtl)
-                        + '</div>';
-                    biomarkerTitleClass = 'has-ranges';
-                    afterBioInfoValue += '<div class="colorable pair">'
-                        + '<span class="biomarker-extra-value" style="' + bioValue_style + '">' + bioValue + '</span>'
-                        + '<span class="biomarker-extra-unit">' + bioUnit + '</span>'
-                        + '</div>';
-                } else {
-                    biomarkerTitleClass = 'has-no-ranges';
-                }
-                History = renderBiomarkerHistoryChart(bio);
-            });
-        } else {
-            History = renderBiomarkerHistoryChart(biomarker);
-        }
-
-        if (heightCount > 1) {
-            biomarkerClass += 'hide-flag';
-        }
-
-        // Set biomarker history chart
-        const biomarkerFullName = biomarker.fullName || '';
-        let bioName = biomarkerFullName.replace(/\r\n/g, '');
-        bioName = bioName.replace(/\n/g, '');
-        const rangePlaceHolder = convertToRangeLayout(biomarker.ranges, biomarker, isRtl);
-        let biomarkerSampleHTML = '';
-        let biomInfoStyle = '';
-        let biomValueAlignStyle = '';
-        if (biomarker.sample) {
-            biomarkerSampleHTML += '<div class="biom-sample">'
-                + '<span class="biom-sample-value">'
-                + biomarker.sample
-                + '</span>'
-                + '</div>';
-            // biomValueAlignStyle = "vertical-align: bottom;";
-        }
-        if (!biomarker.sample && (rangePlaceHolder || childRangesPlaceholder || History)) {
-            biomInfoStyle = "margin-top:15px;";
-        }
-
-        // Configurations
-        let biomarkerScale = '';
-        if (isChildBiomarker) {
-            // biomarkerScale = 'transform:scale(.9);';
-        }
-        let biomCircleCss = '';
-        if (isComponent) {
-            biomCircleCss = 'opacity: 0;';
-            biomarkerSampleHTML = '';
-            bioName = '';
-        }
-        let panelNesting = '';
-        let biomarkerTitleWidth = 'width:260px';
-        if (nestingLevel > 0) {
-            const extraPadding = ((nestingLevel + 10 % 10) + 1);
-            const levelNesting = extraPadding + nestingLevel * (INDENTATION.PANEL_TITLE || 0);
-            panelNesting = 'padding-left: ' + levelNesting + 'px;box-sizing:border-box;';
-            const width = 260 - levelNesting;
-            biomarkerTitleWidth = 'width:' + width + 'px';
-        }
-
-        if ((!rangePlaceHolder || !biomarker.showScale) && !childRangesPlaceholder && !History) {
-            biomarkerScale += 'width:100%;';
-        }
-        const doctorNotesArr = biomarker.doctorNotes || [];
-        const doctorNotes = renderDoctorNotes(doctorNotesArr, bioIndentNoteStyle);
-        let bioNameStyle = '';
-        let isValueNumber = !isNaN(Number(biomarkerValue));
-        let valueDataType = isValueNumber ? "number" : "string";
-        const safeBioName = bioName
-            .replace(/\(/g, '&#x28;')
-            .replace(/\)/g, '&#x29;');
-        biomarkerDetailsHtml += '<div data-id="' + biomarkerCssId + '" class="biomarker-container grid-col ' + biomarkerClass + '">'
-            + '<div class="grid-col ' + firstGridColClass + ' ' + biomarkerClass + '" style="' + biomarkerScale + panelNesting + '">'
-            + '<div class="biomarker">'
-            + '<div class="biom-circle" style="' + removeWhiteSpace(CircleStyles) + ';' + biomCircleCss + '">' + biomarkerName + '</div>'
-            + '<div class="biom-info ' + biomarkerTitleClass + '" style="' + biomInfoStyle + '">'
-            + '<div class="title ' + biomarkerTitleClass + '" style="' + biomarkerTitleWidth + '">' + biomarkerSampleHTML + '<span class="bio-name-info b" dir="ltr" style="unicode-bidi:isolate;">' + safeBioName + '</span></div>'
-            + '<div class="value colorable" style="' + biomValueAlignStyle + '">'
-            + biomarkerSampleHTML
-            + '<div class="pair parent-pair">'
-            + '<span class="value-text" data-type="' + valueDataType + '">'
-            + '<span style="' + customBiomarkerValueFontSize + biomarkerColor + '">' + biomarkerValue + '</span>'
-            + '</span>'
-            + '<span dir="ltr" class="unit colorable">' + biomarker.unit + '</span>'
-            + '</div>'
-            + '</div>'
-            + afterBioInfoValue
-            + '</div>'
-            + '</div>'
-            + '</div>';
-
-        if (rangePlaceHolder || childRangesPlaceholder || History) {
-            biomarkerDetailsHtml += '<div class="grid-col ' + lastGridColClass + '  ' + biomarkerClass + '" style="' + biomarkerScale + '">';
-            let biomBarClass = "";
-            if (biomarker.ranges.length > 6) {
-                biomBarClass = "big";
-            }
-
-            biomarkerDetailsHtml += '<div class="biom-bar ' + biomBarClass + '">';
-        }
-        if (rangePlaceHolder && biomarker.showScale) {
-            biomarkerDetailsHtml += '<div class="range-placeholder c">' + convertToRangeLayout(biomarker.ranges, biomarker, isRtl) + '</div>';
-        }
-
-        if (childRangesPlaceholder) {
-            biomarkerDetailsHtml += childRangesPlaceholder;
-        }
-        if (rangePlaceHolder || childRangesPlaceholder || History) {
-            biomarkerDetailsHtml += '</div><!-- close biom-bar -->';
-            // History chart start
-            biomarkerDetailsHtml += '<div class="grid-col history-chart-col">';
-
-            if (History) {
-                biomarkerDetailsHtml += '<div class="chart">'
-                    + History
-                    + '</div>';
-            }
-
-            biomarkerDetailsHtml += '</div> <!-- end chart grid col -->';
-            // History chart end
-            biomarkerDetailsHtml += '</div> <!-- close last grid-col -->';
-        }
-        if (doctorNotes) {
-            biomarkerDetailsHtml += '<div class="grid-row biomarker-insights b">'
-                + doctorNotes
-                + '</div>';
-        }
-
-        biomarkerDetailsHtml += '</div> <!-- end first close biomarker-container-->';
-    }
-    return biomarkerDetailsHtml;
-}
-
-function renderBiomarkerDetails(panel, isRtl, counter) {
-    let content = '';
-    panel.biomarkers.forEach((biomarker, biomarkrCounter) => {
-        content += renderOneBiomarker(biomarker, biomarkrCounter, panel, isRtl, counter);
-    });
-    return content;
-}
-
-function renderPanelTitle(panel, counter, biomarkrCounter) {
-    let panelTitle = '';
-    let panelSubTitle = '';
-    let content = '';
-    let checkShowInDetailsView = panel.biomarkers.find(biomarker => biomarker.showInDetailsView === true);
-
-    if (panel.biomarkers && checkShowInDetailsView && biomarkrCounter === 0) {
-        if (panel.panelDetails && panel.panelDetails.length > 1) {
-            panelTitle = panel.panelDetails[0].name;
-            let newPanelDetails = panel.panelDetails;
-
-            if (newPanelDetails.length > 0) {
-                newPanelDetails.forEach((panelDetail, index) => {
-                    if (index > 0) {
-                        let marginLeft = (index + 1) * 10;
-                        let name = panelDetail.name ? panelDetail.name : '';
-                        panelSubTitle += `<div class="panel-subtitle-item" style="padding-left:${marginLeft}px">${name}</div>`;
-                    }
-                });
-            }
-        } else {
-            panelTitle = panel.panelDetails && panel.panelDetails[0] && panel.panelDetails[0].name ? panel.panelDetails[0].name : panel.name;
-        }
-
-        let detailsTitle = '';
-        if (counter === 0) {
-            detailsTitle = `<div id="details-section" class="section">
-                                <div class="resume-title">${localeService.t('Details')}</div>
-                            </div>`;
-        }
-
-        content += `${detailsTitle}
-                    <div class="panel-title">${panelTitle}</div>
-                    <div class="panel-subtitle">${panelSubTitle}</div>`;
-    }
-    return content;
-}
-
-function renderPanelDetails(panel, biomarkerDetailsHtml, counter, isRtl) {
-    const panelCssId = `dtl-pnl-dp${panel.panelId.toLowerCase()}`;
-    const checkShowInDetailsView = panel.biomarkers.find(biomarker => biomarker.showInDetailsView === true);
-    let detailsSectionHTML = '';
-    let panelSubTitle = '';
-
-    if (panel.biomarkers && checkShowInDetailsView) {
-        let panelTitle = panel.panelDetails && panel.panelDetails.length > 1 ? panel.panelDetails[0].name : panel.name;
-
-        if (panel.panelDetails && panel.panelDetails.length > 1) {
-            panel.panelDetails.forEach((panelDetail, index) => {
-                if (index > 0) {
-                    let marginLeft = (index + 1) * 10;
-                    let name = panelDetail.name ? panelDetail.name : '';
-                    panelSubTitle += `<div class="panel-subtitle-item" style="padding-left:${marginLeft}px">${name}</div>`;
-                }
-            });
-        }
-
-        let detailsTitle = '';
-        if (counter === 0) {
-            detailsTitle = `<div id="details-section" class="section">
-                                <div class="resume-title">${localeService.t('Details')}</div>
-                            </div>`;
-        }
-
-        let panelInsights = renderRelatedInsights(panel.insights, panel, true, `dtl-pnl-insight-${panel.panelId}`, isRtl);
-        let doctorNotes = renderDoctorNotes(panel.doctorNotes);
-        let bioInsights = (doctorNotes || panelInsights) ? `<div class="grid-row biomarker-insights">${doctorNotes}${panelInsights}</div>` : '';
-
-        detailsSectionHTML += `<div id="${panelCssId}" class="section panel sectionPanel">
-                                    <div class="panel-wrapper">
-                                        <div class="section-content">
-                                            <div class="panel-container">${biomarkerDetailsHtml}</div>
-                                            ${bioInsights}
-                                        </div>
-                                    </div>
-                                </div>`;
-    }
-    return detailsSectionHTML;
-}
-
-function renderOneInsight(insight, nestingLevel, isRtl) {
-    const INDENTATION = {INSIGHT: 10}; // Assuming this is defined globally
-    let insightHtml = '';
-    const insightCssId = "insight-" + "cb" + insight.id + Math.floor(Math.random() * 3);
-    let insightClass = "";
-    let content = '';
-    let tolerance = "";
-    let introductoryStatement = "";
-    let nodes = "";
-    let doctorContentClass = "hide-me";
-    let insightImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEgCAMAAAAjXV6yAAAAdVBMVEUAAACAma+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama/V/8ZIAAAAJnRSTlMATE389dtK6SQE7uTUOc/HlysO3qeJbwnBf1kzaBwWuZ+zYEJ1UwEot4sAAATfSURBVHja7NprcqpAEIbhDwckclPu4iUajb3/JZ78MDWQ1CmhKtKN9LOEt2bGGWwopZRSSimllFJKKaWUUkoppZRSSimllFJKKfVCFs+2vMZxelxhohx6NuMGfh4lp80trTE9Do3G5MnZecfEODQqNyqW01pHDo0tWB+OmA6HxmeSz+nsNIc4mOQwlY3mEA/3tMckOMQlbzJMgENs3I83yGcDbZxn2VXNeRv59EuyhHg20AJPlcXVh2eoKzxAuhECWWm1dqnDb6Q/0kYJZNW7bTdRUEK2kQJZ9SGiNreUvYZGC2QdC5dagk9IxhAIdelTi7+DYByBgItHLZ7kSzVPINx8alkLft4zBcI+IssUcg9qrkBYhGQFco8htkCoArISsZuML9CqdMk6S91kfIGQbckKY8jEGAjXkKwPoUuIMxA2ZPlCP32wBkpzsk4ylxBrIGzkn0K8gWKfrDMk4g304ZEVyD2G2AKhCshKxG4yvkCr0iXrLHWT8QVCtiUrjCETYyBcQ7I+hC4hzkDYkOUL/fTBGijNyTrJXEKsgbCRfwrxBop9ss6QiDfQh0dWIPcYYguEKiArEbvJ+AKtSpess9RNxhcI2ZasMIZMjIFwDcn6ELqEOANhQ5Yv9NMHa6A0J+skcwmxBsJG/inEGyj2yTpDIt5AHx5ZgdxjiC0QqoCsROwm4wu0Kl2yzlI3GV8gZFuywhgyMQbCNSTrQ+gS4gyEDVm+0E8frIHSnKyTzCXEGggb+acQb6DYJ+sMiXgDfXhkBXKPIbZAqAKyErGbjC/QqnTJOkvdZHyBkG3JCmPIxBgI15CsD6FLiDMQNmT5Qj99sAZKc7JOMpcQayBs5J9CvIFin6wzJOIN9OGRFcg9htgCoQrISsRuMr5Aq9Il6yx1k/EFQrYlK4whE2MgXEOyPoQuIc5A2JDlC/30wRoozck6yVxCrIGwkX8K8QaKfbLOkIg30IdHViD3GGILhCogKxG7yfgCrUqXrLPUTcYXCNmWrDCGTIyBcA3J+hC6hDgDYUOWL/TTB2ugNCfrJHMJsQbCRv4pxBso9sk6QyLeQB8eWYHcY4gtEKqArETsJuMLtCpdss5SNxlfIGRbssIYMjEGwjUk60PoEuIMhA1ZvtBPH6yB0pysk8wlxBoIG/mnEG+g2CfrDIl4A314ZAVyjyG2QKgCshKxm4wv0Kp0yTpL3WR8gZBtyQpjyMQYCNeQrA+hS4gzEDZk+UI/fbAGSnOyTjKXEGsgbOSfQryBYp+sMyTiDfThkRXIPYbYAqEKyErEbjK+QKvSJessdZPxBUK2JSuMIRNjIFxDsj6ELiHOQNiQ5Qv99MEaKM3JOsn+3yX0DgAAAAAAAAAAAPi3Dx06cIqm05GlAAAAAElFTkSuQmCC";
-    let insightTextClass = "";
-    let relatedBiomarkers = "";
-
-    if (insight.title) {
-        content += `<div class='title'>${insight.title}</div>`;
-    }
-
-    if (insight.introductoryStatement) {
-        introductoryStatement = insight.introductoryStatement + " ";
-    } else {
-        introductoryStatement = insight.content;
-    }
-
-    let insightCssIdStyle = '';
-    if (nestingLevel > 0) {
-        const extraPadding = ((nestingLevel + 10 % 10) + 1)
-        const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT;
-        insightCssIdStyle = `padding-left: ${levelNesting}px`;
-    }
-
-    function renderOneInsight(insight, nestingLevel, isRtl) {
-        const INDENTATION = {INSIGHT: 10}; // Assuming this is defined globally
-        let insightHtml = '';
-        const insightCssId = "insight-" + "cb" + insight.id.toLowerCase() + Math.floor(Math.random() * 3);
-        let insightClass = "";
-        let content = '';
-        let tolerance = "";
-        let introductoryStatement = "";
-        let nodes = "";
-        let doctorContentClass = "hide-me";
-        let insightImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEgCAMAAAAjXV6yAAAAdVBMVEUAAACAma+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama/V/8ZIAAAAJnRSTlMATE389dtK6SQE7uTUOc/HlysO3qeJbwnBf1kzaBwWuZ+zYEJ1UwEot4sAAATfSURBVHja7NprcqpAEIbhDwckclPu4iUajb3/JZ78MDWQ1CmhKtKN9LOEt2bGGWwopZRSSimllFJKKaWUUkoppZRSSimllFJKKfVCFs+2vMZxelxhohx6NuMGfh4lp80trTE9Do3G5MnZecfEODQqNyqW01pHDo0tWB+OmA6HxmeSz+nsNIc4mOQwlY3mEA/3tMckOMQlbzJMgENs3I83yGcDbZxn2VXNeRv59EuyhHg20AJPlcXVh2eoKzxAuhECWWm1dqnDb6Q/0kYJZNW7bTdRUEK2kQJZ9SGiNreUvYZGC2QdC5dagk9IxhAIdelTi7+DYByBgItHLZ7kSzVPINx8alkLft4zBcI+IssUcg9qrkBYhGQFco8htkCoArISsZuML9CqdMk6S91kfIGQbckKY8jEGAjXkKwPoUuIMxA2ZPlCP32wBkpzsk4ylxBrIGzkn0K8gWKfrDMk4g304ZEVyD2G2AKhCshKxG4yvkCr0iXrLHWT8QVCtiUrjCETYyBcQ7I+hC4hzkDYkOUL/fTBGijNyTrJXEKsgbCRfwrxBop9ss6QiDfQh0dWIPcYYguEKiArEbvJ+AKtSpess9RNxhcI2ZasMIZMjIFwDcn6ELqEOANhQ5Yv9NMHa6A0J+skcwmxBsJG/inEGyj2yTpDIt5AHx5ZgdxjiC0QqoCsROwm4wu0Kl2yzlI3GV8gZFuywhgyMQbCNSTrQ+gS4gyEDVm+0E8frIHSnKyTzCXEGggb+acQb6DYJ+sMiXgDfXhkBXKPIbZAqAKyErGbjC/QqnTJOkvdZHyBkG3JCmPIxBgI15CsD6FLiDMQNmT5Qj99sAZKc7JOMpcQayBs5J9CvIFin6wzJOIN9OGRFcg9htgCoQrISsRuMr5Aq9Il6yx1k/EFQrYlK4whE2MgXEOyPoQuIc5A2JDlC/30wRoozck6yVxCrIGwkX8K8QaKfbLOkIg30IdHViD3GGILhCogKxG7yfgCrUqXrLPUTcYXCNmWrDCGTIyBcA3J+hC6hDgDYUOWL/TTB2ugNCfrJHMJsQbCRv4pxBso9sk6QyLeQB8eWYHcY4gtEKqArETsJuMLtCpdss5SNxlfIGRbssIYMjEGwjUk60PoEuIMhA1ZvtBPH6yB0pysk8wlxBoIG/mnEG+g2CfrDIl4A314ZAVyjyG2QKgCshKxm4wv0Kp0yTpL3WR8gZBtyQpjyMQYCNeQrA+hS4gzEDZk+UI/fbAGSnOyTjKXEGsgbOSfQryBYp+sMyTiDfThkRXIPYbYAqEKyErEbjK+QKvSJessdZPxBUK2JSuMIRNjIFxDsj6ELiHOQNiQ5Qv99MEaKM3JOsn+3yX0DgAAAAAAAAAAAPi3Dx06cIqm05GlAAAAAElFTkSuQmCC";
-        let insightTextClass = "";
-        let relatedBiomarkers = "";
-
-        if (insight.title) {
-            content += `<div class='title'>${insight.title}</div>`;
-        }
-
-        if (insight.introductoryStatement) {
-            introductoryStatement = insight.introductoryStatement + " ";
-        } else {
-            introductoryStatement = insight.content;
-        }
-
-        let insightCssIdStyle = '';
-        if (nestingLevel > 0) {
-            const extraPadding = ((nestingLevel + 10 % 10) + 1)
-            const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT;
-            insightCssIdStyle = `padding-left: ${levelNesting}px`;
-        }
-
-        if (insight.introductoryStatement || insight.summary || insight.testExplained || insight.suggestion) {
-            const introductoryStatementContent = introductoryStatement ? introductoryStatement.replace(/(\r\n|\n|\r)/gm, '') : '';
-            const insightSummaryContent = insight.summary ? insight.summary : '';
-            const testExplainedContent = insight.testExplained ? insight.testExplained : '';
-            const suggestionContent = insight.suggestion ? insight.suggestion : '';
-            content += `<div class="html-content inline-text introductory-statement">${introductoryStatementContent}</div>`;
-            content += `<div class="html-content inline-text testExplained">${testExplainedContent}</div>`;
-            content += `<div class="html-content inline-text">${insightSummaryContent}</div>`;
-            content += `<div class="html-content">${suggestionContent}</div>`;
-
-            if (isRtl) {
-                content = content.replace(/&rlm;/g, '');
-                content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
-                content = content.replace(/\)/g, ') &rlm;</span>');
-            }
-        } else {
-            content += introductoryStatement;
-            if (isRtl) {
-                content = content.replace(/&rlm;/g, '');
-                content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
-                content = content.replace(/\)/g, ') &rlm;</span>');
-            }
-        }
-
-        if (insight.detailedList) {
-            const parsedTable = parseTable(insight.detailedList);
-            nodes = renderDetails(parsedTable, isRtl);
-            doctorContentClass = "";
-        }
-
-        if (introductoryStatement) {
-            const span = "<span>";
-            if (introductoryStatement.includes(span)) {
-                tolerance = stripTags(introductoryStatement, '<span>');
-                introductoryStatement = introductoryStatement.replace(/<(.|\n)*?>/g, '');
-                introductoryStatement = introductoryStatement.replace(tolerance, '');
-            }
-        }
-
-        if (insight.color === "") {
-            insightClass = "tip";
-        } else {
-            insightClass = color(insight.color);
-        }
-
-        // if (insight.icon !== "") {
-        //     insightImage = getFileAsBase64(insight.icon, 'image/png');
-        // }
-
-        if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
-            insightTextClass = "insight-text";
-            // Loop through relatedBiomarkers and generate HTML (commented out in PHP)
-        }
-
-        let insightCssIdCss = '';
-        if (nestingLevel > 0) {
-            const extraPadding = ((nestingLevel + 10 % 10) + 1)
-            const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT + 16;
-            insightCssIdCss = `padding-left: ${levelNesting}px`;
-        }
-
-        let svgColor = color(insight.color);
-        if (insight.isMedical) {
-            insightClass += ' medical-insight';
-            svgColor = ' medical-insight';
-        }
-
-        if (content || insight.disclaimer || insight.toleranceText) {
-            insightHtml += `<div id="${insightCssId}" class="card-wrapper" style="${insightCssIdCss}" insight-id="${insight.id}">
-                                <div class="card insight-card a ${insightClass}">
-                                    <div class="insight-container">`;
-            if (insight.isMedical || insight.insightType === 'doctor-visit') {
-                insightHtml += `<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none" class="card-svg ${svgColor}">
-                                    <path d="M17 0C15.8955 0 15 0.895447 15 2V15H2C0.895508 15 0 15.8954 0 17V35C0 36.1046 0.895508 37 2 37H15V50C15 51.1046 15.8955 52 17 52H35C36.1045 52 37 51.1046 37 50V37H50C51.1045 37 52 36.1046 52 35V17C52 15.8954 51.1045 15 50 15H37V2C37 0.895416 36.1045 0 35 0H17Z" fill="white"/>
-                                </svg>`;
-            }
-            insightHtml += `<div class="text ${insightTextClass}">${content}</div>`;
-
-            if (insight.disclaimer) {
-                insightHtml += `<div class="insight-disclaimer" style="padding: 10px 0px 0">${insight.disclaimer}</div>`;
-            }
-            if (insight.toleranceText) {
-                insightHtml += `<div class="insight-tolerance" style="padding: 10px 0px 0">${insight.toleranceText}</div>`;
-            }
-            insightHtml += `</div>`;
-            if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
-                insightHtml += `<div id="${insightCssId}" class="related-icons has-related ${color(insight.color)}">${relatedBiomarkers}</div>`;
-            }
-            insightHtml += `</div></div>`;
-        }
-
-        if (nodes || tolerance) {
-            insightHtml += `<div class="card-wrapper detailed-list-card-wrapper" style="${insightCssIdCss}">
-                                <div class="detailed-list-wrapper">
-                                    <div class="detailed-list-title-wrapper">
-                                        <div class="doctor-only-content-container ${doctorContentClass}">
-                                            <h4 class="doctor-only-content-header">${getLocale('doctorContent')}</h4>
-                                            <span class="doctor-only-content-subheader">${getLocale('mostCommonCausesOfTheObservedValue')}</span>
-                                        </div>`;
-            if (nodes) {
-                insightHtml += `<ul class="detailed-list">${nodes}</ul>`;
-            }
-            if (tolerance) {
-                insightHtml += `<div class="tolerance-text">${tolerance}</div>`;
-            }
-            insightHtml += `</div></div></div>`;
-        }
-
-        return insightHtml;
-    }
-
-    if (insight.introductoryStatement || insight.summary || insight.testExplained || insight.suggestion) {
-        const introductoryStatementContent = introductoryStatement ? introductoryStatement.replace(/(\r\n|\n|\r)/gm, '') : '';
-        const insightSummaryContent = insight.summary ? insight.summary : '';
-        const testExplainedContent = insight.testExplained ? insight.testExplained : '';
-        const suggestionContent = insight.suggestion ? insight.suggestion : '';
-        content += `<div class="html-content inline-text introductory-statement">${introductoryStatementContent}</div>`;
-        content += `<div class="html-content inline-text testExplained">${testExplainedContent}</div>`;
-        content += `<div class="html-content inline-text">${insightSummaryContent}</div>`;
-        content += `<div class="html-content">${suggestionContent}</div>`;
-
-        if (isRtl) {
-            content = content.replace(/&rlm;/g, '');
-            content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
-            content = content.replace(/\)/g, ') &rlm;</span>');
-        }
-    } else {
-        content += introductoryStatement;
-        if (isRtl) {
-            content = content.replace(/&rlm;/g, '');
-            content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
-            content = content.replace(/\)/g, ') &rlm;</span>');
-        }
-    }
-
-    if (insight.detailedList) {
-        const parsedTable = parseTable(insight.detailedList);
-        nodes = renderDetails(parsedTable, isRtl);
-        doctorContentClass = "";
-    }
-
-    if (introductoryStatement) {
-        const span = "<span>";
-        if (introductoryStatement.includes(span)) {
-            tolerance = stripTags(introductoryStatement, '<span>');
-            introductoryStatement = introductoryStatement.replace(/<(.|\n)*?>/g, '');
-            introductoryStatement = introductoryStatement.replace(tolerance, '');
-        }
-    }
-
-    if (insight.color === "") {
-        insightClass = "tip";
-    } else {
-        insightClass = color(insight.color);
-    }
-
-    // if (insight.icon !== "") {
-    //     insightImage = getFileAsBase64(insight.icon, 'image/png');
-    // }
-
-    if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
-        insightTextClass = "insight-text";
-        // Loop through relatedBiomarkers and generate HTML (commented out in PHP)
-    }
-
-    let insightCssIdCss = '';
-    if (nestingLevel > 0) {
-        const extraPadding = ((nestingLevel + 10 % 10) + 1)
-        const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT + 16;
-        insightCssIdCss = `padding-left: ${levelNesting}px`;
-    }
-
-    let svgColor = color(insight.color);
-    if (insight.isMedical) {
-        insightClass += ' medical-insight';
-        svgColor = ' medical-insight';
-    }
-
-    if (content || insight.disclaimer || insight.toleranceText) {
-        insightHtml += `<div id="${insightCssId}" class="card-wrapper" style="${insightCssIdCss}" insight-id="${insight.id}">
-                            <div class="card insight-card a ${insightClass}">
-                                <div class="insight-container">`;
-        if (insight.isMedical || insight.insightType === 'doctor-visit') {
-            insightHtml += `<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none" class="card-svg ${svgColor}">
-                                <path d="M17 0C15.8955 0 15 0.895447 15 2V15H2C0.895508 15 0 15.8954 0 17V35C0 36.1046 0.895508 37 2 37H15V50C15 51.1046 15.8955 52 17 52H35C36.1045 52 37 51.1046 37 50V37H50C51.1045 37 52 36.1046 52 35V17C52 15.8954 51.1045 15 50 15H37V2C37 0.895416 36.1045 0 35 0H17Z" fill="white"/>
-                            </svg>`;
-        }
-        insightHtml += `<div class="text ${insightTextClass}">${content}</div>`;
-
-        if (insight.disclaimer) {
-            insightHtml += `<div class="insight-disclaimer" style="padding: 10px 0px 0">${insight.disclaimer}</div>`;
-        }
-        if (insight.toleranceText) {
-            insightHtml += `<div class="insight-tolerance" style="padding: 10px 0px 0">${insight.toleranceText}</div>`;
-        }
-        insightHtml += `</div>`;
-        if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
-            insightHtml += `<div id="${insightCssId}" class="related-icons has-related ${color(insight.color)}">${relatedBiomarkers}</div>`;
-        }
-        insightHtml += `</div></div>`;
-    }
-
-    if (nodes || tolerance) {
-        insightHtml += `<div class="card-wrapper detailed-list-card-wrapper" style="${insightCssIdCss}">
-                            <div class="detailed-list-wrapper">
-                                <div class="detailed-list-title-wrapper">
-                                    <div class="doctor-only-content-container ${doctorContentClass}">
-                                        <h4 class="doctor-only-content-header">${getLocale('doctorContent')}</h4>
-                                        <span class="doctor-only-content-subheader">${getLocale('mostCommonCausesOfTheObservedValue')}</span>
-                                    </div>`;
-        if (nodes) {
-            insightHtml += `<ul class="detailed-list">${nodes}</ul>`;
-        }
-        if (tolerance) {
-            insightHtml += `<div class="tolerance-text">${tolerance}</div>`;
-        }
-        insightHtml += `</div></div></div>`;
-    }
-
-    return insightHtml;
-}
-
-function renderRelatedInsights(insights, panel, showRelatedBiomarkers = true, idPrefix = '', isRtl = false) {
-    let content = '';
-    if (insights.length > 0) {
-        insights.forEach((insight, insightIndex) => {
-            content += renderOneInsight(insight, insightIndex, idPrefix, panel, showRelatedBiomarkers, isRtl);
-        });
-    }
-    return content;
-}
-
-function setSummaryStatInsightText(summary) {
-    let insightsHasStackedArray = [];
-    let temp2 = [...summary];
-
-    summary.forEach((summaryCheckedItem, index) => {
-        if (summaryCheckedItem.stackedInsight !== null) {
-            let test = {};
-
-            temp2.forEach((stackedElement, i) => {
-                if (stackedElement && stackedElement.id === summaryCheckedItem.stackedInsight) {
-                    test.index = i;
-                    summaryCheckedItem.content += `<br><br>${stackedElement.content}`;
-                    test.elm = summaryCheckedItem;
-                    insightsHasStackedArray[index] = stackedElement;
-                    summary[test.index] = test.elm;
-                    summary.splice(i, 1);
-                }
-            });
-        }
-    });
-    return summary;
-}
-
-function returnSummaryTemplate(summaryI, isRtl) {
-    let summary = setSummaryStatInsightText(summaryI);
-    let insightIndex = 0;
-    let insightHtml = '';
-
-    summary.forEach(insight => {
-        let insightCssId = `smry-insight${insightIndex}`;
-        let relatedBiomarkers = '';
-        let insightCssClass = insight.isClinicalReading ? "cr" : insight.color === "" ? "tip" : color(insight.color);
-
-        let insightText = insight.title ? `<div class="title">${insight.title}</div>` : '';
-        let insightContent = insight.content;
-
-        if (isRtl) {
-            insightContent = insightContent.replace(/&rlm;/g, '')
-                .replace(/\(/g, '&rlm; <span class="ltr-dir">(')
-                .replace(/\)/g, ') &rlm;</span>');
-        }
-
-        insightText += insightContent.replace(/(\r\n|\n|\r)/gm, '<br/>');
-
-        if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
-            insight.relatedBiomarkers.forEach(item => {
-                relatedBiomarkers += GetRelatedBiomarker(
-                    GetBiomarkerCircleStyle(item.color, item.name, item.status, item.insightsCount, 'nothing', true, item),
-                    item.name,
-                    item.fullName
-                );
-            });
-        }
-
-        let svgColor = color(insight.color);
-        if (insight.isMedical) {
-            insightCssClass += ' medical-insight';
-            svgColor = ' medical-insight';
-        }
-
-        insightHtml += `<div id="${insightCssId}" class="card insight-card ${insightCssClass}">
-                            <div class="insight-container">
-                                <div class="text">${insightText}</div>
-                                ${insight.toleranceText ? `<div class="text" style="color: #FF3200; padding: 10px 0px 5px 0px;">${insight.toleranceText}</div>` : ''}
-                            </div>
-                            ${insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0 ? `<div id="${insightCssId}" class="related-icons has-related ${color(insight.color)}">${relatedBiomarkers}</div>` : ''}
-                        </div>`;
-
-        insightIndex++;
-    });
-    return insightHtml;
-}
-
-function renderSummary(data, isRtl) {
-    let content = '';
-    let reportNotes = '';
-    let summary = '';
-
-    if ((data.summary) || (data.doctorNote && data.doctorNote.length > 0)) {
-        if (data.doctorNote && data.doctorNote.length > 0) {
-            reportNotes = renderDoctorNotes(data.doctorNote);
-        }
-        if (data.summary) {
-            summary = returnSummaryTemplate(data.summary, isRtl);
-        }
-        if (reportNotes && summary)
-            content += `
-            <div id="summary" class="section">
-                <div class="resume-title">${localeService.t('Summary')}</div>
-                <div class="section-content report-notes">${reportNotes}${summary}</div>
-            </div>
-        `;
-    }
-    return content;
-}
-
-function renderReportSummary(data, isIMCLab) {
-    let content = '';
-    if (data.reportSummary || (data.reportProperties && !isIMCLab)) {
-        content += '<br/><br/>';
-        let reportProperties = '';
-
-        content += '<div id="report-summary" class="section">';
-        if (data.reportSummary) {
-            content += `
-                <div class="resume-title report-summary-title">${localeService.t('reportSummary')}</div>
-                <div class="section-content report-summary-content">${data.reportSummary}</div>
-            `;
-        }
-        /* add report properties */
-        if (data.reportProperties && !isIMCLab) {
-            for (const [key, value] of Object.entries(data.reportProperties)) {
-                reportProperties += `<p>${key}: ${value}</p>`;
-            }
-            content += `
-                <div class="resume-title report-properties-title">${localeService.t('reportProperties')}</div>
-                <div class="section-content report-properties-content">${reportProperties}</div>
-            `;
-        }
-        content += '</div>';
-    }
-
-    return content;
-}
-
-function renderSignature(data, isRtl, isIMCLab) {
-    let content = '';
-    let textAlign = isRtl ? 'right' : 'left';
-
-    // Lab address
-    let labAddress = '';
-    if (data.labAddress && data.labType !== 18) {
-        labAddress = data.labAddress.replace(/\n/g, "<br>");
-    }
-    content += `<td style="vertical-align: middle;"><div style="padding: 0 25px;font-size: 14px;text-align: ${textAlign};line-height: 1.4;word-break: break-all;">
-                           ${labAddress}
-                  </div></td>`;
-
-    // Lab tel, email, and site
-    let labPhone = data.labPhoneNumber ? `${localeService.t('Tel:')} ${data.labPhoneNumber}<br/>` : '';
-    let labEmail = data.labEmailAddress ? `${localeService.t('Email:')} ${data.labEmailAddress}<br/>` : '';
-    let labSite = data.moreLink ? `${data.moreLink}<br/>` : '';
-
-    if (data.labType === 18) {
-        labSite = "Web: http://www.smartdonor.it/<br/>";
-    }
-
-    if (labPhone || labEmail || labSite) {
-        content += `<td style="vertical-align: middle;"><div style="width: 2px; height: 100%;background:rgba(157,169,180, 0.5);min-height: 70px ">&nbsp;</div></td>`;
-    }
-    content += `<td style="vertical-align: middle;"><div style="padding: 0 25px;font-size: 14px;text-align: ${textAlign};line-height: 1.4;">
-                                     ${labPhone}
-                                     ${labEmail}
-                                     ${labSite}
-                         </div></td>`;
-
-    if (data.labType !== 18 && !isIMCLab && (data.labStamp || (data.signatures && data.signatures.length > 0))) {
-        content += `<td style="vertical-align: middle;"><div style="width: 2px; height: 100%;background:rgba(157,169,180, 0.5);min-height: 70px">&nbsp;</div></td>`;
-    }
-
-    if (data.labType !== 18 && data.signatures && data.signatures.length > 0) {
-        data.signatures.forEach((signature, index) => {
-            let approvedBy = signature.name;
-            content += `<td style="vertical-align: middle;">
-                            <div class="approved-by-doctor" style="padding: 0 25px;font-size: 14px;text-align: ${textAlign};line-height: 1.4;">
-                                <div>${localeService.t('Report approved by')}</div>
-                                <div>${approvedBy}</div>
-                                <img class="signature-image" style="height: 50px;width: auto;" src="${signature.signatureURL}">
-                            </div>
-                        </td>`;
-        });
-    }
-
-    if (data.labStamp && data.labType !== 18) {
-        content += `<td><img class="stamp-image a" style="padding: 0 25px;align-self: center;justify-self: center;webkit-align-items:center" src="${data.labStamp}" width="100"></td>`;
-    }
-
-    if (data.labType === 18) {
-        content += `<td><img class="stamp-image" style="float: right;padding: 0 25px;align-self: center;justify-self: center;webkit-align-items:center" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADVCAYAAADtl80QAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAbXUAAHOgAAD83QAAg2QAAHDoAADsaAAAMD4AABCQ5OyZ6gAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAALNxJREFUeNrtXQeYVEW2np4ZZphhhiGIBAUZkkQJIohhwYyKWdeEiCKICUwYFhMgGFcFAwKKomDCgBl1FdEVFHFVQAQFBQWRIEpwhkndr477t+9u29NdVTfVvXP+7zvfvrfL3K7410l1KiODwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwdDD/wGlgtpU8FGP8wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMS0yMFQxMjo1MzoyOSswMTowMF975WEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTUtMTEtMjBUMTI6NTM6MjkrMDE6MDAuJl3dAAAAAElFTkSuQmCC" width="100"></td>`;
-    }
-
-    return content;
-}
-
-function showDetailsView(data, isRtl) {
-    let biomarkerDetailsHtml = '';
-    let detailsSectionHTML = '';
-    let shouldShowSectionTitle = false;
-
-    data.panels.forEach((panel, counter) => {
-        /* Biomarker details template */
-        biomarkerDetailsHtml = renderBiomarkerDetails(panel, isRtl, counter);
-
-        /* Panel details template */
-        let checkShowInDetailsView = panel.biomarkers?.some(biomarker => biomarker.showInDetailsView);
-
-        if (panel.biomarkers && checkShowInDetailsView) {
-            shouldShowSectionTitle = true;
-            detailsSectionHTML += renderPanelDetails(panel, biomarkerDetailsHtml, counter, isRtl);
-        }
-    });
-
-    return detailsSectionHTML;
-}
-
-function renderReportItems(items, isCompactView = false, isRtl = false, isRectified = false, isAllergyItem = false, allergyClasses = [], forPatient = false) {
-    let content = '';
-    let counter = 0;
-    let itemCounter = 0;
-
-    items.forEach((dashboardItem, index) => {
-        let nestingLevel = dashboardItem.nestingLevel;
-
-        if (isAllergyItem) {
-            if (itemCounter === 0) {
-                itemCounter++;
-                return;
-            }
-            if (nestingLevel > 0) {
-                nestingLevel -= 1;
-            }
-        }
-
-        let showInCompactView = dashboardItem.showInCompactView || false;
-        let showInDetailsView = dashboardItem.showInDetailsView || false;
-
-        if (dashboardItem.biomarker || (dashboardItem.panel && dashboardItem.panel.panelBiomarker)) {
-            let bio = dashboardItem.biomarker || dashboardItem.panel.panelBiomarker;
-            counter++;
-            let indentationStyle = nestingLevel > 0 ? `margin-left:${nestingLevel * INDENTATION.BIOMARKER_DETAILS}px` : '';
-
-            let biomarkerContent = isAllergyItem
-                ? renderAllergyBiomarker(bio, nestingLevel, dashboardItem.isChildBiomarker, isCompactView, false, isRtl, showInDetailsView, isRectified, allergyClasses, forPatient)
-                : renderBiomarkerV3(bio, nestingLevel, dashboardItem.isChildBiomarker, isCompactView, false, isRtl, showInDetailsView, isRectified);
-
-            if (counter > 1 && !isCompactView && biomarkerContent) {
-                content += '<hr class="biomarker-container-line b">';
-            }
-            content += biomarkerContent;
-        } else if (dashboardItem.panel && !dashboardItem.panel.panelBiomarker && showInCompactView && isCompactView) {
-            content += renderPanelV3(dashboardItem.panel, nestingLevel, isCompactView, itemCounter, isRectified, isAllergyItem);
-        } else if (dashboardItem.panel && !dashboardItem.panel.panelBiomarker && showInDetailsView && !isCompactView) {
-            counter = 0;
-            content += renderPanelV3(dashboardItem.panel, nestingLevel, isCompactView, itemCounter, isRectified, isAllergyItem);
-        } else if (dashboardItem.insight && dashboardItem.showInDetailsView && !isCompactView) {
-            content += renderOneInsight(dashboardItem.insight, nestingLevel, isRtl);
-        } else if (dashboardItem.biomarkerAttachment) {
-            content += renderAttachmentsV3(dashboardItem.biomarkerAttachment, nestingLevel);
-        } else if (dashboardItem.biomarkerDetailsList) {
-            content += renderDetailsListV3(dashboardItem.biomarkerDetailsList, nestingLevel, isCompactView);
-        } else if (dashboardItem.biomarkerNote) {
-            content += renderNoteV3(dashboardItem.biomarkerNote, nestingLevel, isCompactView, showInCompactView, showInDetailsView);
-        }
-        itemCounter++;
-    });
-
-    return content;
-}
-
-function renderBiomarkerV3(biomarker, nestingLevel, isChildBiomarker, isCompactView, isComponent = false, isRtl = false, showInDetailsView = true, isRectified = false) {
-    let biomarkerCssId = `biomarker-${("db" + String(biomarker?.id ?? "")).toLowerCase()}${Math.floor(Math.random() * 3)}`;
-    let newBiomarkerHtml = '';
-    let biomarkerClass = '';
-    let biomarkerParentValueStyle = '';
-    let indentationStyle = '';
-
-    if (isCompactView && biomarker.showInCompactView) {
-        let biomarkerName = biomarker.fullName || '';
-        let biomarkerUnit = biomarker.unit;
-        let biomarkerValue = biomarker.formattedValue || biomarker.lingualReading || '';
-        let rangePlaceholder = '';
-        let referenceRange = '';
-        let biomarkerLast = '-';
-        let biomarkerPast = '-';
-
-        if (shouldRenderReadingLevels(biomarker)) {
-            rangePlaceholder = convertToMiniRangeLayout(biomarker.ranges, biomarker, isRtl);
-        }
-
-        if (biomarker.showScale) {
-            let normalRangeObject = biomarker.ranges.find(range => range.isReference) || {};
-            let formattedNormalRangeMin = normalRangeObject.formattedMinValue || null;
-            let formattedNormalRangeMax = normalRangeObject.formattedMaxValue || null;
-            referenceRange = biomarker.ranges.length > 1 ? getRange(biomarker) : '';
-        }
-
-        if (biomarker.color && !biomarker.isNormal) {
-            biomarkerClass = 'risk';
-            biomarkerParentValueStyle = `color:${biomarker.color};`;
-        }
-
-        if (nestingLevel > 0) {
-            let extraPadding = ((nestingLevel + 10 % 10) + 1);
-            let levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS;
-            indentationStyle = `padding-left: ${levelNesting}px`;
-        }
-
-        if (biomarker.history && biomarker.history.length > 1) {
-            let lastBiomarkerIndex = biomarker.history.length - 2;
-            biomarkerLast = biomarker.history[lastBiomarkerIndex]?.formattedValue || 0;
-            biomarkerPast = biomarker.history[lastBiomarkerIndex]?.formattedDate || '-';
-        }
-
-        if (biomarkerValue.length > 35) {
-            biomarkerParentValueStyle += "font-size:12px;line-height:1";
-        }
-
-        let firstTdWidth = '';
-        let tdWidth = '';
-        if (isCompactView) {
-            let fullPanelWidth = INDENTATION.PAGE_WIDTH;
-            let tdCount = 7;
-            let RectifiedTd = isRectified ? 32 : 0;
-            tdWidth = (fullPanelWidth - RectifiedTd) / tdCount;
-            firstTdWidth = `${tdWidth * 2}px`;
-        }
-
-        let biomarkerNameAlign = isRtl ? 'text-align: right;' : '';
-        const RTL_FLAG = '\u200E';
-
-        let isValueNumber = !isNaN(Number(biomarkerValue.replace(/\r\n/g, "<br/>")));
-        let valueDataType = isValueNumber ? "number" : "string";
-        let cleanBioMarkerUnit =
-            biomarkerUnit
-                .replace(/[\u200E\u200F\u202A-\u202E]/g, '')
-                .replace(/\(/g, '&#x28;')
-                .replace(/\)/g, '&#x29;');
-
-        newBiomarkerHtml += `<table id="${biomarkerCssId}" style="width:100%; margin: 0 auto;" class="biomarker-block biomarker-block-row ${biomarkerClass}">
-            <tr>
-                <td style="width:${firstTdWidth}">
-                    <div class="biom-title name" style="direction: ltr;${biomarkerNameAlign}${indentationStyle}">${biomarkerName}</div>
-                    <div class="biom-method method"></div>
-                </td>
-                <td class="biom-value value" style="width:max-content;">
-                    <span class="biom-parent-value value-text"  data-type="${valueDataType}" style="${biomarkerParentValueStyle}">${biomarkerValue.replace(/\r\n/g, "<br/>")}</span>
-                </td>
-                ${biomarkerUnit ?
-            `<td class="biom-unit unit">
-                <div class="biom-parent-unit unit-text" style="padding: 0 6px; font-family: 'Open Sans', sans-serif !important; direction: ltr !important; unicode-bidi: isolate !important;" dir="ltr">
-                   ${cleanBioMarkerUnit}
-                    </div>
-                </td>` : ''}
-                ${rangePlaceholder ? `<td class="biom-bar listing" style="width:${tdWidth}px; margin: 0;"><div class="range-placeholder b">${rangePlaceholder}</div></td>` : ''}
-                <td class="biom-range biom-range-data" style="width:${tdWidth}px; margin: 0;"><div class="parent-reference-range range">${referenceRange}</div></td>
-            </tr>
-        </table>`;
-    }
-    // ${isRtl ?RTL_FLAG+cleanBioMarkerUnit:cleanBioMarkerUnit}
-    if (!isCompactView && showInDetailsView) {
-        newBiomarkerHtml += renderOneBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent);
-    }
-
-    if (biomarker.components && biomarker.components.length > 0) {
-        biomarker.components.forEach(comp => {
-            comp.showInDetailsView = biomarker.showInDetailsView;
-            comp.showInCompactView = biomarker.showInCompactView;
-            comp.formattedNormalRangeMin = comp.min;
-            comp.formattedNormalRangeMax = comp.max;
-            newBiomarkerHtml += renderBiomarkerV3(comp, nestingLevel, isChildBiomarker, isCompactView, true, isRtl, showInDetailsView, isRectified);
-        });
-    }
-
-    if ((isCompactView && biomarker.showInCompactView) || (!isCompactView && biomarker.showInDetailsView)) {
-        if (biomarker.notes && biomarker.notes.length > 0) {
-            let BioNoteStyle = '';
-            if (nestingLevel > 0) {
-                let extraPadding = ((nestingLevel + 10 % 10) + 1);
-                let paddingLeft = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS + 8;
-                BioNoteStyle = isRtl ? `padding-right:${paddingLeft}px` : `padding-left:${paddingLeft}px`;
-            }
-            let notesPadding = isRtl ? 'padding: 0px 16px 10px 0px;' : 'padding: 0px 0px 10px 16px;';
-            let classNote = !isCompactView ? 'note-margin-bottom' : '';
-            if (useMonospace) {
-                const monoStyle = `font-style: normal; font-size: 13px; color: #333; font-family: 'Roboto Mono', monospace; white-space: pre-wrap; overflow-x: auto;`;
-                newBiomarkerHtml += `<div class="biomarker-notes 2 ${classNote}" style="${notesPadding} ${BioNoteStyle}"><span style="${monoStyle}">${biomarker.notes.join('<br/>')}</span></div>`;
-            } else {
-                newBiomarkerHtml += `<div class="biomarker-notes 2 ${classNote}" style="color: #8F8F92; ${notesPadding} ${BioNoteStyle}">${biomarker.notes.join('<br/>')}</div>`;
-            }
-        }
-    }
-
-    return newBiomarkerHtml;
-}
-
-function renderPanelV3(panel, nestingLevel, isCompactView, counter = null, isRectified = false, isAllergyItem = false) {
-
-
-    const panelCssId = `panel-${panel.panelId}db${Math.floor(Math.random() * 3)}`;
-    const notes = panel.notes ? panel.notes.join('') : '';
-    let classPanel = '';
-    if (panel.doctorNotes && isCompactView) {
-        classPanel = 'panel-with-notes';
-    }
-    let panelWidth = isCompactView ? 'width:687px' : '';
-    const colspan = isCompactView ? '1' : '4';
-    const doctorNotesCompactView = panel.doctorNotes && isCompactView
-        ? `<div class="section-content">${renderDoctorNotesCompactView(panel.doctorNotes, nestingLevel)}</div>`
-        : '';
-    const doctorNotesDetailsView = panel.doctorNotes && !isCompactView
-        ? `<div class="section-content-details-view">${renderDoctorNotes(panel.doctorNotes, nestingLevel)}</div>`
-        : '';
-    let newBiomarkerHtml = '';
-    let panelClass = '';
-    if (counter === 0 && !isCompactView) {
-        panelClass = "first-panel";
-    }
-
-    newBiomarkerHtml += `<!--panel-->
-                        <div id="${panelCssId}" class="section panel dontend ${panelClass}">`;
-
-    let panelNesting = "margin-left: auto;";
-    let panelTitleFontSize = '';
-    if (nestingLevel > 0) {
-        const extraPadding = ((nestingLevel + 10 % 10) + 1);
-        const levelNesting = extraPadding + nestingLevel * INDENTATION.PANEL_TITLE;
-        panelWidth = INDENTATION.PAGE_WIDTH - levelNesting;
-        panelNesting = `margin-left: ${levelNesting}px;width: ${panelWidth}px;`;
-        panelTitleFontSize = 'font-size:18px';
-    }
-
-    let firstTdWidth = '';
-    const RectifiedTd = isRectified ? 32 : 0;
-    let tdWidth = 0; // Declare tdWidth here to make it accessible outside the if block
-    if (isCompactView) {
-        const fullPanelWidth = INDENTATION.PAGE_WIDTH;
-        const tdCount = 7;
-
-        tdWidth = (fullPanelWidth - RectifiedTd) / tdCount;
-        firstTdWidth = `${tdWidth * 2}px`;
-    }
-
-    newBiomarkerHtml += `<div class="section-content-header ${classPanel}">
-                        <div class="panel-title" style="box-sizing: border-box; ${panelNesting}">
-                            <table style="width:100%; margin: 0 auto;" class="biomarker-block panel-section-header-new">
-                                <tr>`;
-
-    let allergyItemPanelClass = '';
-    if (isAllergyItem && isAllergyItem) {
-        allergyItemPanelClass = 'allergy-panel';
-        if (panel.icon) {
-            newBiomarkerHtml += `<td class="panel-icon-container">
-                                <img src="${panel.icon}"/>
-                                </td>`;
-        }
-    }
-
-    newBiomarkerHtml += `<td colspan="${colspan}" style="width:${firstTdWidth}">
-                        <div class="panel-title-text ${allergyItemPanelClass}" style="${panelTitleFontSize}">${panel.name}</div>
-                        ${doctorNotesCompactView}`;
-
-    if (notes) {
-        newBiomarkerHtml += `<div class="panel-notes">${notes}</div>`;
-    }
-
-    newBiomarkerHtml += `</td>`;
-
-    if (isCompactView) {
-        newBiomarkerHtml += `<td class="biom-range" style="width:${tdWidth}px; margin: 0;">
-                            ${localeService.t('Reference range')}
-                            </td>
-                        
-                            `;
-        if (isRectified) {
-            newBiomarkerHtml += `<td class="biom-past" style="width:${RectifiedTd}px"></td>`;
-        }
-    }
-
-    newBiomarkerHtml += `</tr></table>
-                        </div>
-                        </div>
-                        ${doctorNotesDetailsView}
-                        <!--panel END-->`;
-
-    return newBiomarkerHtml;
-}
-
-function renderAttachmentsV3(attachment, nestingLevel) {
-    if (!attachment) return '';
-
-    let blockStyle = '';
-    if (nestingLevel > 0) {
-        let extraPadding = ((nestingLevel + 10 % 10) + 1);
-        let levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS;
-        blockStyle = `padding-left: ${levelNesting}px`;
-    }
-
-    let ext = attachment.split(';');
-    if (ext[0].toLowerCase() === "data:application/pdf") {
-        return '';
-    } else {
-        let pos = attachment.indexOf(';');
-        let type = attachment.substring(0, pos).split(';');
-        if (type[0].includes('svg')) {
-            return `<div style="${blockStyle}" class="biomarker-attachment-item">${attachment}</div>`;
-        } else {
-            return `<img ${nestingLevel} style="${blockStyle};max-width:320px" class="biomarker-attachment-item" src="${attachment}" />`;
-        }
-    }
-}
-
-function renderDetailsListV3(detailsList, nestingLevel, isCompactView) {
-    let maxRowLength = -1;
-    let content = '';
-    let itemsCount = detailsList.map(item => item.length);
-    let colspanColumn = Math.max(...itemsCount);
-
-    detailsList.forEach(row => {
-        content += "<tr>";
-        row.forEach(item => {
-            let colspan = row.length === 1 ? colspanColumn : 1;
-            content += `<td colspan="${colspan}">${item}</td>`;
-        });
-
-        if (row.length > maxRowLength) {
-            maxRowLength = row.length;
-        }
-
-        if (row.length < maxRowLength) {
-            content += (row.length < colspanColumn && row.length !== 1) ? fillEmptyCellsWith(maxRowLength - row.length) : '';
-        }
-        content += "</tr>";
-    });
-
-    let blockStyle = '';
-    let plusPadding = isCompactView ? 8 : 18;
-    if (nestingLevel > 0) {
-        let extraPadding = ((nestingLevel + 10 % 10) + 1);
-        let levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS + plusPadding;
-        blockStyle = `padding-left: ${levelNesting}px`;
-    }
-
-    return `<div style="${blockStyle}" class="biomarker-details-table" style="padding:0 ${plusPadding}px"><table>${content}</table></div>`;
-}
-
-function renderNoteV3(note, nestingLevel, isCompactView, showInCompactView, showInDetailsView) {
-    // Standalone biomarkerNote items duplicate the note already rendered inside
-    // renderBiomarkerV3 (biomarker.notes), so they are intentionally suppressed
-    // here to avoid every note appearing twice. Monospace styling for PHA is
-    // handled where biomarker.notes is rendered.
-    return '';
-}
-
-function renderAllergyClasses(allergyClasses, isRtl = false) {
-    let count = allergyClasses.length;
-    let tableFloat = isRtl ? 'float: left;' : 'float: right;';
-    let unitAlign = isRtl ? 'text-align: left;right: 0;' : 'text-align: right;left: 0;';
-    let content = `<div class="allergy-classes-container">
-                        <span class="allergy-classes-unit" style="${unitAlign}">kU/L</span>
-                        <table class="allergy-classes-table colored" width="100%" cellspacing="0" cellpadding="0" style="${tableFloat}">
-                            <tr><td colspan="${count}" class="allergy-classes-table-title">${localeService.t('Allergy Reaction Strength')}</td></tr>`;
-
-    let tr1 = '<tr>';
-    let tr2 = '<tr>';
-
-    allergyClasses.forEach(classItem => {
-        let formattedMinValue = classItem.formattedMinValue;
-        let formattedMaxValue = classItem.formattedMaxValue;
-        let range = '';
-
-        if (!formattedMinValue && formattedMaxValue) {
-            range = `< ${formattedMaxValue}`;
-        }
-        if (formattedMinValue && formattedMaxValue) {
-            range = `${formattedMinValue} - ${formattedMaxValue}`;
-        }
-        if (formattedMinValue && !formattedMaxValue) {
-            range = `> ${formattedMinValue}`;
-        }
-
-        tr1 += `<td style="color:${classItem.color}">${classItem.className}</td>`;
-        tr2 += `<td style="color:${classItem.color}">${classItem.lingualReading}<br/>${range}</td>`;
-    });
-
-    tr1 += '</tr>';
-    tr2 += '</tr>';
-
-    content += tr1 + tr2 + '</table></div>';
-    return content;
-}
-
-function renderAllergyBiomarker(biomarker, nestingLevel, isChildBiomarker, isCompactView, isComponent = false, isRtl = false, showInDetailsView = true, isRectified = false, allergyClasses = [], forPatient = true) {
-    let newBiomarkerHtml = '';
-
-    if (!isCompactView && showInDetailsView) {
-        newBiomarkerHtml += renderOneAllergyBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent, allergyClasses, forPatient);
-    }
-
-    // Render its values inside components element
-    if (biomarker.components && biomarker.components.length > 0) {
-        biomarker.components.forEach(comp => {
-            comp.showInDetailsView = biomarker.showInDetailsView;
-            comp.showInCompactView = biomarker.showInCompactView;
-            comp.formattedNormalRangeMin = comp.min;
-            comp.formattedNormalRangeMax = comp.max;
-            newBiomarkerHtml += renderAllergyBiomarker(comp, nestingLevel, isChildBiomarker, isCompactView, true, isRtl, showInDetailsView, isRectified, allergyClasses, forPatient);
-        });
-    }
-
-    return newBiomarkerHtml;
-}
-
-function renderOneAllergyBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent, allergyClasses, forPatient) {
-    const INDENTATION = {
-        BIOMARKER_DETAILS: 20, // Example value, replace with actual value
-        PANEL_TITLE: 10 // Example value, replace with actual value
-    };
-
-    let biomarkerDetailsHtml = '';
-    if (biomarker.showInDetailsView === true) {
-        const biomarkerCssId = "dtl-bio-db" + String(biomarker?.id ?? "").toLowerCase();
-        let customBiomarkerValueFontSize = '';
-        const formattedValue = biomarker.formattedValue.replace(/,/g, "");
-        if (formattedValue.length > 35) {
-            customBiomarkerValueFontSize = 'font-size:12px;';
-        }
-        const biomarkerName = biomarker.name || '';
-        const biomarkerStatus = biomarker.status || '';
-        const insightsCount = biomarker.insightsCount || '';
-        let CircleStyles = '';
-        if (!isComponent) {
-            CircleStyles = GetBiomarkerCircleStyle(biomarker.color, biomarkerName, biomarkerStatus, insightsCount, '', false);
-        }
-
-        // indent biomarker details based on panel level
-        let firstGridColClass = 'size5';
-        let bioIndentStyle = '';
-        let bioIndentNoteStyle = '';
-        if (nestingLevel > 0) {
-            // replace classes
-            // increase biomarker part
-            firstGridColClass = 'size5';
-            const extraPadding = ((nestingLevel + 10 % 10) + 1);
-            const levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS;
-            const levelNestingNote = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS + 16;
-            bioIndentStyle = 'padding-left: ' + levelNesting + 'px;';
-            bioIndentNoteStyle = 'padding-left: ' + levelNestingNote + 'px';
-        }
-
-        // @note: IMC special case (large biomarker value)
-        let biomarkerClass = '';
-        if (biomarker.formattedValue.length >= 125) {
-            biomarkerClass = 'large-value-class';
-            firstGridColClass = '';
-            //$firstGridColstyle = 'width:100%';
-        }
-
-        const biomarkerValue = biomarker.formattedValue.replace(/\r\n/g, "<br/>");
-
-        if (!biomarker.showScale) {
-            biomarkerClass += ' hide-scale ';
-        }
-
-        const biomarkerColor = biomarker.color && !biomarker.isNormal ? "color:" + biomarker.color + ";" : "";
-        let rangesPlaceholder = "";
-        let currentRange = "";
-        let currentPercent = 25;
-        let biomarkerTitleClass = '';
-        if (biomarker.ranges.length > 1) {
-            biomarkerTitleClass = 'has-ranges';
-        } else {
-            biomarkerTitleClass = 'has-no-ranges';
-        }
-
-        let childRangesPlaceholder = "";
-        let childCurrentRange = "";
-        let heightCount = 1;
-        let bioValue = "";
-        let bioUnit = "";
-        let afterBioInfoValue = '';
-        let History = '';
-        if (biomarker.childrenBiomarkers && biomarker.childrenBiomarkers.length > 0) {
-            biomarker.childrenBiomarkers.forEach(bio => {
-                if (bio.ranges.length > 1) {
-                    heightCount++;
-                    /* viewing the biomarker and unit of children after the parent ones */
-                    bioValue = bio.formattedValue.replace(/\n/g, "<br />");
-                    let bioValue_style = "";
-                    if (bioValue.length > 33) {
-                        bioValue_style = "font-size:12px;";
-                    }
-                    bioUnit = bio.unit;
-                    childCurrentRange = '';
-                    /* generating the children ranges and display them under the parent ones */
-                    childRangesPlaceholder += '<div class="extra-range-placeholder">'
-                        + convertToRangeLayout(bio.ranges, bio, isRtl)
-                        + '</div>';
-                    biomarkerTitleClass = 'has-ranges';
-                    afterBioInfoValue += '<div class="colorable pair">'
-                        + '<span class="biomarker-extra-value" style="' + bioValue_style + '">' + bioValue + '</span>'
-                        + '<span class="biomarker-extra-unit">' + bioUnit + '</span>'
-                        + '</div>';
-                } else {
-                    biomarkerTitleClass = 'has-no-ranges';
-                }
-                /*
-                $History = renderBiomarkerHistoryChart($bio);
-                */
-            });
-        } else {
-            /*
-            $History = renderBiomarkerHistoryChart($biomarker);
-            */
-        }
-
-        if (heightCount > 1) {
-            biomarkerClass += 'hide-flag';
-        }
-
-        /* set biomarker history chart */
-
-        const biomarkerFullName = biomarker.fullName || '';
-        let bioName = biomarkerFullName.replace(/\r\n/g, '');
-        bioName = bioName.replace(/\n/g, '');
-        const rangePlaceHolder = convertToRangeLayout(biomarker.ranges, biomarker, isRtl);
-        let biomarkerSampleHTML = '';
-        let biomInfoStyle = '';
-        let biomValueAlignStyle = '';
-        if (biomarker.sample) {
-            biomarkerSampleHTML += '<div class="biom-sample">'
-                + '<span class="biom-sample-value">'
-                + biomarker.sample
-                + '</span>'
-                + '</div>';
-            //	$biomValueAlignStyle = "vertical-align: bottom;";
-        }
-        if (!biomarker.sample && (rangePlaceHolder || childRangesPlaceholder || History)) {
-            biomInfoStyle = "margin-top:15px;";
-        }
-
-        // Configurations
-        let biomarkerScale = '';
-        if (isChildBiomarker) {
-            //	$biomarkerScale = 'transform:scale(.9);';
-        }
-        let biomCircleCss = '';
-        if (isComponent) {
-            biomCircleCss = 'opacity: 0;';
-            biomarkerSampleHTML = '';
-            bioName = '';
-        }
-        let panelNesting = '';
-        let biomarkerTitleWidth = 'width:260px';
-        if (nestingLevel > 0) {
-            const extraPadding = ((nestingLevel + 10 % 10) + 1);
-            const levelNesting = extraPadding + nestingLevel * INDENTATION.PANEL_TITLE;
-            panelNesting = isRtl ? 'padding-right: ' + levelNesting + 'px;box-sizing:border-box;' : 'padding-left: ' + levelNesting + 'px;box-sizing:border-box;';
-            const width = 260 - levelNesting;
-            biomarkerTitleWidth = 'width:' + width + 'px';
-        }
-
-        if (!rangePlaceHolder && !childRangesPlaceholder && !History) {
-            biomarkerScale += 'width:100%;';
-        }
-        const doctorNotesArr = biomarker.doctorNotes || [];
-        const doctorNotes = renderDoctorNotes(doctorNotesArr, bioIndentNoteStyle);
-
-        biomarkerDetailsHtml += '<div data-id="' + biomarkerCssId + '" class="allergy-biomarker-container biomarker-container grid-col ' + biomarkerClass + '">'
-            + '<!--panel title was her in the first biomarker -->'
-            + '<div class="grid-col ' + firstGridColClass + ' ' + biomarkerClass + '" style="' + biomarkerScale + panelNesting + '">'
-            + '<div class="biomarker">'
-            + '<div class="biom-circle" style="' + removeWhiteSpace(CircleStyles) + ';' + biomCircleCss + '">' + biomarkerName + '</div>'
-            + '<div class="biom-info ' + biomarkerTitleClass + '" style="' + biomInfoStyle + '">'
-            + '<div class="title ' + biomarkerTitleClass + '" style="' + biomarkerTitleWidth + '">' + biomarkerSampleHTML + '<span class="bio-name-info a" style="color: #555558;">' + bioName + '</span></div>'
-            + '<div class="value colorable" style="' + biomValueAlignStyle + '">'
-            + biomarkerSampleHTML
-            + '<div class="pair parent-pair">'
-            + '<span class="value-text">'
-            + '<span style="' + customBiomarkerValueFontSize + biomarkerColor + '">' + biomarkerValue + '</span>'
-            + '</span>'
-            + '<span class="unit colorable">' + biomarker.unit + '</span>'
-            + '</div>'
-            + '</div>'
-            + afterBioInfoValue
-            + '</div>'
-            + '</div>';
-
-        if (doctorNotes) {
-            biomarkerDetailsHtml += '<div class="grid-row biomarker-insights a">'
-                + doctorNotes
-                + '</div>';
-        }
-
-        if (biomarker.notes && biomarker.notes.length > 0) {
-            if (nestingLevel > 0) {
-                // $extraPadding = (($nestingLevel + 10 % 10) + 1);
-                // $levelNesting = $extraPadding + $nestingLevel * $INDENTATION['BIOMARKER_DETAILS'] + 5;
-                // $bioIndentStyle = 'padding-left: ' . $levelNesting . 'px;';
-            }
-            bioIndentStyle = isRtl ? 'padding-right: 16px;' : 'padding-left: 16px;';
-
-            if (useMonospace) {
-                const monoStyle = `font-style: normal; font-size: 13px; color: #333; font-family: 'Roboto Mono', monospace; white-space: pre-wrap; overflow-x: auto;`;
-                biomarkerDetailsHtml += '<div class="biomarker-notes 1" style="padding-top: 10px;' + bioIndentStyle + '">';
-                biomarkerDetailsHtml += `<span style="${monoStyle}">` + biomarker.notes.join('<br/>') + '</span>';
-                biomarkerDetailsHtml += '</div>';
-            } else {
-                biomarkerDetailsHtml += '<div class="biomarker-notes 1" style="color: #8F8F92;padding-top: 10px;' + bioIndentStyle + '">';
-                biomarkerDetailsHtml += biomarker.notes.join('<br/>');
-                biomarkerDetailsHtml += '</div>';
-            }
-        }
-        biomarkerDetailsHtml += '</div> <!-- end first col -->';
-
-        if (allergyClasses) {
-            const rangeIndex = biomarker.rangeIndex;
-            biomarkerDetailsHtml += '<table class="allergy-classes-table" width="100%" cellspacing="0" cellpadding="0" range="' + rangeIndex + '">';
-
-            let tr1 = '<tr>';
-
-            allergyClasses.forEach((cls, index) => {  // Renamed 'class' to 'cls' to avoid conflict
-                const formattedMinValue = cls.formattedMinValue;
-                const formattedMaxValue = cls.formattedMaxValue;
-                let range = '';
-
-                if (!formattedMinValue && formattedMaxValue) {
-                    range = `< ${formattedMaxValue}`;
-                } else if (formattedMinValue && formattedMaxValue) {
-                    range = `${formattedMinValue} - ${formattedMaxValue}`;
-                } else if (formattedMinValue && !formattedMaxValue) {
-                    range = `> ${formattedMinValue}`;
-                }
-
-                let value = '';
-
-                if (index === rangeIndex) {
-                    let currentRange = biomarker.ranges[rangeIndex];
-                    let currentPercent = 0;
-
-                    if (currentRange.minValue !== undefined && currentRange.maxValue !== undefined) {
-                        currentPercent = ((parseFloat(biomarker.value) - currentRange.minValue) / (currentRange.maxValue - currentRange.minValue)) * 100;
-                    }
-
-                    currentPercent = Math.max(8, Math.min(77, currentPercent)); // Ensures percent is between 8 and 77
-                    const imagePlace = isRtl ? `right: ${currentPercent}%` : `left: ${currentPercent}%`;
-
-                    value = `<span index="${rangeIndex}" class="colored-value" patient="${forPatient}" style="background:${cls.color}">`;
-
-                    if (!forPatient) {
-                        value += biomarker.formattedValue;
-                    } else {
-                        value += `<span style="${imagePlace}" class="white-circle"></span>`;
-                    }
-
-                    value += `</span>`;
-                }
-
-                tr1 += `<td>${value}</td>`;
-            });
-            allergyClasses.forEach((cls, index) => {  // Renamed 'class' to 'cls' to avoid conflict
-                const formattedMinValue = cls.formattedMinValue;
-                const formattedMaxValue = cls.formattedMaxValue;
-                let range = '';
-
-                if (!formattedMinValue && formattedMaxValue) {
-                    range = `< ${formattedMaxValue}`;
-                } else if (formattedMinValue && formattedMaxValue) {
-                    range = `${formattedMinValue} - ${formattedMaxValue}`;
-                } else if (formattedMinValue && !formattedMaxValue) {
-                    range = `> ${formattedMinValue}`;
-                }
-
-                let value = '';
-
-                if (index === rangeIndex) {
-                    let currentRange = biomarker.ranges[rangeIndex];
-                    let currentPercent = 0;
-
-                    if (currentRange.minValue !== undefined && currentRange.maxValue !== undefined) {
-                        currentPercent = ((parseFloat(biomarker.value) - currentRange.minValue) / (currentRange.maxValue - currentRange.minValue)) * 100;
-                    }
-
-                    currentPercent = Math.max(8, Math.min(77, currentPercent)); // Ensures percent is between 8 and 77
-                    const imagePlace = isRtl ? `right: ${currentPercent}%` : `left: ${currentPercent}%`;
-
-                    value = `<span index="${rangeIndex}" class="colored-value" patient="${forPatient}" style="background:${cls.color}">`;
-
-                    if (!forPatient) {
-                        value += biomarker.formattedValue;
-                    } else {
-                        value += `<span style="${imagePlace}" class="white-circle"></span>`;
-                    }
-
-                    value += `</span>`;
-                }
-
-                tr1 += `<td>${value}</td>`;
-            });
-
-            tr1 += '</tr>';
-            biomarkerDetailsHtml += tr1 + '</table>';
-        }
-
-        biomarkerDetailsHtml += '</div> <!-- end first  close biomarker-container-->';
-    }
-    return biomarkerDetailsHtml;
-}
-
-// Helper functions (assuming they exist in your code)
-function GetBiomarkerCircleStyle(BiomarkerColor, BiomarkerName, BiomarkerStatus, BiomarkerInsightsCount, PanelName, isSummary, item = []) {
-    let CircleStyles = '';
-    let fontSize = BiomarkerName && BiomarkerName.length > 6 ? '12px' : '14px';
-    let color = BiomarkerColor || "#555555";
-    let BioColor = BiomarkerColor || "#E05A5A";
-    let backgroundColor = BioColor ? 'transparent' : "#E05A5A30";
-
-    if (isSummary) {
-        CircleStyles = `background-color: ${backgroundColor}; border: 2px solid ${BioColor}; color: ${color}; font-size: ${fontSize};`;
-    } else {
-        BioColor = BiomarkerColor || "#555555";
-        CircleStyles = `background-color: transparent; border: 2px solid ${BioColor}; color: ${color}; font-size: ${fontSize};`;
-    }
-
-    if ((BiomarkerInsightsCount !== undefined && BiomarkerStatus !== undefined) || BiomarkerInsightsCount === null || BiomarkerStatus === null) {
-        backgroundColor = (BiomarkerInsightsCount || PanelName.toLowerCase() === 'health risk calculators') ? BiomarkerColor : "transparent";
-        let BiomarkerBorder = (BiomarkerInsightsCount || PanelName.toLowerCase() === 'health risk calculators') ? `2px solid ${BiomarkerColor}` : `2px solid ${BiomarkerColor}`;
-        color = BiomarkerInsightsCount ? "#ffffff" : BiomarkerColor;
-        fontSize = BiomarkerName && PanelName.toLowerCase().length > 6 ? "12px" : "14px";
-
-        CircleStyles = `background-color: ${backgroundColor}; border: ${BiomarkerBorder}; color: ${color}; font-size: ${fontSize};`;
-
-        if (BiomarkerStatus !== 1 && BiomarkerStatus !== "1") {
-            fontSize = BiomarkerName && BiomarkerName.length > 7 ? "12px" : "14px";
-            CircleStyles = `background-color: transparent; border: 2px solid rgba(0,0,0,.4); color: rgba(0,0,0,.4); font-size: ${fontSize};`;
-        }
-    }
-    return CircleStyles;
-}
-
-function convertToRangeLayout(ranges, biomarker, isRtl) {
-
-    let barHTML = '';
-    if (ranges.length > 1) {
-        barHTML += '<table>';
-        let tr1 = '<tr class="ranges">';
-        let tr2 = '<tr class="labels">';
-        let tr3 = '<tr class="values">';
-        let currentPercent = 50;
-        let currentRange = "";
-
-        ranges.forEach(range => {
-            let isCurrentClass = range.isCurrent ? "current" : "";
-            let labelClass = range.isCurrent ? 'colorable' : "";
-            let rangeTitle = '';
-            let rangeArrow = '';
-
-            if (range.isCurrent) {
-                currentRange = `${range.minValue} - ${range.maxValue}`;
-                if (range.minValue && range.maxValue) {
-                    currentPercent = (((parseFloat(biomarker.value) - range.minValue) / (range.maxValue - range.minValue)) * 100);
-                }
-                currentPercent = Math.min(90, currentPercent);
-                let imagePlace = isRtl ? `padding-right:${currentPercent}%` : `padding-left:${currentPercent}%`;
-                rangeArrow = `<img class="range-arrow-layout" style="${imagePlace}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAATBJREFUWAnNjgmOAjEQA/M0P90/23UhsdICw1w5uqSgIem2q7XWnPNT/ODYlFNdFMcHzm9VWdz+UL6qiuL2D+dfNVmc3lBuqoni9BHntoosLpsoL1VEcfmK87paFoddlInVojgcwplaJUv3YZTJVaJ0n8KZni1L52mUjdmidF7C2ZolS9dllM1ZonTdwtkeLUvHbZSE0aJ0dMFJGSVLdjeUpFGiZHfFSestS2Z3lMTeomQOwUntJUvWMJTkXqJkDcVJvytLxnCUhruiZEzBabkqy+40lKarouxOxWk7K8vOdJTGs6LsLMFpPSrL7DKU5qOizC7Fad+TZWY5isGeKDMlcCy2ZHkrg2KyJcpbKRybV1nuyqEYvYpyVxLH6inLd1kUs6co36Vx7DjlUQw5XfkFNeBu5tFKZ1EAAAAASUVORK5CYII="/>`;
-            }
-
-            rangeTitle = getRangeBar(biomarker, range, biomarker.normalRangeType);
-            let colorClass = color(range.color);
-            tr1 += `<td style="background-position-x:${currentPercent}%;" class="${colorClass} ${isCurrentClass}">${rangeArrow}<div class="range colorablebg" style="background:${colorClass}"></div></td>`;
-            tr2 += `<td class="${isCurrentClass} ${colorClass}"><span class="${labelClass}">${range.name}</span></td>`;
-            tr3 += `<td>${rangeTitle}</td>`;
-        });
-
-        barHTML += tr1 + '</tr>' + tr3 + '</tr>' + tr2 + '</tr>';
-        barHTML += '</table>';
-    }
-    return barHTML;
-}
-
-
-function removeWhiteSpace(html) {
-    html = html.replace(/\r\n/g, "");
-    return html.replace(/>\s+</g, "><");
-}
-
-function fetchFileContents(filePath) {
-    try {
-        return fs.readFileSync(filePath, 'utf8');
-    } catch (error) {
-        console.error('Error reading file:', error);
-        return null;
-    }
-}
-
-function parseTable(string) {
-    let levels = string.split("\n");
-    let list = levels.map(level => {
-        return {
-            id: random(2, 6),
-            content: level,
-            sepCount: separtorsNumbers(level)
-        };
-    });
-
-    let parent = list[0].sepCount;
-
-    for (let i = 0; i < list.length; i++) {
-        if (i === 0) {
-            list[i].parent_id = "0";
-            continue;
-        }
-
-        if (parent === list[i].sepCount) {
-            list[i].parent_id = "0";
-            continue;
-        }
-
-        if (list[i - 1]) {
-            if (list[i].sepCount > list[i - 1].sepCount) {
-                list[i].parent_id = list[i - 1].id;
-            } else if (list[i].sepCount === list[i - 1].sepCount) {
-                list[i].parent_id = list[i - 1].parent_id;
-            } else {
-                list[i].parent_id = findParentId(i - 1, list[i].sepCount, list);
-            }
-        }
-    }
-
-    return list_to_tree(list, "0");
-}
-
-function renderDetails(list, isRtl) {
-    if (list.length === 1 && !list[0].children) {
-        return `<li class="1">${list[0].content.substring(list[0].sepCount)}</li>`;
-    }
-
-    let columns = [];
-    let isParent = false;
-
-    list.forEach(child => {
-        if (child.parent_id === "0") isParent = true;
-        let div = '';
-
-        if (!child.children) {
-            let childContent = child.content.substring(child.sepCount);
-            childContent = childContent.replace('(', '(').replace(')', ')');
-
-            if (isRtl) {
-                // Optional RTL handling here
-            }
-
-            div = `<li class="2">${childContent}</li>`;
-        } else {
-            div = `<li class="arrow-icon">${child.content.substring(child.sepCount)}</li>
-                   <ul>${renderDetails(child.children, isRtl)}</ul>`;
-        }
-
-        if (div) columns.push(div);
-    });
-
-    return columns.length > 0 ? columns.join('') : null;
-}
-
-function GetRelatedBiomarker(biomarkerstyle, name, fullname) {
-    let fontSize = '';
-    if (name && fullname) {
-        if (name.length >= 7) {
-            fontSize = 'small-fontSize-circle';
-        }
-        return `<div class="related">
-                    <div class="bicon ${fontSize}" style="${biomarkerstyle}">
-                        <span class="bicon-inner">${name}</span>
-                    </div>
-                </div>`;
-    }
-    return null;
-}
-
-function color(hex) {
-    switch (hex) {
-        case "#E05A5A":
-            return "red";
-        case "#EE734E":
-            return "orange";
-        case "#41B9D6":
-            return "blue";
-        case "#F7AA2E":
-            return "yellow";
-        case "#BC2828":
-            return "dark-red";
-        case "#02D9D1":
-        case "#05B9AF":
-            return "green";
-        case "#0F0F0F":
-            return "black";
-        case "#87B7CE":
-            return "lightblue";
-        case "#FB7377":
-            return "light-red";
-        default:
-            return hex;
-    }
-}
-
-function getRangeBar(item, level, normalRangeType = '') {
-
-    let range = '';
-    let min = level.formattedMinValue;
-    let max = level.formattedMaxValue;
-
-    if (item.ranges && item.ranges.length > 0) {
-        let customBioWithTwoRangesAndNormalExist = false;
-        if (item.isCustom && item.ranges.length === 2) {
-            let normalRange = item.ranges.find(range => range.isReference);
-            if (normalRange) customBioWithTwoRangesAndNormalExist = true;
-        }
-
-        let rangeIndex = item.ranges.findIndex(range => range.isReference);
-
-        let readingLevels = item.ranges;
-        let prevItem = rangeIndex - 1;
-
-        if (max !== null || min !== null) {
-
-            if (level.isReference === true) {
-                switch (normalRangeType) {
-                    case 0 | "0":
-                        range = min !== null && max !== null ? `${min} - ${max}` : min === null ? `<= ${max}` : `>= ${min}`;
-
-                        if (prevItem >= 0 && readingLevels[prevItem]?.formattedMaxValue === min) {
-                            range = `> ${min}`;
-                        }
-                        break;
-                    case 1 | "1":
-                        range = `< ${max}`;
-                        break;
-                    case 2 | "2":
-                        range = `<= ${max}`;
-                        break;
-                    case 3 | "3":
-                        range = `> ${min}`;
-                        break;
-                    case 4 | "4":
-                        range = `>= ${min}`;
-                        break;
-                }
-            } else {
-                range = min !== null && max !== null ? `${min} - ${max}` : min === null ? `< ${max}` : `> ${min}`;
-                if (prevItem >= 0 && readingLevels[prevItem]?.formattedMaxValue === min) {
-                    range = `>= ${min}`;
-                    if (prevItem >= 0 && readingLevels[prevItem]?.formattedMaxValue === min) {
-                        range = `> ${min}`;
-                    }
-                }
-
-                if (customBioWithTwoRangesAndNormalExist) {
-                    switch (normalRangeType) {
-                        case "0":
-                            range = min !== null && max !== null ? `${min} - ${max}` : min === null ? `< ${max}` : `> ${min}`;
-                            break;
-                        case "1":
-                            range = min !== null ? `>= ${min}` : range;
-                            break;
-                        case "2":
-                            range = min !== null ? `> ${min}` : range;
-                            break;
-                        case "3":
-                            range = max !== null ? `<= ${max}` : range;
-                            break;
-                        case "4":
-                            range = max !== null ? `< ${max}` : range;
-                            break;
-                    }
-                }
-            }
-        }
-    }
-    return range;
-}
-
-function separtorsNumbers(string) {
-    let last = string.lastIndexOf('#');
-    let first = string.indexOf('#');
-
-    if (first !== -1 && first !== 0) {
-        return 0;
-    }
-
-    let subString = string.substring(first, last + 1);
-    let mySplits = subString.split('');
-    let isLevel = mySplits.every(char => char === "#");
-
-    return isLevel ? mySplits.length : separtorsNumbers(string.substring(first, last));
-}
-
-function shouldRenderReadingLevels(biomarker, isComponentItem = false) {
-    return biomarker && biomarker.ranges.length > 1 && (biomarker.showScale || isComponentItem);
-}
-
-function convertToMiniRangeLayout(ranges, biomarker, isRtl) {
-    let barHTML = '';
-
-    if (ranges.length > 0) {
-        barHTML += '<div class="bar">';
-        ranges.forEach(range => {
-            let colorClass = color(range.color);
-            let label = range.name;
-            let isCurrentClass = range.isCurrent ? "current" : "";
-            let rangeTitle = `${range.minValue} - ${range.maxValue}`;
-            let imgCurrent = '';
-
-            if (range.isCurrent) {
-                let currentRange = `${range.minValue} - ${range.maxValue}`;
-                let currentPercent = null;
-                if (range.minValue && range.maxValue) {
-                    currentPercent = (((parseFloat(biomarker.value) - range.minValue) / (range.maxValue - range.minValue)) * 100);
-                }
-                currentPercent = currentPercent / 2;
-                let imagePlace = currentPercent ? `left: ${currentPercent}%` : '';
-                if (isRtl) {
-                    imagePlace = currentPercent ? `right: ${currentPercent}%` : '';
-                }
-                imgCurrent = `<img style="${imagePlace}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhBAMAAAClyt9cAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA8ObIrYNJLyOprz29AAAAaUlEQVQoz2OgPyg1mmRagCzQMhMIpjQgBNgkZ4KAGEIkcyYEJMAEOCShIhIwEZaZUDAFJlI5EwZg1kXCRQKgIpZwEQOoiCZcRAEqMhMOJmCqwTQH0y5M92C4GdNfmH7HCB/MMMQMZ7oDAAe/ZbNL9bq2AAAAAElFTkSuQmCC" />`;
-            }
-            barHTML += `<div class="segment ${colorClass} ${isCurrentClass}" style="background:${colorClass}">${imgCurrent}</div>`;
-        });
-        barHTML += '</div>';
-    }
-    return barHTML;
-}
-
-function getRange(item, normalRangeKey = "isReference") {
-    let range = '';
-    if (item.ranges && item.ranges.length > 0) {
-        let itemValues = item.ranges.find(range => range[normalRangeKey] === true);
-        let rangeIndex = item.ranges.findIndex(range => range[normalRangeKey] === true);
-        let readingLevels = item.ranges;
-
-        let max = itemValues?.formattedMaxValue ?? null;
-        let min = itemValues?.formattedMinValue ?? null;
-        let normalRangeType = item.normalRangeType;
-        let prevItem = rangeIndex - 1;
-
-        if (max !== null || min !== null) {
-            if (max !== null && min !== null) {
-                range = `${min} - ${max}`;
-            } else if (max !== null) {
-                range = `< ${max}`;
-            } else if (min !== null) {
-                range = `> ${min}`;
-            }
-
-            switch (String(normalRangeType)) {
-                case "0":
-                    if (max !== null && min !== null) {
-                        range = `${min} - ${max}`;
-                    } else if (max !== null) {
-                        range = `<= ${max}`;
-                    } else if (min !== null) {
-                        range = `>= ${min}`;
-                    }
-                    break;
-                case "1":
-                    if (max !== null) range = `< ${max}`;
-                    break;
-                case "2":
-                    if (max !== null) range = `<= ${max}`;
-                    break;
-                case "3":
-                    if (min !== null) range = `> ${min}`;
-                    break;
-                case "4":
-                    if (min !== null) range = `>= ${min}`;
-                    break;
-            }
-        }
-    }
-    return range;
-}
-
-function find(array, key, value) {
-    for (let single of array) {
-        if (single[key] === value) {
-            return single;
-        }
-    }
-    return null;
-}
-
-function renderBiomarkerHistoryChart(biomarker) {
-    let content = '';
-    const history = biomarker.history && biomarker.history.length > 0 ? biomarker.history : [];
-
-    // Custom biomarker shouldn't have a chart
-    if (history.length > 1) {
-        const biomarkerCssChartId = "chart-bio-db" +
-            Math.random().toString(36).substring(2, 8) +
-            String(biomarker?.id ?? "").toLowerCase();
-        content += `<canvas id="${biomarkerCssChartId}" width="100%" height="30" class="chart-canvas"></canvas>`;
-        const dataset = [];
-        const dataColor = [];
-        const dataColorLabels = [];
-        const dataLabel = [];
-        const unit = [];
-        const dataFormattedValues = [];
-
-        history.forEach((item, index) => {
-            dataset[index] = parseInt(biomarker.type) ? parseFloat(item.value) : item.rangeIndex;
-            dataFormattedValues[index] = item.formattedValue;
-            dataColor[index] = item.color;
-            dataColorLabels[index] = item.color === "#E05A5A" ? item.color : "rgba(51,51,51, 0.8)";
-            dataLabel[index] = item.formattedDate;
-            unit[index] = item.unit;
-        });
-
-        const maxOfChart = Math.max(...dataset) + 0.5;
-        const differenceRange = Math.max(...dataset) - Math.min(...dataset);
-        let stepSizeNumber = 0.5;
-        if (differenceRange > 100) {
-            stepSizeNumber = 0;
-        }
-
-        content += `
-            <script>
-                $(document).ready(function() {
-                    function showChart() {
-                        const ctx = document.getElementById("${biomarkerCssChartId}").getContext("2d");
-                        new Chart(ctx, {
-                            type: "line",
-                            data: {
-                                labels: ${JSON.stringify(dataLabel)},
-                                datasets: [{
-                                    data: ${JSON.stringify(dataset)},
-                                    dataFormattedValues: ${JSON.stringify(dataFormattedValues)},
-                                    pointBorderColor: "transparent",
-                                    pointRadius: 6,
-                                    pointBorderWidth: 2,
-                                    lineTension: 0,
-                                    fill: false,
-                                    pointBackgroundColor: ${JSON.stringify(dataColor)},
-                                    fill: false
-                                }]
-                            },
-                            options: {
-                                layout: {
-                                    padding: {
-                                        top: 30,
-                                        bottom: 30,
-                                        left: 50,
-                                        right: 40
-                                    }
-                                },
-                                legend: {
-                                    display: false,
-                                    fontColor: "black"
-                                },
-                                tooltips: { enabled: false },
-                                plugins: {
-                                    datalabels: {
-                                        display: "block",
-                                        color: ${JSON.stringify(dataColorLabels)},
-                                        align: "top",
-                                        anchor: "end",
-                                        clamp: true,
-                                        clip: false,
-                                        font: {
-                                            lineHeight: 1.2,
-                                            size: 12,
-                                            style: "normal"
-                                        },
-                                        formatter: function(value, context) {
-                                            return " " + context.dataset.dataFormattedValues[context.dataIndex];
-                                        }
-                                    }
-                                },
-                                document: true,
-                                window: true,
-                                hover: false,
-                                beginAtZero: false,
-                                responsive: true,
-                                maintainAspectRatio: true,
-                                scales: {
-                                    yAxes: [{
-                                        ticks: {
-                                            suggestedMax: ${maxOfChart},
-                                            suggestedMin: 0,
-                                            stepSize: ${stepSizeNumber}
-                                        },
-                                        display: false
-                                    }],
-                                    xAxes: [{
-                                        gridLines: {
-                                            display: false
-                                        }
-                                    }]
-                                },
-                                animation: {
-                                    onComplete: function() {
-                                        window.JSREPORT_READY_TO_START = true;
-                                    }
-                                }
-                            }
-                        });
-                    }
-                    setTimeout(showChart, 200);
-                });
-            </script>
-        `;
-    }
-
-    return content;
-}
-
-
-module.exports = {
-    renderReportItems,
-    find,
-    renderSummary,
-    renderReportSummary,
-    renderHTMLTemplate,
-    renderAllergyClasses,
-    setUseMonospace,
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+const LocaleService = require('../app/services/localeService.js');
+const i18n = require('../app/i18n_wellbeing.config.js');
+fetchFileContents
+const fs = require("fs");
+const path = require('path');
+
+let useMonospace = false;
+function setUseMonospace(val) { useMonospace = val; }
+const INDENTATION = {
+    PANEL_TITLE: 12,
+    BIOMARKER_DETAILS: 12,
+    INSIGHT: 12,
+    PAGE_WIDTH: 794
+};
+var localeService = new LocaleService(i18n);
+
+
+function renderHTMLTemplate(html, isRtl, data, isIMCLab, lang = 'en') {
+    let dir = isRtl ? 'rtl' : 'ltr';
+    let language = isRtl ? 'ar' : 'en';
+    let IMCclass = isIMCLab ? 'imc-lab' : '';
+    let styles = fetchFileContents(path.resolve(__dirname, '../assets/medicus_pdf/styles.css'));
+    if (isRtl) {
+        styles += fetchFileContents(path.resolve(__dirname, '../assets/medicus_pdf/arabic.css'));
+    }
+    let bodyClass = "";
+    if (!data['approvalDate']) {
+        bodyClass = "draft-bg";
+        if (lang !== 'en' && ['ar', 'de', 'fr', 'nl-NL', 'pt', 'pt_BR', 'ar-SA'].includes(lang)) {
+
+            bodyClass = "draft-bg-" + lang;
+        }
+    }
+    if (data['labType'] === 18) {
+        bodyClass += ' smart-donor';
+    }
+    const fs = require('fs');
+    let content = `
+               <div>
+                   <div id="page_template" class="all-pages ${IMCclass}">
+                    
+                       ${html}
+                   </div>
+               </div>
+         `;
+
+    return content;
+}
+
+function returnIntroTemplate(data, isIMCLab) {
+    let profileItemHTML = '';
+    let classProfileItemContainer = "size4";
+    let widthProfileItemContainer = '';
+    let introWidth = '';
+    if (isIMCLab || (!process.env.SHOW_QR_BOX || process.env.SHOW_QR_BOX === "false")) {
+        classProfileItemContainer = '';
+        widthProfileItemContainer = 'width:100%';
+        introWidth = 'width:100%';
+
+        let length = 100 / 3;
+        let items = data['profileItems'];
+        if (data['reportProperties'] && isIMCLab) {
+            for (const [key, value] of Object.entries(data['reportProperties'])) {
+                items.push({title: key, value: value});
+            }
+        }
+
+        for (const item of items) {
+            profileItemHTML += `<div style='width: ${length}%; padding: 10px 0' class='grid-col size2'>
+                                    <div class='info-label'>${item.title}</div>
+                                    <div class='info-value'>${item.value}</div>
+                                </div>`;
+        }
+    } else {
+        let index = 0;
+        while (index < data['profileItems'].length - 1) {
+            let newDivId = 'sub' + index;
+            profileItemHTML += `<div id="${newDivId}" class='grid-row'>`;
+
+            for (let j = 0; j < 2; j++) {
+                let valueId = newDivId + '-' + j;
+                let profileItemValue = data['profileItems'][index]['value'];
+                let classAttr = /[A-Za-z]/.test(profileItemValue) && /[0-9]/.test(profileItemValue) ? "ltr_dir" : "";
+
+                profileItemHTML += `<div id='${valueId}' class='grid-col size2'>
+                                       <div class='info-label'>${data['profileItems'][index]['title']}</div>
+                                       <div class='info-value ${classAttr}'>${profileItemValue}</div>
+                                   </div>`;
+                index++;
+            }
+            profileItemHTML += `</div>`;
+        }
+
+        if (data['profileItems'].length % 2 !== 0) {
+            let newDivId = 'sub' + index;
+            let valueId = newDivId + '-0';
+            let profileItemValue = data['profileItems'][index]['value'];
+            let classAttr = /[A-Za-z]/.test(profileItemValue) && /[0-9]/.test(profileItemValue) ? "ltr_dir" : "";
+
+            profileItemHTML += `<div id="${newDivId}" class='grid-row'>
+                                    <div id='${valueId}' class='grid-col size2'>
+                                        <div class='info-label'>${data['profileItems'][index]['title']}</div>
+                                        <div class='info-value ${classAttr}'>${profileItemValue}</div>
+                                    </div>
+                                </div>`;
+        }
+    }
+
+    let moreLink = localeService.t('Access your detailed report online') + " ";
+    moreLink = moreLink.replace("{link}", `<strong><a href='${data['moreLink']}' target='_blank'>${data['moreLink']}</a></strong>`);
+
+    if (data['patientPin'] && data['showPIN'] && data['qrCode']) {
+        moreLink += localeService.t("Scan this report’s QR code or enter this PIN code:") + "";
+    } else if (data['patientPin'] && data['showPIN']) {
+        moreLink += localeService.t("Enter this PIN code:") + "";
+    } else if (data['qrCode']) {
+        moreLink += localeService.t("Scan this report’s QR code:") + "";
+    }
+
+    let content = '';
+    let pin = data['patientPin'] || '';
+    let qrImage = data['qrCode'] || '';
+    let displayPin = pin ? 'inline-block' : 'none';
+    let displayQR = qrImage ? 'inline-block' : 'none';
+    let reportTitle = data['labType'] === 18 ? 'Smart Report' : localeService.t('Smart Report');
+
+    content += `<div class="intro" style="${introWidth}">
+                    <div class="grid-row">
+                        <div class="profile-items-container grid-col ${classProfileItemContainer}" style="${widthProfileItemContainer}">
+                            <div id="report-title-header-ltr" class="report-title">
+                                <div class="heading">${reportTitle}</div>
+                            </div>
+                            <div id="patient-container">${profileItemHTML}</div>
+                        </div>`;
+
+    if (!isIMCLab && (process.env.SHOW_QR_BOX === "true" || process.env.SHOW_QR_BOX === true) && data['labType'] !== 18) {
+        content += `<div class="plus-info-container grid-col size4">
+                        <div class="plus-info">
+                            <div class="grid-row">
+                                <div class="grid-col size3">
+                                    <div id="more-link" class="description">${moreLink}
+                                        <span id="pin" class="pin" style="display:${displayPin}">${pin}</span>
+                                    </div>
+                                </div>
+                                <div class="grid-col size1 qr-container">
+                                    <div id="qrcode" class="pin-qr" style="display:${displayQR}"><img src="${qrImage}"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>`;
+    }
+
+    content += '</div></div>';
+
+    return content;
+}
+
+
+function renderDoctorNotes(doctorNotes, bioIndentStyle = '') {
+    let doctorNotesHTML = '';
+    if (doctorNotes && doctorNotes.length > 0) {
+        doctorNotes.forEach(note => {
+            let noteId = 'doctor-note-' + Math.random().toString(36).substr(2, 9);
+            doctorNotesHTML += `<div class="card-wrapper card-wrapper-note" style="${bioIndentStyle}">
+                                    <div id="${noteId}" class="card">
+                                        <div class="icon">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                                <g fill="none" fill-rule="evenodd">
+                                                    <rect width="32" height="32" fill="" rx="16"/>
+                                                    <g fill="#295C42" fill-rule="nonzero">
+                                                        <path d="M20.613 23.8a.31.31 0 0 0 .217-.088l1.845-1.8a.296.296 0 0 0 .09-.212v-12c0-.166-.137-.3-.307-.3h-1.845a.304.304 0 0 0-.308.3c0 .166.138.3.308.3h1.537v11.576l-1.755 1.712a.295.295 0 0 0 0 .424.31.31 0 0 0 .218.088z"/>
+                                                        <path d="M11.387 10c.17 0 .308-.134.308-.3 0-.166-.138-.3-.308-.3H9.542a.304.304 0 0 0-.307.3v12.9c0 .662.552 1.2 1.23 1.2h8.918c.17 0 .307-.134.307-.3v-1.8c0-.136.137-.3.308-.3h1.23c.17 0 .307-.134.307-.3 0-.166-.137-.3-.307-.3h-1.23c-.492 0-.923.42-.923.9v1.5h-8.61a.608.608 0 0 1-.615-.6V10h1.537zM16 8.2c-.34 0-.615.27-.615.6 0 .33.276.6.615.6.34 0 .615-.27.615-.6 0-.33-.276-.6-.615-.6z"/>
+                                                        <path d="M22.458 8.2h-1.845a.304.304 0 0 0-.308.3c0 .166.138.3.308.3h1.845c.448 0 .922.463.922.9v13.8c0 .437-.474.9-.922.9H9.542c-.448 0-.922-.463-.922-.9V9.7c0-.437.474-.9.922-.9h1.845c.17 0 .308-.134.308-.3 0-.166-.138-.3-.308-.3H9.542c-.79 0-1.537.729-1.537 1.5v13.8c0 .771.747 1.5 1.537 1.5h12.916c.79 0 1.537-.729 1.537-1.5V9.7c0-.771-.747-1.5-1.537-1.5z"/>
+                                                    </g>
+                                                </g>
+                                            </svg>
+                                        </div>
+                                        <div class="text text-with-icon">
+                                            <div class="from-doctor">${localeService.t('noteFromDoctor')} ${note.createdByName}</div>
+                                            <div class="note-content">${note.content.replace(/\n/g, "<br/>")}</div>
+                                        </div>
+                                    </div>
+                                </div>`;
+        });
+    }
+    return doctorNotesHTML;
+}
+
+function renderDoctorNotesCompactView(doctorNotes, bioIndentStyle = '') {
+    let doctorNotesHTML = '';
+    if (doctorNotes && doctorNotes.length > 0) {
+        doctorNotes.forEach(note => {
+            doctorNotesHTML += `<div class="note-content">${note.content}</div>`;
+        });
+    }
+    return doctorNotesHTML;
+}
+
+function renderOneBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent) {
+
+    let biomarkerDetailsHtml = '';
+
+    if (biomarker.showInDetailsView === true) {
+        const biomarkerCssId = "dtl-bio-" + "db" + biomarker.id;
+        let customBiomarkerValueFontSize = '';
+        const rawFormattedValue = biomarker.formattedValue || biomarker.lingualReading || '';
+        const formattedValue = rawFormattedValue.replace(/,/g, "");
+        if (formattedValue.length > 35) {
+            customBiomarkerValueFontSize = 'font-size:12px;';
+        }
+        const biomarkerName = biomarker.name || '';
+        const biomarkerStatus = biomarker.status || '';
+        const insightsCount = biomarker.insightsCount || '';
+        let CircleStyles = '';
+        if (!isComponent) {
+            CircleStyles = GetBiomarkerCircleStyle(biomarker.color, biomarkerName, biomarkerStatus, insightsCount, '', false);
+        }
+
+        // Indent biomarker details based on panel level
+        let firstGridColClass = 'size5';
+        let firstGridColstyle = '';
+        let lastGridColClass = 'size3';
+        let bioIndentStyle = '';
+        let bioIndentNoteStyle = '';
+        if (nestingLevel > 0) {
+            // Replace classes
+            firstGridColClass = 'size5';
+            lastGridColClass = 'size3';
+            const extraPadding = ((nestingLevel + 10 % 10) + 1);
+            const levelNesting = extraPadding + nestingLevel * (INDENTATION.BIOMARKER_DETAILS || 0);
+            const levelNestingNote = extraPadding + nestingLevel * (INDENTATION.BIOMARKER_DETAILS || 0) + 16;
+            bioIndentStyle = 'padding-left: ' + levelNesting + 'px;';
+            bioIndentNoteStyle = 'padding-left: ' + levelNestingNote + 'px';
+        }
+
+        // IMC special case (large biomarker value)
+        let biomarkerClass = '';
+        if (rawFormattedValue.length >= 125) {
+            biomarkerClass = 'large-value-class';
+            firstGridColClass = '';
+            // firstGridColstyle = 'width:100%';
+        }
+
+        const biomarkerValue = rawFormattedValue.replace(/\r\n/g, "<br/>");
+
+        if (!biomarker.showScale) {
+            biomarkerClass += ' hide-scale ';
+        }
+
+        const biomarkerColor = (biomarker.color && !biomarker.isNormal) ? "color:" + biomarker.color + ";" : "";
+        let rangesPlaceholder = "";
+        let currentRange = "";
+        let currentPercent = 50;
+        let biomarkerTitleClass = '';
+        if (biomarker.ranges.length > 1 && biomarker.showScale) {
+            biomarkerTitleClass = 'has-ranges';
+        } else {
+            biomarkerTitleClass = 'has-no-ranges';
+        }
+
+        let childRangesPlaceholder = "";
+        let childCurrentRange = "";
+        let heightCount = 1;
+        let bioValue = "";
+        let bioUnit = "";
+        let afterBioInfoValue = '';
+        let History = '';
+        if (biomarker.childrenBiomarkers && biomarker.childrenBiomarkers.length > 0) {
+            biomarker.childrenBiomarkers.forEach(bio => {
+                if (bio.ranges.length > 1) {
+                    heightCount++;
+                    // Viewing the biomarker and unit of children after the parent ones
+                    bioValue = bio.formattedValue.replace(/\n/g, "<br />");
+                    let bioValue_style = "";
+                    if (bioValue.length > 33) {
+                        bioValue_style = "font-size:12px;";
+                    }
+                    bioUnit = bio.unit;
+                    childCurrentRange = '';
+                    // Generating the children ranges and display them under the parent ones
+                    childRangesPlaceholder += '<div class="extra-range-placeholder">'
+                        + convertToRangeLayout(bio.ranges, bio, isRtl)
+                        + '</div>';
+                    biomarkerTitleClass = 'has-ranges';
+                    afterBioInfoValue += '<div class="colorable pair">'
+                        + '<span class="biomarker-extra-value" style="' + bioValue_style + '">' + bioValue + '</span>'
+                        + '<span class="biomarker-extra-unit">' + bioUnit + '</span>'
+                        + '</div>';
+                } else {
+                    biomarkerTitleClass = 'has-no-ranges';
+                }
+                History = renderBiomarkerHistoryChart(bio);
+            });
+        } else {
+            History = renderBiomarkerHistoryChart(biomarker);
+        }
+
+        if (heightCount > 1) {
+            biomarkerClass += 'hide-flag';
+        }
+
+        // Set biomarker history chart
+        const biomarkerFullName = biomarker.fullName || '';
+        let bioName = biomarkerFullName.replace(/\r\n/g, '');
+        bioName = bioName.replace(/\n/g, '');
+        const rangePlaceHolder = convertToRangeLayout(biomarker.ranges, biomarker, isRtl);
+        let biomarkerSampleHTML = '';
+        let biomInfoStyle = '';
+        let biomValueAlignStyle = '';
+        if (biomarker.sample) {
+            biomarkerSampleHTML += '<div class="biom-sample">'
+                + '<span class="biom-sample-value">'
+                + biomarker.sample
+                + '</span>'
+                + '</div>';
+            // biomValueAlignStyle = "vertical-align: bottom;";
+        }
+        if (!biomarker.sample && (rangePlaceHolder || childRangesPlaceholder || History)) {
+            biomInfoStyle = "margin-top:15px;";
+        }
+
+        // Configurations
+        let biomarkerScale = '';
+        if (isChildBiomarker) {
+            // biomarkerScale = 'transform:scale(.9);';
+        }
+        let biomCircleCss = '';
+        if (isComponent) {
+            biomCircleCss = 'opacity: 0;';
+            biomarkerSampleHTML = '';
+            bioName = '';
+        }
+        let panelNesting = '';
+        let biomarkerTitleWidth = 'width:260px';
+        if (nestingLevel > 0) {
+            const extraPadding = ((nestingLevel + 10 % 10) + 1);
+            const levelNesting = extraPadding + nestingLevel * (INDENTATION.PANEL_TITLE || 0);
+            panelNesting = 'padding-left: ' + levelNesting + 'px;box-sizing:border-box;';
+            const width = 260 - levelNesting;
+            biomarkerTitleWidth = 'width:' + width + 'px';
+        }
+
+        if ((!rangePlaceHolder || !biomarker.showScale) && !childRangesPlaceholder && !History) {
+            biomarkerScale += 'width:100%;';
+        }
+        const doctorNotesArr = biomarker.doctorNotes || [];
+        const doctorNotes = renderDoctorNotes(doctorNotesArr, bioIndentNoteStyle);
+        let bioNameStyle = '';
+        let isValueNumber = !isNaN(Number(biomarkerValue));
+        let valueDataType = isValueNumber ? "number" : "string";
+        const safeBioName = bioName
+            .replace(/\(/g, '&#x28;')
+            .replace(/\)/g, '&#x29;');
+        biomarkerDetailsHtml += '<div data-id="' + biomarkerCssId + '" class="biomarker-container grid-col ' + biomarkerClass + '">'
+            + '<div class="grid-col ' + firstGridColClass + ' ' + biomarkerClass + '" style="' + biomarkerScale + panelNesting + '">'
+            + '<div class="biomarker">'
+            + '<div class="biom-circle" style="' + removeWhiteSpace(CircleStyles) + ';' + biomCircleCss + '">' + biomarkerName + '</div>'
+            + '<div class="biom-info ' + biomarkerTitleClass + '" style="' + biomInfoStyle + '">'
+            + '<div class="title ' + biomarkerTitleClass + '" style="' + biomarkerTitleWidth + '">' + biomarkerSampleHTML + '<span class="bio-name-info b" dir="ltr" style="unicode-bidi:isolate;">' + safeBioName + '</span></div>'
+            + '<div class="value colorable" style="' + biomValueAlignStyle + '">'
+            + biomarkerSampleHTML
+            + '<div class="pair parent-pair">'
+            + '<span class="value-text" data-type="' + valueDataType + '">'
+            + '<span style="' + customBiomarkerValueFontSize + biomarkerColor + '">' + biomarkerValue + '</span>'
+            + '</span>'
+            + '<span dir="ltr" class="unit colorable">' + biomarker.unit + '</span>'
+            + '</div>'
+            + '</div>'
+            + afterBioInfoValue
+            + '</div>'
+            + '</div>'
+            + '</div>';
+
+        if (rangePlaceHolder || childRangesPlaceholder || History) {
+            biomarkerDetailsHtml += '<div class="grid-col ' + lastGridColClass + '  ' + biomarkerClass + '" style="' + biomarkerScale + '">';
+            let biomBarClass = "";
+            if (biomarker.ranges.length > 6) {
+                biomBarClass = "big";
+            }
+
+            biomarkerDetailsHtml += '<div class="biom-bar ' + biomBarClass + '">';
+        }
+        if (rangePlaceHolder && biomarker.showScale) {
+            biomarkerDetailsHtml += '<div class="range-placeholder c">' + convertToRangeLayout(biomarker.ranges, biomarker, isRtl) + '</div>';
+        }
+
+        if (childRangesPlaceholder) {
+            biomarkerDetailsHtml += childRangesPlaceholder;
+        }
+        if (rangePlaceHolder || childRangesPlaceholder || History) {
+            biomarkerDetailsHtml += '</div><!-- close biom-bar -->';
+            // History chart start
+            biomarkerDetailsHtml += '<div class="grid-col history-chart-col">';
+
+            if (History) {
+                biomarkerDetailsHtml += '<div class="chart">'
+                    + History
+                    + '</div>';
+            }
+
+            biomarkerDetailsHtml += '</div> <!-- end chart grid col -->';
+            // History chart end
+            biomarkerDetailsHtml += '</div> <!-- close last grid-col -->';
+        }
+        if (doctorNotes) {
+            biomarkerDetailsHtml += '<div class="grid-row biomarker-insights b">'
+                + doctorNotes
+                + '</div>';
+        }
+
+        biomarkerDetailsHtml += '</div> <!-- end first close biomarker-container-->';
+    }
+    return biomarkerDetailsHtml;
+}
+
+function renderBiomarkerDetails(panel, isRtl, counter) {
+    let content = '';
+    panel.biomarkers.forEach((biomarker, biomarkrCounter) => {
+        content += renderOneBiomarker(biomarker, biomarkrCounter, panel, isRtl, counter);
+    });
+    return content;
+}
+
+function renderPanelTitle(panel, counter, biomarkrCounter) {
+    let panelTitle = '';
+    let panelSubTitle = '';
+    let content = '';
+    let checkShowInDetailsView = panel.biomarkers.find(biomarker => biomarker.showInDetailsView === true);
+
+    if (panel.biomarkers && checkShowInDetailsView && biomarkrCounter === 0) {
+        if (panel.panelDetails && panel.panelDetails.length > 1) {
+            panelTitle = panel.panelDetails[0].name;
+            let newPanelDetails = panel.panelDetails;
+
+            if (newPanelDetails.length > 0) {
+                newPanelDetails.forEach((panelDetail, index) => {
+                    if (index > 0) {
+                        let marginLeft = (index + 1) * 10;
+                        let name = panelDetail.name ? panelDetail.name : '';
+                        panelSubTitle += `<div class="panel-subtitle-item" style="padding-left:${marginLeft}px">${name}</div>`;
+                    }
+                });
+            }
+        } else {
+            panelTitle = panel.panelDetails && panel.panelDetails[0] && panel.panelDetails[0].name ? panel.panelDetails[0].name : panel.name;
+        }
+
+        let detailsTitle = '';
+        if (counter === 0) {
+            detailsTitle = `<div id="details-section" class="section">
+                                <div class="resume-title">${localeService.t('Details')}</div>
+                            </div>`;
+        }
+
+        content += `${detailsTitle}
+                    <div class="panel-title">${panelTitle}</div>
+                    <div class="panel-subtitle">${panelSubTitle}</div>`;
+    }
+    return content;
+}
+
+function renderPanelDetails(panel, biomarkerDetailsHtml, counter, isRtl) {
+    const panelCssId = `dtl-pnl-dp${panel.panelId.toLowerCase()}`;
+    const checkShowInDetailsView = panel.biomarkers.find(biomarker => biomarker.showInDetailsView === true);
+    let detailsSectionHTML = '';
+    let panelSubTitle = '';
+
+    if (panel.biomarkers && checkShowInDetailsView) {
+        let panelTitle = panel.panelDetails && panel.panelDetails.length > 1 ? panel.panelDetails[0].name : panel.name;
+
+        if (panel.panelDetails && panel.panelDetails.length > 1) {
+            panel.panelDetails.forEach((panelDetail, index) => {
+                if (index > 0) {
+                    let marginLeft = (index + 1) * 10;
+                    let name = panelDetail.name ? panelDetail.name : '';
+                    panelSubTitle += `<div class="panel-subtitle-item" style="padding-left:${marginLeft}px">${name}</div>`;
+                }
+            });
+        }
+
+        let detailsTitle = '';
+        if (counter === 0) {
+            detailsTitle = `<div id="details-section" class="section">
+                                <div class="resume-title">${localeService.t('Details')}</div>
+                            </div>`;
+        }
+
+        let panelInsights = renderRelatedInsights(panel.insights, panel, true, `dtl-pnl-insight-${panel.panelId}`, isRtl);
+        let doctorNotes = renderDoctorNotes(panel.doctorNotes);
+        let bioInsights = (doctorNotes || panelInsights) ? `<div class="grid-row biomarker-insights">${doctorNotes}${panelInsights}</div>` : '';
+
+        detailsSectionHTML += `<div id="${panelCssId}" class="section panel sectionPanel">
+                                    <div class="panel-wrapper">
+                                        <div class="section-content">
+                                            <div class="panel-container">${biomarkerDetailsHtml}</div>
+                                            ${bioInsights}
+                                        </div>
+                                    </div>
+                                </div>`;
+    }
+    return detailsSectionHTML;
+}
+
+function renderOneInsight(insight, nestingLevel, isRtl) {
+    const INDENTATION = {INSIGHT: 10}; // Assuming this is defined globally
+    let insightHtml = '';
+    const insightCssId = "insight-" + "cb" + insight.id + Math.floor(Math.random() * 3);
+    let insightClass = "";
+    let content = '';
+    let tolerance = "";
+    let introductoryStatement = "";
+    let nodes = "";
+    let doctorContentClass = "hide-me";
+    let insightImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEgCAMAAAAjXV6yAAAAdVBMVEUAAACAma+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama/V/8ZIAAAAJnRSTlMATE389dtK6SQE7uTUOc/HlysO3qeJbwnBf1kzaBwWuZ+zYEJ1UwEot4sAAATfSURBVHja7NprcqpAEIbhDwckclPu4iUajb3/JZ78MDWQ1CmhKtKN9LOEt2bGGWwopZRSSimllFJKKaWUUkoppZRSSimllFJKKfVCFs+2vMZxelxhohx6NuMGfh4lp80trTE9Do3G5MnZecfEODQqNyqW01pHDo0tWB+OmA6HxmeSz+nsNIc4mOQwlY3mEA/3tMckOMQlbzJMgENs3I83yGcDbZxn2VXNeRv59EuyhHg20AJPlcXVh2eoKzxAuhECWWm1dqnDb6Q/0kYJZNW7bTdRUEK2kQJZ9SGiNreUvYZGC2QdC5dagk9IxhAIdelTi7+DYByBgItHLZ7kSzVPINx8alkLft4zBcI+IssUcg9qrkBYhGQFco8htkCoArISsZuML9CqdMk6S91kfIGQbckKY8jEGAjXkKwPoUuIMxA2ZPlCP32wBkpzsk4ylxBrIGzkn0K8gWKfrDMk4g304ZEVyD2G2AKhCshKxG4yvkCr0iXrLHWT8QVCtiUrjCETYyBcQ7I+hC4hzkDYkOUL/fTBGijNyTrJXEKsgbCRfwrxBop9ss6QiDfQh0dWIPcYYguEKiArEbvJ+AKtSpess9RNxhcI2ZasMIZMjIFwDcn6ELqEOANhQ5Yv9NMHa6A0J+skcwmxBsJG/inEGyj2yTpDIt5AHx5ZgdxjiC0QqoCsROwm4wu0Kl2yzlI3GV8gZFuywhgyMQbCNSTrQ+gS4gyEDVm+0E8frIHSnKyTzCXEGggb+acQb6DYJ+sMiXgDfXhkBXKPIbZAqAKyErGbjC/QqnTJOkvdZHyBkG3JCmPIxBgI15CsD6FLiDMQNmT5Qj99sAZKc7JOMpcQayBs5J9CvIFin6wzJOIN9OGRFcg9htgCoQrISsRuMr5Aq9Il6yx1k/EFQrYlK4whE2MgXEOyPoQuIc5A2JDlC/30wRoozck6yVxCrIGwkX8K8QaKfbLOkIg30IdHViD3GGILhCogKxG7yfgCrUqXrLPUTcYXCNmWrDCGTIyBcA3J+hC6hDgDYUOWL/TTB2ugNCfrJHMJsQbCRv4pxBso9sk6QyLeQB8eWYHcY4gtEKqArETsJuMLtCpdss5SNxlfIGRbssIYMjEGwjUk60PoEuIMhA1ZvtBPH6yB0pysk8wlxBoIG/mnEG+g2CfrDIl4A314ZAVyjyG2QKgCshKxm4wv0Kp0yTpL3WR8gZBtyQpjyMQYCNeQrA+hS4gzEDZk+UI/fbAGSnOyTjKXEGsgbOSfQryBYp+sMyTiDfThkRXIPYbYAqEKyErEbjK+QKvSJessdZPxBUK2JSuMIRNjIFxDsj6ELiHOQNiQ5Qv99MEaKM3JOsn+3yX0DgAAAAAAAAAAAPi3Dx06cIqm05GlAAAAAElFTkSuQmCC";
+    let insightTextClass = "";
+    let relatedBiomarkers = "";
+
+    if (insight.title) {
+        content += `<div class='title'>${insight.title}</div>`;
+    }
+
+    if (insight.introductoryStatement) {
+        introductoryStatement = insight.introductoryStatement + " ";
+    } else {
+        introductoryStatement = insight.content;
+    }
+
+    let insightCssIdStyle = '';
+    if (nestingLevel > 0) {
+        const extraPadding = ((nestingLevel + 10 % 10) + 1)
+        const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT;
+        insightCssIdStyle = `padding-left: ${levelNesting}px`;
+    }
+
+    function renderOneInsight(insight, nestingLevel, isRtl) {
+        const INDENTATION = {INSIGHT: 10}; // Assuming this is defined globally
+        let insightHtml = '';
+        const insightCssId = "insight-" + "cb" + insight.id.toLowerCase() + Math.floor(Math.random() * 3);
+        let insightClass = "";
+        let content = '';
+        let tolerance = "";
+        let introductoryStatement = "";
+        let nodes = "";
+        let doctorContentClass = "hide-me";
+        let insightImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEgCAMAAAAjXV6yAAAAdVBMVEUAAACAma+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama+Ama/V/8ZIAAAAJnRSTlMATE389dtK6SQE7uTUOc/HlysO3qeJbwnBf1kzaBwWuZ+zYEJ1UwEot4sAAATfSURBVHja7NprcqpAEIbhDwckclPu4iUajb3/JZ78MDWQ1CmhKtKN9LOEt2bGGWwopZRSSimllFJKKaWUUkoppZRSSimllFJKKfVCFs+2vMZxelxhohx6NuMGfh4lp80trTE9Do3G5MnZecfEODQqNyqW01pHDo0tWB+OmA6HxmeSz+nsNIc4mOQwlY3mEA/3tMckOMQlbzJMgENs3I83yGcDbZxn2VXNeRv59EuyhHg20AJPlcXVh2eoKzxAuhECWWm1dqnDb6Q/0kYJZNW7bTdRUEK2kQJZ9SGiNreUvYZGC2QdC5dagk9IxhAIdelTi7+DYByBgItHLZ7kSzVPINx8alkLft4zBcI+IssUcg9qrkBYhGQFco8htkCoArISsZuML9CqdMk6S91kfIGQbckKY8jEGAjXkKwPoUuIMxA2ZPlCP32wBkpzsk4ylxBrIGzkn0K8gWKfrDMk4g304ZEVyD2G2AKhCshKxG4yvkCr0iXrLHWT8QVCtiUrjCETYyBcQ7I+hC4hzkDYkOUL/fTBGijNyTrJXEKsgbCRfwrxBop9ss6QiDfQh0dWIPcYYguEKiArEbvJ+AKtSpess9RNxhcI2ZasMIZMjIFwDcn6ELqEOANhQ5Yv9NMHa6A0J+skcwmxBsJG/inEGyj2yTpDIt5AHx5ZgdxjiC0QqoCsROwm4wu0Kl2yzlI3GV8gZFuywhgyMQbCNSTrQ+gS4gyEDVm+0E8frIHSnKyTzCXEGggb+acQb6DYJ+sMiXgDfXhkBXKPIbZAqAKyErGbjC/QqnTJOkvdZHyBkG3JCmPIxBgI15CsD6FLiDMQNmT5Qj99sAZKc7JOMpcQayBs5J9CvIFin6wzJOIN9OGRFcg9htgCoQrISsRuMr5Aq9Il6yx1k/EFQrYlK4whE2MgXEOyPoQuIc5A2JDlC/30wRoozck6yVxCrIGwkX8K8QaKfbLOkIg30IdHViD3GGILhCogKxG7yfgCrUqXrLPUTcYXCNmWrDCGTIyBcA3J+hC6hDgDYUOWL/TTB2ugNCfrJHMJsQbCRv4pxBso9sk6QyLeQB8eWYHcY4gtEKqArETsJuMLtCpdss5SNxlfIGRbssIYMjEGwjUk60PoEuIMhA1ZvtBPH6yB0pysk8wlxBoIG/mnEG+g2CfrDIl4A314ZAVyjyG2QKgCshKxm4wv0Kp0yTpL3WR8gZBtyQpjyMQYCNeQrA+hS4gzEDZk+UI/fbAGSnOyTjKXEGsgbOSfQryBYp+sMyTiDfThkRXIPYbYAqEKyErEbjK+QKvSJessdZPxBUK2JSuMIRNjIFxDsj6ELiHOQNiQ5Qv99MEaKM3JOsn+3yX0DgAAAAAAAAAAAPi3Dx06cIqm05GlAAAAAElFTkSuQmCC";
+        let insightTextClass = "";
+        let relatedBiomarkers = "";
+
+        if (insight.title) {
+            content += `<div class='title'>${insight.title}</div>`;
+        }
+
+        if (insight.introductoryStatement) {
+            introductoryStatement = insight.introductoryStatement + " ";
+        } else {
+            introductoryStatement = insight.content;
+        }
+
+        let insightCssIdStyle = '';
+        if (nestingLevel > 0) {
+            const extraPadding = ((nestingLevel + 10 % 10) + 1)
+            const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT;
+            insightCssIdStyle = `padding-left: ${levelNesting}px`;
+        }
+
+        if (insight.introductoryStatement || insight.summary || insight.testExplained || insight.suggestion) {
+            const introductoryStatementContent = introductoryStatement ? introductoryStatement.replace(/(\r\n|\n|\r)/gm, '') : '';
+            const insightSummaryContent = insight.summary ? insight.summary : '';
+            const testExplainedContent = insight.testExplained ? insight.testExplained : '';
+            const suggestionContent = insight.suggestion ? insight.suggestion : '';
+            content += `<div class="html-content inline-text introductory-statement">${introductoryStatementContent}</div>`;
+            content += `<div class="html-content inline-text testExplained">${testExplainedContent}</div>`;
+            content += `<div class="html-content inline-text">${insightSummaryContent}</div>`;
+            content += `<div class="html-content">${suggestionContent}</div>`;
+
+            if (isRtl) {
+                content = content.replace(/&rlm;/g, '');
+                content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
+                content = content.replace(/\)/g, ') &rlm;</span>');
+            }
+        } else {
+            content += introductoryStatement;
+            if (isRtl) {
+                content = content.replace(/&rlm;/g, '');
+                content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
+                content = content.replace(/\)/g, ') &rlm;</span>');
+            }
+        }
+
+        if (insight.detailedList) {
+            const parsedTable = parseTable(insight.detailedList);
+            nodes = renderDetails(parsedTable, isRtl);
+            doctorContentClass = "";
+        }
+
+        if (introductoryStatement) {
+            const span = "<span>";
+            if (introductoryStatement.includes(span)) {
+                tolerance = stripTags(introductoryStatement, '<span>');
+                introductoryStatement = introductoryStatement.replace(/<(.|\n)*?>/g, '');
+                introductoryStatement = introductoryStatement.replace(tolerance, '');
+            }
+        }
+
+        if (insight.color === "") {
+            insightClass = "tip";
+        } else {
+            insightClass = color(insight.color);
+        }
+
+        // if (insight.icon !== "") {
+        //     insightImage = getFileAsBase64(insight.icon, 'image/png');
+        // }
+
+        if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
+            insightTextClass = "insight-text";
+            // Loop through relatedBiomarkers and generate HTML (commented out in PHP)
+        }
+
+        let insightCssIdCss = '';
+        if (nestingLevel > 0) {
+            const extraPadding = ((nestingLevel + 10 % 10) + 1)
+            const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT + 16;
+            insightCssIdCss = `padding-left: ${levelNesting}px`;
+        }
+
+        let svgColor = color(insight.color);
+        if (insight.isMedical) {
+            insightClass += ' medical-insight';
+            svgColor = ' medical-insight';
+        }
+
+        if (content || insight.disclaimer || insight.toleranceText) {
+            insightHtml += `<div id="${insightCssId}" class="card-wrapper" style="${insightCssIdCss}" insight-id="${insight.id}">
+                                <div class="card insight-card a ${insightClass}">
+                                    <div class="insight-container">`;
+            if (insight.isMedical || insight.insightType === 'doctor-visit') {
+                insightHtml += `<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none" class="card-svg ${svgColor}">
+                                    <path d="M17 0C15.8955 0 15 0.895447 15 2V15H2C0.895508 15 0 15.8954 0 17V35C0 36.1046 0.895508 37 2 37H15V50C15 51.1046 15.8955 52 17 52H35C36.1045 52 37 51.1046 37 50V37H50C51.1045 37 52 36.1046 52 35V17C52 15.8954 51.1045 15 50 15H37V2C37 0.895416 36.1045 0 35 0H17Z" fill="white"/>
+                                </svg>`;
+            }
+            insightHtml += `<div class="text ${insightTextClass}">${content}</div>`;
+
+            if (insight.disclaimer) {
+                insightHtml += `<div class="insight-disclaimer" style="padding: 10px 0px 0">${insight.disclaimer}</div>`;
+            }
+            if (insight.toleranceText) {
+                insightHtml += `<div class="insight-tolerance" style="padding: 10px 0px 0">${insight.toleranceText}</div>`;
+            }
+            insightHtml += `</div>`;
+            if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
+                insightHtml += `<div id="${insightCssId}" class="related-icons has-related ${color(insight.color)}">${relatedBiomarkers}</div>`;
+            }
+            insightHtml += `</div></div>`;
+        }
+
+        if (nodes || tolerance) {
+            insightHtml += `<div class="card-wrapper detailed-list-card-wrapper" style="${insightCssIdCss}">
+                                <div class="detailed-list-wrapper">
+                                    <div class="detailed-list-title-wrapper">
+                                        <div class="doctor-only-content-container ${doctorContentClass}">
+                                            <h4 class="doctor-only-content-header">${getLocale('doctorContent')}</h4>
+                                            <span class="doctor-only-content-subheader">${getLocale('mostCommonCausesOfTheObservedValue')}</span>
+                                        </div>`;
+            if (nodes) {
+                insightHtml += `<ul class="detailed-list">${nodes}</ul>`;
+            }
+            if (tolerance) {
+                insightHtml += `<div class="tolerance-text">${tolerance}</div>`;
+            }
+            insightHtml += `</div></div></div>`;
+        }
+
+        return insightHtml;
+    }
+
+    if (insight.introductoryStatement || insight.summary || insight.testExplained || insight.suggestion) {
+        const introductoryStatementContent = introductoryStatement ? introductoryStatement.replace(/(\r\n|\n|\r)/gm, '') : '';
+        const insightSummaryContent = insight.summary ? insight.summary : '';
+        const testExplainedContent = insight.testExplained ? insight.testExplained : '';
+        const suggestionContent = insight.suggestion ? insight.suggestion : '';
+        content += `<div class="html-content inline-text introductory-statement">${introductoryStatementContent}</div>`;
+        content += `<div class="html-content inline-text testExplained">${testExplainedContent}</div>`;
+        content += `<div class="html-content inline-text">${insightSummaryContent}</div>`;
+        content += `<div class="html-content">${suggestionContent}</div>`;
+
+        if (isRtl) {
+            content = content.replace(/&rlm;/g, '');
+            content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
+            content = content.replace(/\)/g, ') &rlm;</span>');
+        }
+    } else {
+        content += introductoryStatement;
+        if (isRtl) {
+            content = content.replace(/&rlm;/g, '');
+            content = content.replace(/\(/g, '&rlm; <span class="ltr-dir">(');
+            content = content.replace(/\)/g, ') &rlm;</span>');
+        }
+    }
+
+    if (insight.detailedList) {
+        const parsedTable = parseTable(insight.detailedList);
+        nodes = renderDetails(parsedTable, isRtl);
+        doctorContentClass = "";
+    }
+
+    if (introductoryStatement) {
+        const span = "<span>";
+        if (introductoryStatement.includes(span)) {
+            tolerance = stripTags(introductoryStatement, '<span>');
+            introductoryStatement = introductoryStatement.replace(/<(.|\n)*?>/g, '');
+            introductoryStatement = introductoryStatement.replace(tolerance, '');
+        }
+    }
+
+    if (insight.color === "") {
+        insightClass = "tip";
+    } else {
+        insightClass = color(insight.color);
+    }
+
+    // if (insight.icon !== "") {
+    //     insightImage = getFileAsBase64(insight.icon, 'image/png');
+    // }
+
+    if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
+        insightTextClass = "insight-text";
+        // Loop through relatedBiomarkers and generate HTML (commented out in PHP)
+    }
+
+    let insightCssIdCss = '';
+    if (nestingLevel > 0) {
+        const extraPadding = ((nestingLevel + 10 % 10) + 1)
+        const levelNesting = extraPadding + nestingLevel * INDENTATION.INSIGHT + 16;
+        insightCssIdCss = `padding-left: ${levelNesting}px`;
+    }
+
+    let svgColor = color(insight.color);
+    if (insight.isMedical) {
+        insightClass += ' medical-insight';
+        svgColor = ' medical-insight';
+    }
+
+    if (content || insight.disclaimer || insight.toleranceText) {
+        insightHtml += `<div id="${insightCssId}" class="card-wrapper" style="${insightCssIdCss}" insight-id="${insight.id}">
+                            <div class="card insight-card a ${insightClass}">
+                                <div class="insight-container">`;
+        if (insight.isMedical || insight.insightType === 'doctor-visit') {
+            insightHtml += `<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none" class="card-svg ${svgColor}">
+                                <path d="M17 0C15.8955 0 15 0.895447 15 2V15H2C0.895508 15 0 15.8954 0 17V35C0 36.1046 0.895508 37 2 37H15V50C15 51.1046 15.8955 52 17 52H35C36.1045 52 37 51.1046 37 50V37H50C51.1045 37 52 36.1046 52 35V17C52 15.8954 51.1045 15 50 15H37V2C37 0.895416 36.1045 0 35 0H17Z" fill="white"/>
+                            </svg>`;
+        }
+        insightHtml += `<div class="text ${insightTextClass}">${content}</div>`;
+
+        if (insight.disclaimer) {
+            insightHtml += `<div class="insight-disclaimer" style="padding: 10px 0px 0">${insight.disclaimer}</div>`;
+        }
+        if (insight.toleranceText) {
+            insightHtml += `<div class="insight-tolerance" style="padding: 10px 0px 0">${insight.toleranceText}</div>`;
+        }
+        insightHtml += `</div>`;
+        if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
+            insightHtml += `<div id="${insightCssId}" class="related-icons has-related ${color(insight.color)}">${relatedBiomarkers}</div>`;
+        }
+        insightHtml += `</div></div>`;
+    }
+
+    if (nodes || tolerance) {
+        insightHtml += `<div class="card-wrapper detailed-list-card-wrapper" style="${insightCssIdCss}">
+                            <div class="detailed-list-wrapper">
+                                <div class="detailed-list-title-wrapper">
+                                    <div class="doctor-only-content-container ${doctorContentClass}">
+                                        <h4 class="doctor-only-content-header">${getLocale('doctorContent')}</h4>
+                                        <span class="doctor-only-content-subheader">${getLocale('mostCommonCausesOfTheObservedValue')}</span>
+                                    </div>`;
+        if (nodes) {
+            insightHtml += `<ul class="detailed-list">${nodes}</ul>`;
+        }
+        if (tolerance) {
+            insightHtml += `<div class="tolerance-text">${tolerance}</div>`;
+        }
+        insightHtml += `</div></div></div>`;
+    }
+
+    return insightHtml;
+}
+
+function renderRelatedInsights(insights, panel, showRelatedBiomarkers = true, idPrefix = '', isRtl = false) {
+    let content = '';
+    if (insights.length > 0) {
+        insights.forEach((insight, insightIndex) => {
+            content += renderOneInsight(insight, insightIndex, idPrefix, panel, showRelatedBiomarkers, isRtl);
+        });
+    }
+    return content;
+}
+
+function setSummaryStatInsightText(summary) {
+    let insightsHasStackedArray = [];
+    let temp2 = [...summary];
+
+    summary.forEach((summaryCheckedItem, index) => {
+        if (summaryCheckedItem.stackedInsight !== null) {
+            let test = {};
+
+            temp2.forEach((stackedElement, i) => {
+                if (stackedElement && stackedElement.id === summaryCheckedItem.stackedInsight) {
+                    test.index = i;
+                    summaryCheckedItem.content += `<br><br>${stackedElement.content}`;
+                    test.elm = summaryCheckedItem;
+                    insightsHasStackedArray[index] = stackedElement;
+                    summary[test.index] = test.elm;
+                    summary.splice(i, 1);
+                }
+            });
+        }
+    });
+    return summary;
+}
+
+function returnSummaryTemplate(summaryI, isRtl) {
+    let summary = setSummaryStatInsightText(summaryI);
+    let insightIndex = 0;
+    let insightHtml = '';
+
+    summary.forEach(insight => {
+        let insightCssId = `smry-insight${insightIndex}`;
+        let relatedBiomarkers = '';
+        let insightCssClass = insight.isClinicalReading ? "cr" : insight.color === "" ? "tip" : color(insight.color);
+
+        let insightText = insight.title ? `<div class="title">${insight.title}</div>` : '';
+        let insightContent = insight.content;
+
+        if (isRtl) {
+            insightContent = insightContent.replace(/&rlm;/g, '')
+                .replace(/\(/g, '&rlm; <span class="ltr-dir">(')
+                .replace(/\)/g, ') &rlm;</span>');
+        }
+
+        insightText += insightContent.replace(/(\r\n|\n|\r)/gm, '<br/>');
+
+        if (insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0) {
+            insight.relatedBiomarkers.forEach(item => {
+                relatedBiomarkers += GetRelatedBiomarker(
+                    GetBiomarkerCircleStyle(item.color, item.name, item.status, item.insightsCount, 'nothing', true, item),
+                    item.name,
+                    item.fullName
+                );
+            });
+        }
+
+        let svgColor = color(insight.color);
+        if (insight.isMedical) {
+            insightCssClass += ' medical-insight';
+            svgColor = ' medical-insight';
+        }
+
+        insightHtml += `<div id="${insightCssId}" class="card insight-card ${insightCssClass}">
+                            <div class="insight-container">
+                                <div class="text">${insightText}</div>
+                                ${insight.toleranceText ? `<div class="text" style="color: #FF3200; padding: 10px 0px 5px 0px;">${insight.toleranceText}</div>` : ''}
+                            </div>
+                            ${insight.relatedBiomarkers && insight.relatedBiomarkers.length > 0 ? `<div id="${insightCssId}" class="related-icons has-related ${color(insight.color)}">${relatedBiomarkers}</div>` : ''}
+                        </div>`;
+
+        insightIndex++;
+    });
+    return insightHtml;
+}
+
+function renderSummary(data, isRtl) {
+    let content = '';
+    let reportNotes = '';
+    let summary = '';
+
+    if ((data.summary) || (data.doctorNote && data.doctorNote.length > 0)) {
+        if (data.doctorNote && data.doctorNote.length > 0) {
+            reportNotes = renderDoctorNotes(data.doctorNote);
+        }
+        if (data.summary) {
+            summary = returnSummaryTemplate(data.summary, isRtl);
+        }
+        if (reportNotes && summary)
+            content += `
+            <div id="summary" class="section">
+                <div class="resume-title">${localeService.t('Summary')}</div>
+                <div class="section-content report-notes">${reportNotes}${summary}</div>
+            </div>
+        `;
+    }
+    return content;
+}
+
+function renderReportSummary(data, isIMCLab) {
+    let content = '';
+    if (data.reportSummary || (data.reportProperties && !isIMCLab)) {
+        content += '<br/><br/>';
+        let reportProperties = '';
+
+        content += '<div id="report-summary" class="section">';
+        if (data.reportSummary) {
+            content += `
+                <div class="resume-title report-summary-title">${localeService.t('reportSummary')}</div>
+                <div class="section-content report-summary-content">${data.reportSummary}</div>
+            `;
+        }
+        /* add report properties */
+        if (data.reportProperties && !isIMCLab) {
+            for (const [key, value] of Object.entries(data.reportProperties)) {
+                reportProperties += `<p>${key}: ${value}</p>`;
+            }
+            content += `
+                <div class="resume-title report-properties-title">${localeService.t('reportProperties')}</div>
+                <div class="section-content report-properties-content">${reportProperties}</div>
+            `;
+        }
+        content += '</div>';
+    }
+
+    return content;
+}
+
+function renderSignature(data, isRtl, isIMCLab) {
+    let content = '';
+    let textAlign = isRtl ? 'right' : 'left';
+
+    // Lab address
+    let labAddress = '';
+    if (data.labAddress && data.labType !== 18) {
+        labAddress = data.labAddress.replace(/\n/g, "<br>");
+    }
+    content += `<td style="vertical-align: middle;"><div style="padding: 0 25px;font-size: 14px;text-align: ${textAlign};line-height: 1.4;word-break: break-all;">
+                           ${labAddress}
+                  </div></td>`;
+
+    // Lab tel, email, and site
+    let labPhone = data.labPhoneNumber ? `${localeService.t('Tel:')} ${data.labPhoneNumber}<br/>` : '';
+    let labEmail = data.labEmailAddress ? `${localeService.t('Email:')} ${data.labEmailAddress}<br/>` : '';
+    let labSite = data.moreLink ? `${data.moreLink}<br/>` : '';
+
+    if (data.labType === 18) {
+        labSite = "Web: http://www.smartdonor.it/<br/>";
+    }
+
+    if (labPhone || labEmail || labSite) {
+        content += `<td style="vertical-align: middle;"><div style="width: 2px; height: 100%;background:rgba(157,169,180, 0.5);min-height: 70px ">&nbsp;</div></td>`;
+    }
+    content += `<td style="vertical-align: middle;"><div style="padding: 0 25px;font-size: 14px;text-align: ${textAlign};line-height: 1.4;">
+                                     ${labPhone}
+                                     ${labEmail}
+                                     ${labSite}
+                         </div></td>`;
+
+    if (data.labType !== 18 && !isIMCLab && (data.labStamp || (data.signatures && data.signatures.length > 0))) {
+        content += `<td style="vertical-align: middle;"><div style="width: 2px; height: 100%;background:rgba(157,169,180, 0.5);min-height: 70px">&nbsp;</div></td>`;
+    }
+
+    if (data.labType !== 18 && data.signatures && data.signatures.length > 0) {
+        data.signatures.forEach((signature, index) => {
+            let approvedBy = signature.name;
+            content += `<td style="vertical-align: middle;">
+                            <div class="approved-by-doctor" style="padding: 0 25px;font-size: 14px;text-align: ${textAlign};line-height: 1.4;">
+                                <div>${localeService.t('Report approved by')}</div>
+                                <div>${approvedBy}</div>
+                                <img class="signature-image" style="height: 50px;width: auto;" src="${signature.signatureURL}">
+                            </div>
+                        </td>`;
+        });
+    }
+
+    if (data.labStamp && data.labType !== 18) {
+        content += `<td><img class="stamp-image a" style="padding: 0 25px;align-self: center;justify-self: center;webkit-align-items:center" src="${data.labStamp}" width="100"></td>`;
+    }
+
+    if (data.labType === 18) {
+        content += `<td><img class="stamp-image" style="float: right;padding: 0 25px;align-self: center;justify-self: center;webkit-align-items:center" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADVCAYAAADtl80QAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAbXUAAHOgAAD83QAAg2QAAHDoAADsaAAAMD4AABCQ5OyZ6gAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAALNxJREFUeNrtXQeYVEW2np4ZZphhhiGIBAUZkkQJIohhwYyKWdeEiCKICUwYFhMgGFcFAwKKomDCgBl1FdEVFHFVQAQFBQWRIEpwhkndr477t+9u29NdVTfVvXP+7zvfvrfL3K7410l1KiODwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwdDD/wGlgtpU8FGP8wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMS0yMFQxMjo1MzoyOSswMTowMF975WEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTUtMTEtMjBUMTI6NTM6MjkrMDE6MDAuJl3dAAAAAElFTkSuQmCC" width="100"></td>`;
+    }
+
+    return content;
+}
+
+function showDetailsView(data, isRtl) {
+    let biomarkerDetailsHtml = '';
+    let detailsSectionHTML = '';
+    let shouldShowSectionTitle = false;
+
+    data.panels.forEach((panel, counter) => {
+        /* Biomarker details template */
+        biomarkerDetailsHtml = renderBiomarkerDetails(panel, isRtl, counter);
+
+        /* Panel details template */
+        let checkShowInDetailsView = panel.biomarkers?.some(biomarker => biomarker.showInDetailsView);
+
+        if (panel.biomarkers && checkShowInDetailsView) {
+            shouldShowSectionTitle = true;
+            detailsSectionHTML += renderPanelDetails(panel, biomarkerDetailsHtml, counter, isRtl);
+        }
+    });
+
+    return detailsSectionHTML;
+}
+
+function renderReportItems(items, isCompactView = false, isRtl = false, isRectified = false, isAllergyItem = false, allergyClasses = [], forPatient = false) {
+    let content = '';
+    let counter = 0;
+    let itemCounter = 0;
+
+    items.forEach((dashboardItem, index) => {
+        let nestingLevel = dashboardItem.nestingLevel;
+
+        if (isAllergyItem) {
+            if (itemCounter === 0) {
+                itemCounter++;
+                return;
+            }
+            if (nestingLevel > 0) {
+                nestingLevel -= 1;
+            }
+        }
+
+        let showInCompactView = dashboardItem.showInCompactView || false;
+        let showInDetailsView = dashboardItem.showInDetailsView || false;
+
+        if (dashboardItem.biomarker || (dashboardItem.panel && dashboardItem.panel.panelBiomarker)) {
+            let bio = dashboardItem.biomarker || dashboardItem.panel.panelBiomarker;
+            counter++;
+            let indentationStyle = nestingLevel > 0 ? `margin-left:${nestingLevel * INDENTATION.BIOMARKER_DETAILS}px` : '';
+
+            let biomarkerContent = isAllergyItem
+                ? renderAllergyBiomarker(bio, nestingLevel, dashboardItem.isChildBiomarker, isCompactView, false, isRtl, showInDetailsView, isRectified, allergyClasses, forPatient)
+                : renderBiomarkerV3(bio, nestingLevel, dashboardItem.isChildBiomarker, isCompactView, false, isRtl, showInDetailsView, isRectified);
+
+            if (counter > 1 && !isCompactView && biomarkerContent) {
+                content += '<hr class="biomarker-container-line b">';
+            }
+            content += biomarkerContent;
+        } else if (dashboardItem.panel && !dashboardItem.panel.panelBiomarker && showInCompactView && isCompactView) {
+            content += renderPanelV3(dashboardItem.panel, nestingLevel, isCompactView, itemCounter, isRectified, isAllergyItem);
+        } else if (dashboardItem.panel && !dashboardItem.panel.panelBiomarker && showInDetailsView && !isCompactView) {
+            counter = 0;
+            content += renderPanelV3(dashboardItem.panel, nestingLevel, isCompactView, itemCounter, isRectified, isAllergyItem);
+        } else if (dashboardItem.insight && dashboardItem.showInDetailsView && !isCompactView) {
+            content += renderOneInsight(dashboardItem.insight, nestingLevel, isRtl);
+        } else if (dashboardItem.biomarkerAttachment) {
+            content += renderAttachmentsV3(dashboardItem.biomarkerAttachment, nestingLevel);
+        } else if (dashboardItem.biomarkerDetailsList) {
+            content += renderDetailsListV3(dashboardItem.biomarkerDetailsList, nestingLevel, isCompactView);
+        } else if (dashboardItem.biomarkerNote) {
+            content += renderNoteV3(dashboardItem.biomarkerNote, nestingLevel, isCompactView, showInCompactView, showInDetailsView);
+        }
+        itemCounter++;
+    });
+
+    return content;
+}
+
+function renderBiomarkerV3(biomarker, nestingLevel, isChildBiomarker, isCompactView, isComponent = false, isRtl = false, showInDetailsView = true, isRectified = false) {
+    let biomarkerCssId = `biomarker-${("db" + String(biomarker?.id ?? "")).toLowerCase()}${Math.floor(Math.random() * 3)}`;
+    let newBiomarkerHtml = '';
+    let biomarkerClass = '';
+    let biomarkerParentValueStyle = '';
+    let indentationStyle = '';
+
+    if (isCompactView && biomarker.showInCompactView) {
+        let biomarkerName = biomarker.fullName || '';
+        let biomarkerUnit = biomarker.unit;
+        let biomarkerValue = biomarker.formattedValue || biomarker.lingualReading || '';
+        let rangePlaceholder = '';
+        let referenceRange = '';
+        let biomarkerLast = '-';
+        let biomarkerPast = '-';
+
+        if (shouldRenderReadingLevels(biomarker)) {
+            rangePlaceholder = convertToMiniRangeLayout(biomarker.ranges, biomarker, isRtl);
+        }
+
+        if (biomarker.showScale) {
+            let normalRangeObject = biomarker.ranges.find(range => range.isReference) || {};
+            let formattedNormalRangeMin = normalRangeObject.formattedMinValue || null;
+            let formattedNormalRangeMax = normalRangeObject.formattedMaxValue || null;
+            referenceRange = biomarker.ranges.length > 1 ? getRange(biomarker) : '';
+        }
+
+        if (biomarker.color && !biomarker.isNormal) {
+            biomarkerClass = 'risk';
+            biomarkerParentValueStyle = `color:${biomarker.color};`;
+        }
+
+        if (nestingLevel > 0) {
+            let extraPadding = ((nestingLevel + 10 % 10) + 1);
+            let levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS;
+            indentationStyle = `padding-left: ${levelNesting}px`;
+        }
+
+        if (biomarker.history && biomarker.history.length > 1) {
+            let lastBiomarkerIndex = biomarker.history.length - 2;
+            biomarkerLast = biomarker.history[lastBiomarkerIndex]?.formattedValue || 0;
+            biomarkerPast = biomarker.history[lastBiomarkerIndex]?.formattedDate || '-';
+        }
+
+        if (biomarkerValue.length > 35) {
+            biomarkerParentValueStyle += "font-size:12px;line-height:1";
+        }
+
+        let firstTdWidth = '';
+        let tdWidth = '';
+        if (isCompactView) {
+            let fullPanelWidth = INDENTATION.PAGE_WIDTH;
+            let tdCount = 7;
+            let RectifiedTd = isRectified ? 32 : 0;
+            tdWidth = (fullPanelWidth - RectifiedTd) / tdCount;
+            firstTdWidth = `${tdWidth * 2}px`;
+        }
+
+        let biomarkerNameAlign = isRtl ? 'text-align: right;' : '';
+        const RTL_FLAG = '\u200E';
+
+        let isValueNumber = !isNaN(Number(biomarkerValue.replace(/\r\n/g, "<br/>")));
+        let valueDataType = isValueNumber ? "number" : "string";
+        let cleanBioMarkerUnit =
+            biomarkerUnit
+                .replace(/[\u200E\u200F\u202A-\u202E]/g, '')
+                .replace(/\(/g, '&#x28;')
+                .replace(/\)/g, '&#x29;');
+
+        newBiomarkerHtml += `<table id="${biomarkerCssId}" style="width:100%; margin: 0 auto;" class="biomarker-block biomarker-block-row ${biomarkerClass}">
+            <tr>
+                <td style="width:${firstTdWidth}">
+                    <div class="biom-title name" style="direction: ltr;${biomarkerNameAlign}${indentationStyle}">${biomarkerName}</div>
+                    <div class="biom-method method"></div>
+                </td>
+                <td class="biom-value value" style="width:max-content;">
+                    <span class="biom-parent-value value-text"  data-type="${valueDataType}" style="${biomarkerParentValueStyle}">${biomarkerValue.replace(/\r\n/g, "<br/>")}</span>
+                </td>
+                ${biomarkerUnit ?
+            `<td class="biom-unit unit">
+                <div class="biom-parent-unit unit-text" style="padding: 0 6px; font-family: 'Open Sans', sans-serif !important; direction: ltr !important; unicode-bidi: isolate !important;" dir="ltr">
+                   ${cleanBioMarkerUnit}
+                    </div>
+                </td>` : ''}
+                ${rangePlaceholder ? `<td class="biom-bar listing" style="width:${tdWidth}px; margin: 0;"><div class="range-placeholder b">${rangePlaceholder}</div></td>` : ''}
+                <td class="biom-range biom-range-data" style="width:${tdWidth}px; margin: 0;"><div class="parent-reference-range range">${referenceRange}</div></td>
+            </tr>
+        </table>`;
+    }
+    // ${isRtl ?RTL_FLAG+cleanBioMarkerUnit:cleanBioMarkerUnit}
+    if (!isCompactView && showInDetailsView) {
+        newBiomarkerHtml += renderOneBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent);
+    }
+
+    if (biomarker.components && biomarker.components.length > 0) {
+        biomarker.components.forEach(comp => {
+            comp.showInDetailsView = biomarker.showInDetailsView;
+            comp.showInCompactView = biomarker.showInCompactView;
+            comp.formattedNormalRangeMin = comp.min;
+            comp.formattedNormalRangeMax = comp.max;
+            newBiomarkerHtml += renderBiomarkerV3(comp, nestingLevel, isChildBiomarker, isCompactView, true, isRtl, showInDetailsView, isRectified);
+        });
+    }
+
+    if ((isCompactView && biomarker.showInCompactView) || (!isCompactView && biomarker.showInDetailsView)) {
+        if (biomarker.notes && biomarker.notes.length > 0) {
+            let BioNoteStyle = '';
+            if (nestingLevel > 0) {
+                let extraPadding = ((nestingLevel + 10 % 10) + 1);
+                let paddingLeft = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS + 8;
+                BioNoteStyle = isRtl ? `padding-right:${paddingLeft}px` : `padding-left:${paddingLeft}px`;
+            }
+            let notesPadding = isRtl ? 'padding: 0px 16px 10px 0px;' : 'padding: 0px 0px 10px 16px;';
+            let classNote = !isCompactView ? 'note-margin-bottom' : '';
+            if (useMonospace) {
+                const monoStyle = `font-style: normal; font-size: 13px; color: #333; font-family: 'Roboto Mono', monospace; white-space: pre-wrap; overflow-x: auto;`;
+                newBiomarkerHtml += `<div class="biomarker-notes 2 ${classNote}" style="${notesPadding} ${BioNoteStyle}"><span style="${monoStyle}">${biomarker.notes.join('<br/>')}</span></div>`;
+            } else {
+                newBiomarkerHtml += `<div class="biomarker-notes 2 ${classNote}" style="color: #8F8F92; ${notesPadding} ${BioNoteStyle}">${biomarker.notes.join('<br/>')}</div>`;
+            }
+        }
+    }
+
+    return newBiomarkerHtml;
+}
+
+function renderPanelV3(panel, nestingLevel, isCompactView, counter = null, isRectified = false, isAllergyItem = false) {
+
+
+    const panelCssId = `panel-${panel.panelId}db${Math.floor(Math.random() * 3)}`;
+    const notes = panel.notes ? panel.notes.join('') : '';
+    let classPanel = '';
+    if (panel.doctorNotes && isCompactView) {
+        classPanel = 'panel-with-notes';
+    }
+    let panelWidth = isCompactView ? 'width:687px' : '';
+    const colspan = isCompactView ? '1' : '4';
+    const doctorNotesCompactView = panel.doctorNotes && isCompactView
+        ? `<div class="section-content">${renderDoctorNotesCompactView(panel.doctorNotes, nestingLevel)}</div>`
+        : '';
+    const doctorNotesDetailsView = panel.doctorNotes && !isCompactView
+        ? `<div class="section-content-details-view">${renderDoctorNotes(panel.doctorNotes, nestingLevel)}</div>`
+        : '';
+    let newBiomarkerHtml = '';
+    let panelClass = '';
+    if (counter === 0 && !isCompactView) {
+        panelClass = "first-panel";
+    }
+
+    newBiomarkerHtml += `<!--panel-->
+                        <div id="${panelCssId}" class="section panel dontend ${panelClass}">`;
+
+    let panelNesting = "margin-left: auto;";
+    let panelTitleFontSize = '';
+    if (nestingLevel > 0) {
+        const extraPadding = ((nestingLevel + 10 % 10) + 1);
+        const levelNesting = extraPadding + nestingLevel * INDENTATION.PANEL_TITLE;
+        panelWidth = INDENTATION.PAGE_WIDTH - levelNesting;
+        panelNesting = `margin-left: ${levelNesting}px;width: ${panelWidth}px;`;
+        panelTitleFontSize = 'font-size:18px';
+    }
+
+    let firstTdWidth = '';
+    const RectifiedTd = isRectified ? 32 : 0;
+    let tdWidth = 0; // Declare tdWidth here to make it accessible outside the if block
+    if (isCompactView) {
+        const fullPanelWidth = INDENTATION.PAGE_WIDTH;
+        const tdCount = 7;
+
+        tdWidth = (fullPanelWidth - RectifiedTd) / tdCount;
+        firstTdWidth = `${tdWidth * 2}px`;
+    }
+
+    newBiomarkerHtml += `<div class="section-content-header ${classPanel}">
+                        <div class="panel-title" style="box-sizing: border-box; ${panelNesting}">
+                            <table style="width:100%; margin: 0 auto;" class="biomarker-block panel-section-header-new">
+                                <tr>`;
+
+    let allergyItemPanelClass = '';
+    if (isAllergyItem && isAllergyItem) {
+        allergyItemPanelClass = 'allergy-panel';
+        if (panel.icon) {
+            newBiomarkerHtml += `<td class="panel-icon-container">
+                                <img src="${panel.icon}"/>
+                                </td>`;
+        }
+    }
+
+    newBiomarkerHtml += `<td colspan="${colspan}" style="width:${firstTdWidth}">
+                        <div class="panel-title-text ${allergyItemPanelClass}" style="${panelTitleFontSize}">${panel.name}</div>
+                        ${doctorNotesCompactView}`;
+
+    if (notes) {
+        newBiomarkerHtml += `<div class="panel-notes">${notes}</div>`;
+    }
+
+    newBiomarkerHtml += `</td>`;
+
+    if (isCompactView) {
+        newBiomarkerHtml += `<td class="biom-range" style="width:${tdWidth}px; margin: 0;">
+                            ${localeService.t('Reference range')}
+                            </td>
+                        
+                            `;
+        if (isRectified) {
+            newBiomarkerHtml += `<td class="biom-past" style="width:${RectifiedTd}px"></td>`;
+        }
+    }
+
+    newBiomarkerHtml += `</tr></table>
+                        </div>
+                        </div>
+                        ${doctorNotesDetailsView}
+                        <!--panel END-->`;
+
+    return newBiomarkerHtml;
+}
+
+function renderAttachmentsV3(attachment, nestingLevel) {
+    if (!attachment) return '';
+
+    let blockStyle = '';
+    if (nestingLevel > 0) {
+        let extraPadding = ((nestingLevel + 10 % 10) + 1);
+        let levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS;
+        blockStyle = `padding-left: ${levelNesting}px`;
+    }
+
+    let ext = attachment.split(';');
+    if (ext[0].toLowerCase() === "data:application/pdf") {
+        return '';
+    } else {
+        let pos = attachment.indexOf(';');
+        let type = attachment.substring(0, pos).split(';');
+        if (type[0].includes('svg')) {
+            return `<div style="${blockStyle}" class="biomarker-attachment-item">${attachment}</div>`;
+        } else {
+            return `<img ${nestingLevel} style="${blockStyle};max-width:320px" class="biomarker-attachment-item" src="${attachment}" />`;
+        }
+    }
+}
+
+function renderDetailsListV3(detailsList, nestingLevel, isCompactView) {
+    let maxRowLength = -1;
+    let content = '';
+    let itemsCount = detailsList.map(item => item.length);
+    let colspanColumn = Math.max(...itemsCount);
+
+    detailsList.forEach(row => {
+        content += "<tr>";
+        row.forEach(item => {
+            let colspan = row.length === 1 ? colspanColumn : 1;
+            content += `<td colspan="${colspan}">${item}</td>`;
+        });
+
+        if (row.length > maxRowLength) {
+            maxRowLength = row.length;
+        }
+
+        if (row.length < maxRowLength) {
+            content += (row.length < colspanColumn && row.length !== 1) ? fillEmptyCellsWith(maxRowLength - row.length) : '';
+        }
+        content += "</tr>";
+    });
+
+    let blockStyle = '';
+    let plusPadding = isCompactView ? 8 : 18;
+    if (nestingLevel > 0) {
+        let extraPadding = ((nestingLevel + 10 % 10) + 1);
+        let levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS + plusPadding;
+        blockStyle = `padding-left: ${levelNesting}px`;
+    }
+
+    return `<div style="${blockStyle}" class="biomarker-details-table" style="padding:0 ${plusPadding}px"><table>${content}</table></div>`;
+}
+
+function renderNoteV3(note, nestingLevel, isCompactView, showInCompactView, showInDetailsView) {
+    // Standalone biomarkerNote items duplicate the note already rendered inside
+    // renderBiomarkerV3 (biomarker.notes), so they are intentionally suppressed
+    // here to avoid every note appearing twice. Monospace styling for PHA is
+    // handled where biomarker.notes is rendered.
+    return '';
+}
+
+function renderAllergyClasses(allergyClasses, isRtl = false) {
+    let count = allergyClasses.length;
+    let tableFloat = isRtl ? 'float: left;' : 'float: right;';
+    let unitAlign = isRtl ? 'text-align: left;right: 0;' : 'text-align: right;left: 0;';
+    let content = `<div class="allergy-classes-container">
+                        <span class="allergy-classes-unit" style="${unitAlign}">kU/L</span>
+                        <table class="allergy-classes-table colored" width="100%" cellspacing="0" cellpadding="0" style="${tableFloat}">
+                            <tr><td colspan="${count}" class="allergy-classes-table-title">${localeService.t('Allergy Reaction Strength')}</td></tr>`;
+
+    let tr1 = '<tr>';
+    let tr2 = '<tr>';
+
+    allergyClasses.forEach(classItem => {
+        let formattedMinValue = classItem.formattedMinValue;
+        let formattedMaxValue = classItem.formattedMaxValue;
+        let range = '';
+
+        if (!formattedMinValue && formattedMaxValue) {
+            range = `< ${formattedMaxValue}`;
+        }
+        if (formattedMinValue && formattedMaxValue) {
+            range = `${formattedMinValue} - ${formattedMaxValue}`;
+        }
+        if (formattedMinValue && !formattedMaxValue) {
+            range = `> ${formattedMinValue}`;
+        }
+
+        tr1 += `<td style="color:${classItem.color}">${classItem.className}</td>`;
+        tr2 += `<td style="color:${classItem.color}">${classItem.lingualReading}<br/>${range}</td>`;
+    });
+
+    tr1 += '</tr>';
+    tr2 += '</tr>';
+
+    content += tr1 + tr2 + '</table></div>';
+    return content;
+}
+
+function renderAllergyBiomarker(biomarker, nestingLevel, isChildBiomarker, isCompactView, isComponent = false, isRtl = false, showInDetailsView = true, isRectified = false, allergyClasses = [], forPatient = true) {
+    let newBiomarkerHtml = '';
+
+    if (!isCompactView && showInDetailsView) {
+        newBiomarkerHtml += renderOneAllergyBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent, allergyClasses, forPatient);
+    }
+
+    // Render its values inside components element
+    if (biomarker.components && biomarker.components.length > 0) {
+        biomarker.components.forEach(comp => {
+            comp.showInDetailsView = biomarker.showInDetailsView;
+            comp.showInCompactView = biomarker.showInCompactView;
+            comp.formattedNormalRangeMin = comp.min;
+            comp.formattedNormalRangeMax = comp.max;
+            newBiomarkerHtml += renderAllergyBiomarker(comp, nestingLevel, isChildBiomarker, isCompactView, true, isRtl, showInDetailsView, isRectified, allergyClasses, forPatient);
+        });
+    }
+
+    return newBiomarkerHtml;
+}
+
+function renderOneAllergyBiomarker(biomarker, isRtl, nestingLevel, isChildBiomarker, isComponent, allergyClasses, forPatient) {
+    const INDENTATION = {
+        BIOMARKER_DETAILS: 20, // Example value, replace with actual value
+        PANEL_TITLE: 10 // Example value, replace with actual value
+    };
+
+    let biomarkerDetailsHtml = '';
+    if (biomarker.showInDetailsView === true) {
+        const biomarkerCssId = "dtl-bio-db" + String(biomarker?.id ?? "").toLowerCase();
+        let customBiomarkerValueFontSize = '';
+        const formattedValue = biomarker.formattedValue.replace(/,/g, "");
+        if (formattedValue.length > 35) {
+            customBiomarkerValueFontSize = 'font-size:12px;';
+        }
+        const biomarkerName = biomarker.name || '';
+        const biomarkerStatus = biomarker.status || '';
+        const insightsCount = biomarker.insightsCount || '';
+        let CircleStyles = '';
+        if (!isComponent) {
+            CircleStyles = GetBiomarkerCircleStyle(biomarker.color, biomarkerName, biomarkerStatus, insightsCount, '', false);
+        }
+
+        // indent biomarker details based on panel level
+        let firstGridColClass = 'size5';
+        let bioIndentStyle = '';
+        let bioIndentNoteStyle = '';
+        if (nestingLevel > 0) {
+            // replace classes
+            // increase biomarker part
+            firstGridColClass = 'size5';
+            const extraPadding = ((nestingLevel + 10 % 10) + 1);
+            const levelNesting = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS;
+            const levelNestingNote = extraPadding + nestingLevel * INDENTATION.BIOMARKER_DETAILS + 16;
+            bioIndentStyle = 'padding-left: ' + levelNesting + 'px;';
+            bioIndentNoteStyle = 'padding-left: ' + levelNestingNote + 'px';
+        }
+
+        // @note: IMC special case (large biomarker value)
+        let biomarkerClass = '';
+        if (biomarker.formattedValue.length >= 125) {
+            biomarkerClass = 'large-value-class';
+            firstGridColClass = '';
+            //$firstGridColstyle = 'width:100%';
+        }
+
+        const biomarkerValue = biomarker.formattedValue.replace(/\r\n/g, "<br/>");
+
+        if (!biomarker.showScale) {
+            biomarkerClass += ' hide-scale ';
+        }
+
+        const biomarkerColor = biomarker.color && !biomarker.isNormal ? "color:" + biomarker.color + ";" : "";
+        let rangesPlaceholder = "";
+        let currentRange = "";
+        let currentPercent = 25;
+        let biomarkerTitleClass = '';
+        if (biomarker.ranges.length > 1) {
+            biomarkerTitleClass = 'has-ranges';
+        } else {
+            biomarkerTitleClass = 'has-no-ranges';
+        }
+
+        let childRangesPlaceholder = "";
+        let childCurrentRange = "";
+        let heightCount = 1;
+        let bioValue = "";
+        let bioUnit = "";
+        let afterBioInfoValue = '';
+        let History = '';
+        if (biomarker.childrenBiomarkers && biomarker.childrenBiomarkers.length > 0) {
+            biomarker.childrenBiomarkers.forEach(bio => {
+                if (bio.ranges.length > 1) {
+                    heightCount++;
+                    /* viewing the biomarker and unit of children after the parent ones */
+                    bioValue = bio.formattedValue.replace(/\n/g, "<br />");
+                    let bioValue_style = "";
+                    if (bioValue.length > 33) {
+                        bioValue_style = "font-size:12px;";
+                    }
+                    bioUnit = bio.unit;
+                    childCurrentRange = '';
+                    /* generating the children ranges and display them under the parent ones */
+                    childRangesPlaceholder += '<div class="extra-range-placeholder">'
+                        + convertToRangeLayout(bio.ranges, bio, isRtl)
+                        + '</div>';
+                    biomarkerTitleClass = 'has-ranges';
+                    afterBioInfoValue += '<div class="colorable pair">'
+                        + '<span class="biomarker-extra-value" style="' + bioValue_style + '">' + bioValue + '</span>'
+                        + '<span class="biomarker-extra-unit">' + bioUnit + '</span>'
+                        + '</div>';
+                } else {
+                    biomarkerTitleClass = 'has-no-ranges';
+                }
+                /*
+                $History = renderBiomarkerHistoryChart($bio);
+                */
+            });
+        } else {
+            /*
+            $History = renderBiomarkerHistoryChart($biomarker);
+            */
+        }
+
+        if (heightCount > 1) {
+            biomarkerClass += 'hide-flag';
+        }
+
+        /* set biomarker history chart */
+
+        const biomarkerFullName = biomarker.fullName || '';
+        let bioName = biomarkerFullName.replace(/\r\n/g, '');
+        bioName = bioName.replace(/\n/g, '');
+        const rangePlaceHolder = convertToRangeLayout(biomarker.ranges, biomarker, isRtl);
+        let biomarkerSampleHTML = '';
+        let biomInfoStyle = '';
+        let biomValueAlignStyle = '';
+        if (biomarker.sample) {
+            biomarkerSampleHTML += '<div class="biom-sample">'
+                + '<span class="biom-sample-value">'
+                + biomarker.sample
+                + '</span>'
+                + '</div>';
+            //	$biomValueAlignStyle = "vertical-align: bottom;";
+        }
+        if (!biomarker.sample && (rangePlaceHolder || childRangesPlaceholder || History)) {
+            biomInfoStyle = "margin-top:15px;";
+        }
+
+        // Configurations
+        let biomarkerScale = '';
+        if (isChildBiomarker) {
+            //	$biomarkerScale = 'transform:scale(.9);';
+        }
+        let biomCircleCss = '';
+        if (isComponent) {
+            biomCircleCss = 'opacity: 0;';
+            biomarkerSampleHTML = '';
+            bioName = '';
+        }
+        let panelNesting = '';
+        let biomarkerTitleWidth = 'width:260px';
+        if (nestingLevel > 0) {
+            const extraPadding = ((nestingLevel + 10 % 10) + 1);
+            const levelNesting = extraPadding + nestingLevel * INDENTATION.PANEL_TITLE;
+            panelNesting = isRtl ? 'padding-right: ' + levelNesting + 'px;box-sizing:border-box;' : 'padding-left: ' + levelNesting + 'px;box-sizing:border-box;';
+            const width = 260 - levelNesting;
+            biomarkerTitleWidth = 'width:' + width + 'px';
+        }
+
+        if (!rangePlaceHolder && !childRangesPlaceholder && !History) {
+            biomarkerScale += 'width:100%;';
+        }
+        const doctorNotesArr = biomarker.doctorNotes || [];
+        const doctorNotes = renderDoctorNotes(doctorNotesArr, bioIndentNoteStyle);
+
+        biomarkerDetailsHtml += '<div data-id="' + biomarkerCssId + '" class="allergy-biomarker-container biomarker-container grid-col ' + biomarkerClass + '">'
+            + '<!--panel title was her in the first biomarker -->'
+            + '<div class="grid-col ' + firstGridColClass + ' ' + biomarkerClass + '" style="' + biomarkerScale + panelNesting + '">'
+            + '<div class="biomarker">'
+            + '<div class="biom-circle" style="' + removeWhiteSpace(CircleStyles) + ';' + biomCircleCss + '">' + biomarkerName + '</div>'
+            + '<div class="biom-info ' + biomarkerTitleClass + '" style="' + biomInfoStyle + '">'
+            + '<div class="title ' + biomarkerTitleClass + '" style="' + biomarkerTitleWidth + '">' + biomarkerSampleHTML + '<span class="bio-name-info a" style="color: #555558;">' + bioName + '</span></div>'
+            + '<div class="value colorable" style="' + biomValueAlignStyle + '">'
+            + biomarkerSampleHTML
+            + '<div class="pair parent-pair">'
+            + '<span class="value-text">'
+            + '<span style="' + customBiomarkerValueFontSize + biomarkerColor + '">' + biomarkerValue + '</span>'
+            + '</span>'
+            + '<span class="unit colorable">' + biomarker.unit + '</span>'
+            + '</div>'
+            + '</div>'
+            + afterBioInfoValue
+            + '</div>'
+            + '</div>';
+
+        if (doctorNotes) {
+            biomarkerDetailsHtml += '<div class="grid-row biomarker-insights a">'
+                + doctorNotes
+                + '</div>';
+        }
+
+        if (biomarker.notes && biomarker.notes.length > 0) {
+            if (nestingLevel > 0) {
+                // $extraPadding = (($nestingLevel + 10 % 10) + 1);
+                // $levelNesting = $extraPadding + $nestingLevel * $INDENTATION['BIOMARKER_DETAILS'] + 5;
+                // $bioIndentStyle = 'padding-left: ' . $levelNesting . 'px;';
+            }
+            bioIndentStyle = isRtl ? 'padding-right: 16px;' : 'padding-left: 16px;';
+
+            if (useMonospace) {
+                const monoStyle = `font-style: normal; font-size: 13px; color: #333; font-family: 'Roboto Mono', monospace; white-space: pre-wrap; overflow-x: auto;`;
+                biomarkerDetailsHtml += '<div class="biomarker-notes 1" style="padding-top: 10px;' + bioIndentStyle + '">';
+                biomarkerDetailsHtml += `<span style="${monoStyle}">` + biomarker.notes.join('<br/>') + '</span>';
+                biomarkerDetailsHtml += '</div>';
+            } else {
+                biomarkerDetailsHtml += '<div class="biomarker-notes 1" style="color: #8F8F92;padding-top: 10px;' + bioIndentStyle + '">';
+                biomarkerDetailsHtml += biomarker.notes.join('<br/>');
+                biomarkerDetailsHtml += '</div>';
+            }
+        }
+        biomarkerDetailsHtml += '</div> <!-- end first col -->';
+
+        if (allergyClasses) {
+            const rangeIndex = biomarker.rangeIndex;
+            biomarkerDetailsHtml += '<table class="allergy-classes-table" width="100%" cellspacing="0" cellpadding="0" range="' + rangeIndex + '">';
+
+            let tr1 = '<tr>';
+
+            allergyClasses.forEach((cls, index) => {  // Renamed 'class' to 'cls' to avoid conflict
+                const formattedMinValue = cls.formattedMinValue;
+                const formattedMaxValue = cls.formattedMaxValue;
+                let range = '';
+
+                if (!formattedMinValue && formattedMaxValue) {
+                    range = `< ${formattedMaxValue}`;
+                } else if (formattedMinValue && formattedMaxValue) {
+                    range = `${formattedMinValue} - ${formattedMaxValue}`;
+                } else if (formattedMinValue && !formattedMaxValue) {
+                    range = `> ${formattedMinValue}`;
+                }
+
+                let value = '';
+
+                if (index === rangeIndex) {
+                    let currentRange = biomarker.ranges[rangeIndex];
+                    let currentPercent = 0;
+
+                    if (currentRange.minValue !== undefined && currentRange.maxValue !== undefined) {
+                        currentPercent = ((parseFloat(biomarker.value) - currentRange.minValue) / (currentRange.maxValue - currentRange.minValue)) * 100;
+                    }
+
+                    currentPercent = Math.max(8, Math.min(77, currentPercent)); // Ensures percent is between 8 and 77
+                    const imagePlace = isRtl ? `right: ${currentPercent}%` : `left: ${currentPercent}%`;
+
+                    value = `<span index="${rangeIndex}" class="colored-value" patient="${forPatient}" style="background:${cls.color}">`;
+
+                    if (!forPatient) {
+                        value += biomarker.formattedValue;
+                    } else {
+                        value += `<span style="${imagePlace}" class="white-circle"></span>`;
+                    }
+
+                    value += `</span>`;
+                }
+
+                tr1 += `<td>${value}</td>`;
+            });
+            allergyClasses.forEach((cls, index) => {  // Renamed 'class' to 'cls' to avoid conflict
+                const formattedMinValue = cls.formattedMinValue;
+                const formattedMaxValue = cls.formattedMaxValue;
+                let range = '';
+
+                if (!formattedMinValue && formattedMaxValue) {
+                    range = `< ${formattedMaxValue}`;
+                } else if (formattedMinValue && formattedMaxValue) {
+                    range = `${formattedMinValue} - ${formattedMaxValue}`;
+                } else if (formattedMinValue && !formattedMaxValue) {
+                    range = `> ${formattedMinValue}`;
+                }
+
+                let value = '';
+
+                if (index === rangeIndex) {
+                    let currentRange = biomarker.ranges[rangeIndex];
+                    let currentPercent = 0;
+
+                    if (currentRange.minValue !== undefined && currentRange.maxValue !== undefined) {
+                        currentPercent = ((parseFloat(biomarker.value) - currentRange.minValue) / (currentRange.maxValue - currentRange.minValue)) * 100;
+                    }
+
+                    currentPercent = Math.max(8, Math.min(77, currentPercent)); // Ensures percent is between 8 and 77
+                    const imagePlace = isRtl ? `right: ${currentPercent}%` : `left: ${currentPercent}%`;
+
+                    value = `<span index="${rangeIndex}" class="colored-value" patient="${forPatient}" style="background:${cls.color}">`;
+
+                    if (!forPatient) {
+                        value += biomarker.formattedValue;
+                    } else {
+                        value += `<span style="${imagePlace}" class="white-circle"></span>`;
+                    }
+
+                    value += `</span>`;
+                }
+
+                tr1 += `<td>${value}</td>`;
+            });
+
+            tr1 += '</tr>';
+            biomarkerDetailsHtml += tr1 + '</table>';
+        }
+
+        biomarkerDetailsHtml += '</div> <!-- end first  close biomarker-container-->';
+    }
+    return biomarkerDetailsHtml;
+}
+
+// Helper functions (assuming they exist in your code)
+function GetBiomarkerCircleStyle(BiomarkerColor, BiomarkerName, BiomarkerStatus, BiomarkerInsightsCount, PanelName, isSummary, item = []) {
+    let CircleStyles = '';
+    let fontSize = BiomarkerName && BiomarkerName.length > 6 ? '12px' : '14px';
+    let color = BiomarkerColor || "#555555";
+    let BioColor = BiomarkerColor || "#E05A5A";
+    let backgroundColor = BioColor ? 'transparent' : "#E05A5A30";
+
+    if (isSummary) {
+        CircleStyles = `background-color: ${backgroundColor}; border: 2px solid ${BioColor}; color: ${color}; font-size: ${fontSize};`;
+    } else {
+        BioColor = BiomarkerColor || "#555555";
+        CircleStyles = `background-color: transparent; border: 2px solid ${BioColor}; color: ${color}; font-size: ${fontSize};`;
+    }
+
+    if ((BiomarkerInsightsCount !== undefined && BiomarkerStatus !== undefined) || BiomarkerInsightsCount === null || BiomarkerStatus === null) {
+        backgroundColor = (BiomarkerInsightsCount || PanelName.toLowerCase() === 'health risk calculators') ? BiomarkerColor : "transparent";
+        let BiomarkerBorder = (BiomarkerInsightsCount || PanelName.toLowerCase() === 'health risk calculators') ? `2px solid ${BiomarkerColor}` : `2px solid ${BiomarkerColor}`;
+        color = BiomarkerInsightsCount ? "#ffffff" : BiomarkerColor;
+        fontSize = BiomarkerName && PanelName.toLowerCase().length > 6 ? "12px" : "14px";
+
+        CircleStyles = `background-color: ${backgroundColor}; border: ${BiomarkerBorder}; color: ${color}; font-size: ${fontSize};`;
+
+        if (BiomarkerStatus !== 1 && BiomarkerStatus !== "1") {
+            fontSize = BiomarkerName && BiomarkerName.length > 7 ? "12px" : "14px";
+            CircleStyles = `background-color: transparent; border: 2px solid rgba(0,0,0,.4); color: rgba(0,0,0,.4); font-size: ${fontSize};`;
+        }
+    }
+    return CircleStyles;
+}
+
+function convertToRangeLayout(ranges, biomarker, isRtl) {
+
+    let barHTML = '';
+    if (ranges.length > 1) {
+        barHTML += '<table>';
+        let tr1 = '<tr class="ranges">';
+        let tr2 = '<tr class="labels">';
+        let tr3 = '<tr class="values">';
+        let currentPercent = 50;
+        let currentRange = "";
+
+        ranges.forEach(range => {
+            let isCurrentClass = range.isCurrent ? "current" : "";
+            let labelClass = range.isCurrent ? 'colorable' : "";
+            let rangeTitle = '';
+            let rangeArrow = '';
+
+            if (range.isCurrent) {
+                currentRange = `${range.minValue} - ${range.maxValue}`;
+                if (range.minValue && range.maxValue) {
+                    currentPercent = (((parseFloat(biomarker.value) - range.minValue) / (range.maxValue - range.minValue)) * 100);
+                }
+                currentPercent = Math.min(90, currentPercent);
+                let imagePlace = isRtl ? `padding-right:${currentPercent}%` : `padding-left:${currentPercent}%`;
+                rangeArrow = `<img class="range-arrow-layout" style="${imagePlace}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAATBJREFUWAnNjgmOAjEQA/M0P90/23UhsdICw1w5uqSgIem2q7XWnPNT/ODYlFNdFMcHzm9VWdz+UL6qiuL2D+dfNVmc3lBuqoni9BHntoosLpsoL1VEcfmK87paFoddlInVojgcwplaJUv3YZTJVaJ0n8KZni1L52mUjdmidF7C2ZolS9dllM1ZonTdwtkeLUvHbZSE0aJ0dMFJGSVLdjeUpFGiZHfFSestS2Z3lMTeomQOwUntJUvWMJTkXqJkDcVJvytLxnCUhruiZEzBabkqy+40lKarouxOxWk7K8vOdJTGs6LsLMFpPSrL7DKU5qOizC7Fad+TZWY5isGeKDMlcCy2ZHkrg2KyJcpbKRybV1nuyqEYvYpyVxLH6inLd1kUs6co36Vx7DjlUQw5XfkFNeBu5tFKZ1EAAAAASUVORK5CYII="/>`;
+            }
+
+            rangeTitle = getRangeBar(biomarker, range, biomarker.normalRangeType);
+            let colorClass = color(range.color);
+            tr1 += `<td style="background-position-x:${currentPercent}%;" class="${colorClass} ${isCurrentClass}">${rangeArrow}<div class="range colorablebg" style="background:${colorClass}"></div></td>`;
+            tr2 += `<td class="${isCurrentClass} ${colorClass}"><span class="${labelClass}">${range.name}</span></td>`;
+            tr3 += `<td>${rangeTitle}</td>`;
+        });
+
+        barHTML += tr1 + '</tr>' + tr3 + '</tr>' + tr2 + '</tr>';
+        barHTML += '</table>';
+    }
+    return barHTML;
+}
+
+
+function removeWhiteSpace(html) {
+    html = html.replace(/\r\n/g, "");
+    return html.replace(/>\s+</g, "><");
+}
+
+function fetchFileContents(filePath) {
+    try {
+        return fs.readFileSync(filePath, 'utf8');
+    } catch (error) {
+        console.error('Error reading file:', error);
+        return null;
+    }
+}
+
+function parseTable(string) {
+    let levels = string.split("\n");
+    let list = levels.map(level => {
+        return {
+            id: random(2, 6),
+            content: level,
+            sepCount: separtorsNumbers(level)
+        };
+    });
+
+    let parent = list[0].sepCount;
+
+    for (let i = 0; i < list.length; i++) {
+        if (i === 0) {
+            list[i].parent_id = "0";
+            continue;
+        }
+
+        if (parent === list[i].sepCount) {
+            list[i].parent_id = "0";
+            continue;
+        }
+
+        if (list[i - 1]) {
+            if (list[i].sepCount > list[i - 1].sepCount) {
+                list[i].parent_id = list[i - 1].id;
+            } else if (list[i].sepCount === list[i - 1].sepCount) {
+                list[i].parent_id = list[i - 1].parent_id;
+            } else {
+                list[i].parent_id = findParentId(i - 1, list[i].sepCount, list);
+            }
+        }
+    }
+
+    return list_to_tree(list, "0");
+}
+
+function renderDetails(list, isRtl) {
+    if (list.length === 1 && !list[0].children) {
+        return `<li class="1">${list[0].content.substring(list[0].sepCount)}</li>`;
+    }
+
+    let columns = [];
+    let isParent = false;
+
+    list.forEach(child => {
+        if (child.parent_id === "0") isParent = true;
+        let div = '';
+
+        if (!child.children) {
+            let childContent = child.content.substring(child.sepCount);
+            childContent = childContent.replace('(', '(').replace(')', ')');
+
+            if (isRtl) {
+                // Optional RTL handling here
+            }
+
+            div = `<li class="2">${childContent}</li>`;
+        } else {
+            div = `<li class="arrow-icon">${child.content.substring(child.sepCount)}</li>
+                   <ul>${renderDetails(child.children, isRtl)}</ul>`;
+        }
+
+        if (div) columns.push(div);
+    });
+
+    return columns.length > 0 ? columns.join('') : null;
+}
+
+function GetRelatedBiomarker(biomarkerstyle, name, fullname) {
+    let fontSize = '';
+    if (name && fullname) {
+        if (name.length >= 7) {
+            fontSize = 'small-fontSize-circle';
+        }
+        return `<div class="related">
+                    <div class="bicon ${fontSize}" style="${biomarkerstyle}">
+                        <span class="bicon-inner">${name}</span>
+                    </div>
+                </div>`;
+    }
+    return null;
+}
+
+function color(hex) {
+    switch (hex) {
+        case "#E05A5A":
+            return "red";
+        case "#EE734E":
+            return "orange";
+        case "#41B9D6":
+            return "blue";
+        case "#F7AA2E":
+            return "yellow";
+        case "#BC2828":
+            return "dark-red";
+        case "#02D9D1":
+        case "#05B9AF":
+            return "green";
+        case "#0F0F0F":
+            return "black";
+        case "#87B7CE":
+            return "lightblue";
+        case "#FB7377":
+            return "light-red";
+        default:
+            return hex;
+    }
+}
+
+function getRangeBar(item, level, normalRangeType = '') {
+
+    let range = '';
+    let min = level.formattedMinValue;
+    let max = level.formattedMaxValue;
+
+    if (item.ranges && item.ranges.length > 0) {
+        let customBioWithTwoRangesAndNormalExist = false;
+        if (item.isCustom && item.ranges.length === 2) {
+            let normalRange = item.ranges.find(range => range.isReference);
+            if (normalRange) customBioWithTwoRangesAndNormalExist = true;
+        }
+
+        let rangeIndex = item.ranges.findIndex(range => range.isReference);
+
+        let readingLevels = item.ranges;
+        let prevItem = rangeIndex - 1;
+
+        if (max !== null || min !== null) {
+
+            if (level.isReference === true) {
+                switch (normalRangeType) {
+                    case 0 | "0":
+                        range = min !== null && max !== null ? `${min} - ${max}` : min === null ? `<= ${max}` : `>= ${min}`;
+
+                        if (prevItem >= 0 && readingLevels[prevItem]?.formattedMaxValue === min) {
+                            range = `> ${min}`;
+                        }
+                        break;
+                    case 1 | "1":
+                        range = `< ${max}`;
+                        break;
+                    case 2 | "2":
+                        range = `<= ${max}`;
+                        break;
+                    case 3 | "3":
+                        range = `> ${min}`;
+                        break;
+                    case 4 | "4":
+                        range = `>= ${min}`;
+                        break;
+                }
+            } else {
+                range = min !== null && max !== null ? `${min} - ${max}` : min === null ? `< ${max}` : `> ${min}`;
+                if (prevItem >= 0 && readingLevels[prevItem]?.formattedMaxValue === min) {
+                    range = `>= ${min}`;
+                    if (prevItem >= 0 && readingLevels[prevItem]?.formattedMaxValue === min) {
+                        range = `> ${min}`;
+                    }
+                }
+
+                if (customBioWithTwoRangesAndNormalExist) {
+                    switch (normalRangeType) {
+                        case "0":
+                            range = min !== null && max !== null ? `${min} - ${max}` : min === null ? `< ${max}` : `> ${min}`;
+                            break;
+                        case "1":
+                            range = min !== null ? `>= ${min}` : range;
+                            break;
+                        case "2":
+                            range = min !== null ? `> ${min}` : range;
+                            break;
+                        case "3":
+                            range = max !== null ? `<= ${max}` : range;
+                            break;
+                        case "4":
+                            range = max !== null ? `< ${max}` : range;
+                            break;
+                    }
+                }
+            }
+        }
+    }
+    return range;
+}
+
+function separtorsNumbers(string) {
+    let last = string.lastIndexOf('#');
+    let first = string.indexOf('#');
+
+    if (first !== -1 && first !== 0) {
+        return 0;
+    }
+
+    let subString = string.substring(first, last + 1);
+    let mySplits = subString.split('');
+    let isLevel = mySplits.every(char => char === "#");
+
+    return isLevel ? mySplits.length : separtorsNumbers(string.substring(first, last));
+}
+
+function shouldRenderReadingLevels(biomarker, isComponentItem = false) {
+    return biomarker && biomarker.ranges.length > 1 && (biomarker.showScale || isComponentItem);
+}
+
+function convertToMiniRangeLayout(ranges, biomarker, isRtl) {
+    let barHTML = '';
+
+    if (ranges.length > 0) {
+        barHTML += '<div class="bar">';
+        ranges.forEach(range => {
+            let colorClass = color(range.color);
+            let label = range.name;
+            let isCurrentClass = range.isCurrent ? "current" : "";
+            let rangeTitle = `${range.minValue} - ${range.maxValue}`;
+            let imgCurrent = '';
+
+            if (range.isCurrent) {
+                let currentRange = `${range.minValue} - ${range.maxValue}`;
+                let currentPercent = null;
+                if (range.minValue && range.maxValue) {
+                    currentPercent = (((parseFloat(biomarker.value) - range.minValue) / (range.maxValue - range.minValue)) * 100);
+                }
+                currentPercent = currentPercent / 2;
+                let imagePlace = currentPercent ? `left: ${currentPercent}%` : '';
+                if (isRtl) {
+                    imagePlace = currentPercent ? `right: ${currentPercent}%` : '';
+                }
+                imgCurrent = `<img style="${imagePlace}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhBAMAAAClyt9cAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA8ObIrYNJLyOprz29AAAAaUlEQVQoz2OgPyg1mmRagCzQMhMIpjQgBNgkZ4KAGEIkcyYEJMAEOCShIhIwEZaZUDAFJlI5EwZg1kXCRQKgIpZwEQOoiCZcRAEqMhMOJmCqwTQH0y5M92C4GdNfmH7HCB/MMMQMZ7oDAAe/ZbNL9bq2AAAAAElFTkSuQmCC" />`;
+            }
+            barHTML += `<div class="segment ${colorClass} ${isCurrentClass}" style="background:${colorClass}">${imgCurrent}</div>`;
+        });
+        barHTML += '</div>';
+    }
+    return barHTML;
+}
+
+function getRange(item, normalRangeKey = "isReference") {
+    let range = '';
+    if (item.ranges && item.ranges.length > 0) {
+        let itemValues = item.ranges.find(range => range[normalRangeKey] === true);
+        let rangeIndex = item.ranges.findIndex(range => range[normalRangeKey] === true);
+        let readingLevels = item.ranges;
+
+        let max = itemValues?.formattedMaxValue ?? null;
+        let min = itemValues?.formattedMinValue ?? null;
+        let normalRangeType = item.normalRangeType;
+        let prevItem = rangeIndex - 1;
+
+        if (max !== null || min !== null) {
+            if (max !== null && min !== null) {
+                range = `${min} - ${max}`;
+            } else if (max !== null) {
+                range = `< ${max}`;
+            } else if (min !== null) {
+                range = `> ${min}`;
+            }
+
+            switch (String(normalRangeType)) {
+                case "0":
+                    if (max !== null && min !== null) {
+                        range = `${min} - ${max}`;
+                    } else if (max !== null) {
+                        range = `<= ${max}`;
+                    } else if (min !== null) {
+                        range = `>= ${min}`;
+                    }
+                    break;
+                case "1":
+                    if (max !== null) range = `< ${max}`;
+                    break;
+                case "2":
+                    if (max !== null) range = `<= ${max}`;
+                    break;
+                case "3":
+                    if (min !== null) range = `> ${min}`;
+                    break;
+                case "4":
+                    if (min !== null) range = `>= ${min}`;
+                    break;
+            }
+        }
+    }
+    return range;
+}
+
+function find(array, key, value) {
+    for (let single of array) {
+        if (single[key] === value) {
+            return single;
+        }
+    }
+    return null;
+}
+
+function renderBiomarkerHistoryChart(biomarker) {
+    let content = '';
+    const history = biomarker.history && biomarker.history.length > 0 ? biomarker.history : [];
+
+    // Custom biomarker shouldn't have a chart
+    if (history.length > 1) {
+        const biomarkerCssChartId = "chart-bio-db" +
+            Math.random().toString(36).substring(2, 8) +
+            String(biomarker?.id ?? "").toLowerCase();
+        content += `<canvas id="${biomarkerCssChartId}" width="100%" height="30" class="chart-canvas"></canvas>`;
+        const dataset = [];
+        const dataColor = [];
+        const dataColorLabels = [];
+        const dataLabel = [];
+        const unit = [];
+        const dataFormattedValues = [];
+
+        history.forEach((item, index) => {
+            dataset[index] = parseInt(biomarker.type) ? parseFloat(item.value) : item.rangeIndex;
+            dataFormattedValues[index] = item.formattedValue;
+            dataColor[index] = item.color;
+            dataColorLabels[index] = item.color === "#E05A5A" ? item.color : "rgba(51,51,51, 0.8)";
+            dataLabel[index] = item.formattedDate;
+            unit[index] = item.unit;
+        });
+
+        const maxOfChart = Math.max(...dataset) + 0.5;
+        const differenceRange = Math.max(...dataset) - Math.min(...dataset);
+        let stepSizeNumber = 0.5;
+        if (differenceRange > 100) {
+            stepSizeNumber = 0;
+        }
+
+        content += `
+            <script>
+                $(document).ready(function() {
+                    function showChart() {
+                        const ctx = document.getElementById("${biomarkerCssChartId}").getContext("2d");
+                        new Chart(ctx, {
+                            type: "line",
+                            data: {
+                                labels: ${JSON.stringify(dataLabel)},
+                                datasets: [{
+                                    data: ${JSON.stringify(dataset)},
+                                    dataFormattedValues: ${JSON.stringify(dataFormattedValues)},
+                                    pointBorderColor: "transparent",
+                                    pointRadius: 6,
+                                    pointBorderWidth: 2,
+                                    lineTension: 0,
+                                    fill: false,
+                                    pointBackgroundColor: ${JSON.stringify(dataColor)},
+                                    fill: false
+                                }]
+                            },
+                            options: {
+                                layout: {
+                                    padding: {
+                                        top: 30,
+                                        bottom: 30,
+                                        left: 50,
+                                        right: 40
+                                    }
+                                },
+                                legend: {
+                                    display: false,
+                                    fontColor: "black"
+                                },
+                                tooltips: { enabled: false },
+                                plugins: {
+                                    datalabels: {
+                                        display: "block",
+                                        color: ${JSON.stringify(dataColorLabels)},
+                                        align: "top",
+                                        anchor: "end",
+                                        clamp: true,
+                                        clip: false,
+                                        font: {
+                                            lineHeight: 1.2,
+                                            size: 12,
+                                            style: "normal"
+                                        },
+                                        formatter: function(value, context) {
+                                            return " " + context.dataset.dataFormattedValues[context.dataIndex];
+                                        }
+                                    }
+                                },
+                                document: true,
+                                window: true,
+                                hover: false,
+                                beginAtZero: false,
+                                responsive: true,
+                                maintainAspectRatio: true,
+                                scales: {
+                                    yAxes: [{
+                                        ticks: {
+                                            suggestedMax: ${maxOfChart},
+                                            suggestedMin: 0,
+                                            stepSize: ${stepSizeNumber}
+                                        },
+                                        display: false
+                                    }],
+                                    xAxes: [{
+                                        gridLines: {
+                                            display: false
+                                        }
+                                    }]
+                                },
+                                animation: {
+                                    onComplete: function() {
+                                        window.JSREPORT_READY_TO_START = true;
+                                    }
+                                }
+                            }
+                        });
+                    }
+                    setTimeout(showChart, 200);
+                });
+            </script>
+        `;
+    }
+
+    return content;
+}
+
+
+module.exports = {
+    renderReportItems,
+    find,
+    renderSummary,
+    renderReportSummary,
+    renderHTMLTemplate,
+    renderAllergyClasses,
+    setUseMonospace,
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+