@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.5

package/src/Custom/TableComponent/PreviewPrescriptionNew.js

@@ -0,0 +1,1011 @@
+import React, { useState, useImperativeHandle, forwardRef, useContext } from 'react';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  PermissionsAndroid,
+  Platform,
+  Dimensions,
+} from 'react-native';
+import { Global } from '../../Common/Global';
+import { height, normalize, width } from '../../CommonStyle/componentStyle';
+import RNHTMLtoPDF from 'react-native-html-to-pdf';
+import Dropdown from '../../Json/Dropdown.json';
+import { isBNUL, isNU, isNUQZ, notifyMessage, ValueCheck } from '../../CommonStyle/ComponentFunctions';
+import RNFetchBlob from 'rn-fetch-blob';
+import Loader from '../Loader';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import RNPrint from 'react-native-print';
+import NetworkServiceCall from '../../Common/NetworkServiceCall';
+import { APIURL, imageURL } from '../../Common/apiConstants';
+import axios from 'axios';
+import WebView from 'react-native-webview';
+import EmrResponseComponentContext from '../../Handlers/emrResponseComponentContext';
+import { convertStringToArrayWeekDay } from '../../CommonStyle/ComponentFunctions';
+
+export const PreviewPrescriptionNew = forwardRef((props, ref) => {
+
+  const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+
+  useImperativeHandle(ref, () => ({
+    pdf() {
+      createPDF();
+    },
+    print() {
+      fnPrint();
+    },
+  }));
+
+  const [data, setData] = useState(
+    props.data != null && props.data != undefined
+      ? props.data.sort((a, b) => a.outsidemedicine - b.outsidemedicine)
+      : props.data,
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  function reverse(s) {
+    if (s != undefined) {
+      var fields = s.split('T');
+
+      if (fields != undefined && fields.length > 0) {
+        return fields[0].split('-').reverse().join('-');
+      } else {
+        return s.split('-').reverse().join('-');
+      }
+      // return s.split('-').reverse().join('-');
+    }
+  }
+
+  function getDosageUnit(details) {
+    // console.log('GGGGGGGGGGGGGG', Global.DosageArray)
+    let dropdownvaluenew4;
+    Global.DosageArray != null && Global.DosageArray != undefined
+      && Global.DosageArray.length > 0
+      ? Global.DosageArray.map(val => {
+        if (val.datavalue == parseInt(details)) {
+          dropdownvaluenew4 = val.displayvalue;
+        }
+      })
+      : null;
+    return dropdownvaluenew4;
+  }
+
+  function fnHtml(multi, multitiming) {
+
+    var newArray = multi.timingdata[0].timings.timingsarray.filter(function (el) {
+      return el.usagename != '' &&
+        el.dosage != undefined;
+    });
+
+
+
+    return (
+      newArray.map((timing, i) => {
+
+        return timing.usagename != '' &&
+          timing.dosage != undefined ?
+          `   
+              <div style="display: flex;flex-direction: column;justify-content:center;align-items:center;margin-top:5px;margin-bottom:5px;">
+                <div style="font-weight:normal;font-size:10px;">
+                  <b style="font-size:15px;">${timing.dosage[0].volume ? timing.dosage[0].volume : ''}</b>
+                  ${timing.dosage[0].unit != null && timing.dosage[0].unit != undefined && timing.dosage[0].unit != '' && getDosageUnit(timing.dosage[0].unit) != null && getDosageUnit(timing.dosage[0].unit) != undefined && getDosageUnit(timing.dosage[0].unit) != '' && getDosageUnit(timing.dosage[0].unit) != 'Not Applicable' ? getDosageUnit(timing.dosage[0].unit) : ''} 
+                  ${multi.timingdata[0].timings.timingcategorycode &&
+            multi.timingdata[0].timings.timingcategorycode != null &&
+            multi.timingdata[0].timings.timingcategorycode != undefined &&
+            multi.timingdata[0].timings.timingcategorycode == 4 ||
+            multi.timingdata[0].timings.timingcategorycode &&
+            multi.timingdata[0].timings.timingcategorycode != null &&
+            multi.timingdata[0].timings.timingcategorycode != undefined &&
+            multi.timingdata[0].timings.timingcategorycode == 8
+            ? getDropDownIntake(timing.dosage[0].intake) &&
+              getDropDownIntake(timing.dosage[0].intake) != null &&
+              getDropDownIntake(timing.dosage[0].intake) != undefined ?
+              getDropDownIntake(timing.dosage[0].intake) :
+
+              '' :
+            multi.timingdata[0].timings.timingcategoryname &&
+              multi.timingdata[0].timings.timingcategoryname != null &&
+              multi.timingdata[0].timings.timingcategoryname != undefined ?
+              '<b style="color:red;font-size:10px;font-weight:bold;">[</b>' + `<b style="color:red;font-size:10px;font-weight:bold;">${multi.timingdata[0].timings.timingcategoryname}</b>` + '<b style="color:red;font-size:10px;font-weight:bold;">]</b>' :
+              ''}
+                </div>
+                <div style="font-weight:normal;font-size:10px;">
+                  ${multi.timingdata[0].timings.timingcategorycode &&
+            multi.timingdata[0].timings.timingcategorycode != null &&
+            multi.timingdata[0].timings.timingcategorycode != undefined &&
+            multi.timingdata[0].timings.timingcategorycode == 4 ?
+            `<b>${timing.timingslotname && timing.timingslotname != null && timing.timingslotname != undefined && timing.timingslotname.length > 1 ? timing.timingslotname.charAt(0) + `<b style="font-size:7px;">${timing.timingslotname.substring(1).toLowerCase()}</b>` : ''}</b>(${timing.dosage[0].specifictime == true ? timing.dosage[0].timeprovided : timing.timingslotfrom + '-' + timing.timingslotto})` : ''}
+                </div>
+                <div style="font-weight:normal;font-size:8px;">
+                  <i>${timing.dosage[0].patientdescription ? '* ' + timing.dosage[0].patientdescription : ' '}</i>
+                </div>
+                <div style="font-weight:normal;font-size:8px;">
+                  <i>${timing.dosage[0].consultantdescription ? '* ' + timing.dosage[0].consultantdescription : ' '}</i>
+                </div>
+                <div style="font-weight:normal;font-size:8px;">
+                  <i>${timing.dosage[0].medicationdescription ? '* ' + timing.dosage[0].medicationdescription : ' '}</i>
+                </div>
+              
+              </div>  
+              ${newArray.length == (i + 1) ? '' : '<div style="height:0.5px;background-color:grey;width:100%;"></div>'}
+            `
+          : '';
+      }).join('')
+    );
+
+  }
+
+  function cnull(i) {
+    return (i && i != null && i != undefined && i != '' ? true : false);
+  }
+
+  function fnCommonTiming(multi, multitiming) {
+    return (
+      `
+      <style>
+        div.first:first-letter {
+            font-size: 15px;
+            color: black;
+            font-weight:bold;
+        }
+        div.none:first-letter {
+            font-size: 15px;
+            color: black;
+            font-weight:bold;
+        }
+        </style>
+        
+            <div style="display:flex;justify-content:center;align-items:center;width:30%;display: flex;flex-direction: column;align-items:center;border:1px solid grey;border-top:0px solid;border-right:0px solid;">
+                ${multi.timingdata[0].timings &&
+        multi.timingdata[0].timings != undefined &&
+        multi.timingdata[0].timings != null &&
+        multi.timingdata[0].timings != '' &&
+        multi.timingdata[0].timings.timingsarray &&
+        multi.timingdata[0].timings.timingsarray != null &&
+        multi.timingdata[0].timings.timingsarray != undefined ?
+        fnHtml(multi, multitiming)
+        : ''}
+            </div>
+            ${multi.timingdata[0].timings &&
+        multi.timingdata[0].timings != undefined &&
+        multi.timingdata[0].timings != null &&
+        multi.timingdata[0].timings != '' &&
+        multi.timingdata[0].timings.timingcategorycode &&
+        multi.timingdata[0].timings.timingcategorycode != null &&
+        multi.timingdata[0].timings.timingcategorycode != undefined &&
+        multi.timingdata[0].timings.timingcategorycode == 4 ?
+        `<div style="display:flex;justify-content:center;align-items:center;width:20%;font-size:10px;text-align:center;border:1px solid grey;border-top:0px solid;border-right:0px solid;">
+            ${getDropDownDurationNature(
+          multi.timingdata[0].durationnature != null &&
+            multi.timingdata[0].durationnature != undefined &&
+            multi.timingdata[0].durationnature != 'D' &&
+            multi.timingdata[0].durationnature != 'N'
+            ? multi.timingdata[0].durationnature
+            : '',
+        )}${' '}
+          ${multi.timingdata[0].duration != undefined &&
+          multi.timingdata[0].duration != null &&
+          multi.timingdata[0].duration != 0
+          ? 'FOR ' + multi.timingdata[0].duration
+          : ' '}${' '}
+          ${getDropDownCode(
+            multi.timingdata[0].durationtype != null &&
+              multi.timingdata[0].durationtype != undefined &&
+              multi.timingdata[0].duration &&
+              multi.timingdata[0].durationtype != 'N' &&
+              multi.timingdata[0].duration != undefined &&
+              multi.timingdata[0].duration != null &&
+              multi.timingdata[0].duration != 0
+              ? multi.timingdata[0].durationtype
+              : '',
+          )}
+          ${multi.timingdata[0].durationtype != null &&
+          multi.timingdata[0].durationtype != undefined &&
+          multi.timingdata[0].duration &&
+          multi.timingdata[0].duration != undefined &&
+          multi.timingdata[0].duration != null &&
+          multi.timingdata[0].duration != 0 &&
+          multi.timingdata[0].duration != 1
+          ? '(S)'
+          : ' '}
+          ${ValueCheck(multi.timingdata[0].weekdays) ? convertStringToArrayWeekDay(multi.timingdata[0].weekdays).map((week, i) => {
+            return (
+              week.selected ?
+                `${week.displayvalue},` : ''
+            );
+          }).join('') : ''}
+           
+            </div>`
+
+        : `<div style="display:flex;justify-content:center;align-items:center;width:20%;font-size:10px;text-align:center;border:1px solid grey;border-top:0px solid;border-right:0px solid;">
+            </div>`}
+            
+            <div style="display:flex;justify-content:center;align-items:center;width:12%;font-size:8px;text-align:center;border:1px solid grey;border-top:0px solid;border-right:0px solid;">
+                                    ${multi.timingdata[0].routename && multi.timingdata[0].routename != null && multi.timingdata[0].routename != undefined
+        && multi.timingdata[0].routename != 'NOT APPLICABLE' ? multi.timingdata[0].routename
+        : ''
+      }
+            </div>
+            <div style="display:flex;justify-content:center;align-items:center;width:18%;font-size:10px;text-align:center;border:1px solid grey;border-top:0px solid;border-right:0px solid;">
+            ${multi.timingdata[0].performeddate &&
+        multi.timingdata[0].performeddate !=
+        null &&
+        multi.timingdata[0].performeddate !=
+        undefined
+        ? reverse(multi.timingdata[0].performeddate)
+        : ''
+      }
+            </div> 
+            <div style="display:flex;justify-content:center;align-items:center;width:20%;font-size:10px;text-align:center;border:1px solid grey;border-top:0px solid;">
+            ${multi.timingdata[0].remarks &&
+        multi.timingdata[0].remarks !=
+        null &&
+        multi.timingdata[0].remarks !=
+        undefined
+        ? multi.timingdata[0].remarks
+        : ''
+      }                                   
+            </div>
+        
+        `
+    );
+  }
+
+  function getPatientData() {
+    return (
+      `<div style="display:flex;flex-direction:row;width:100%;justify-content:space-between;"> 
+         
+      <fieldset style="border:1px solid grey;width:50%;">
+        <legend style="font-size:12px;">
+          Patient Details
+        </legend> 
+        <div style="display:flex;flex-direction:column;">
+          <div style="display:flex;flex-direction:row;align-items:flex-end;">
+            <div style="width:100px;font-size:10px;">
+              Patient id
+            </div>
+            <div style="font-weight:bold;font-size:11px;">
+              :&nbsp;${Global.PatientDetails != null ? Global.PatientDetails.profilecontent[0].patientno : ''}&nbsp;&nbsp;&nbsp;&nbsp;
+            </div>
+            <div style="font-family: 'Libre Barcode 39';font-size:35px;height: 25px;">
+            ${Global.PatientDetails != null ? Global.PatientDetails.profilecontent[0].patientno : 0}
+              </div>
+          </div>
+          <div style="display:flex;flex-direction:row;">
+            <div style="width:100px;font-size:10px;">
+              Name
+            </div>
+            <div style="font-weight:bold;font-size:11px;">
+              &nbsp;:&nbsp;${Global.PatientDetails != null ? Global.PatientDetails.profilecontent[0].patientname : ''}
+            </div>
+          </div>
+          <div style="display:flex;flex-direction:row;">
+            <div style="width:100px;font-size:10px;">
+              Date Of Birth
+            </div>
+            <div style="font-weight:bold;font-size:11px;">
+              &nbsp;:&nbsp;${' '}
+            </div>
+          </div>
+          <div style="display:flex;flex-direction:row;">
+            <div style="width:100px;font-size:10px;">
+              Gender/Age
+            </div>
+            <div style="font-weight:bold;font-size:11px;">
+              &nbsp;:&nbsp;${Global.PatientDetails != null ? Global.PatientDetails.profilecontent[0].gender : ''}
+              /${Global.PatientDetails != null ? Global.PatientDetails.profilecontent[0].age : ''}
+            </div>
+          </div>
+          <div style="display:flex;flex-direction:row;">
+            <div style="width:100px;font-size:10px;">
+              Address
+            </div>
+            <div style="font-weight:bold;font-size:11px;">
+            &nbsp;:&nbsp;${Global.PatientDetails != null ? Global.PatientDetails.centercontent[0].displaytext + ',' + Global.PatientDetails.centercontent[1].displaytext : ''}
+            </div>
+          </div>
+          <div style="display:flex;flex-direction:row;">
+            <div style="width:100px;font-size:10px;">
+              Phone
+            </div>
+            <div style="font-weight:bold;font-size:11px;">
+              &nbsp;:&nbsp;${Global.PatientDetails != null ? Global.PatientDetails.profilecontent[0].mobileno : ''}
+            </div>
+          </div>
+        </div>
+      </fieldset> 
+    
+      <fieldset style="border:1px solid grey;width:50%;">
+      <legend style="font-size:12px;">Admission Details</legend> 
+      <div style="display:flex;flex-direction:column;">
+      
+      <div style="display:flex;flex-direction:row;">
+        <div style="width:100px;font-size:10px;">
+          Admission No
+        </div>
+        <div style="font-weight:bold;font-size:11px;">
+          &nbsp;:&nbsp;${Global.PatientDetails != null ? '' : ''}
+        </div>
+      </div>
+      <div style="display:flex;flex-direction:row;">
+        <div style="width:100px;font-size:10px;">
+          Admitted Date
+        </div>
+        <div style="font-weight:bold;font-size:11px;">
+          &nbsp;:&nbsp;${Global.PatientDetails != null ? '' : ''}
+        </div>
+      </div>
+      <div style="display:flex;flex-direction:row;">
+        <div style="width:100px;font-size:10px;">
+          Admitted Doctor
+        </div>
+        <div style="font-weight:bold;font-size:11px;">
+          &nbsp;:&nbsp;${Global.PatientDetails != null ? '' : ''}
+        </div>
+      </div>
+      <div style="display:flex;flex-direction:row;">
+        <div style="width:100px;font-size:10px;">
+          Admitted Unit
+        </div>
+        <div style="font-weight:bold;font-size:11px;">
+          &nbsp;:&nbsp;${Global.PatientDetails != null ? '' : ''}
+        </div>
+      </div>
+      <div style="display:flex;flex-direction:row;">
+        <div style="width:100px;font-size:10px;">
+          Ward
+        </div>
+        <div style="font-weight:bold;font-size:11px;">
+          &nbsp;:&nbsp;${Global.PatientDetails != null ? '' : ''}
+        </div>
+      </div>
+      <div style="display:flex;flex-direction:row;">
+        <div style="width:100px;font-size:10px;">
+          Bed No
+        </div>
+        <div style="font-weight:bold;font-size:11px;">
+          &nbsp;:&nbsp;${Global.PatientDetails != null ? '' : ''}
+        </div>
+      </div>
+    </div>
+    
+      </fieldset>
+    
+    </div>`
+    );
+  }
+
+  function fnstring(i) {
+    return isNU(i) ? i.toString() : null;
+  }
+
+  function fnarray(i) {
+    let array = [];
+    isBNUL(i) ? i.map(data => { array.push(data.displayvalue); }) : null;
+    return array;
+  }
+
+  function getNotesText(array) {
+
+    return fnstring(fnarray(array));
+
+  }
+
+  function getMoreButtonData(array) {
+
+    let notes = isBNUL(array) ? array.filter((i, k) => { return (i.keyid == 131) ? { ...i } : undefined; }) : [];
+    let notestext = (isBNUL(notes) && isBNUL(notes[0].NotesArray)) ? getNotesText(notes[0].NotesArray) : '';
+
+    let instructions = isBNUL(array) ? array.filter((i, k) => { return (i.keyid == 159) ? { ...i } : undefined; }) : [];
+    let instructionstext = (isBNUL(instructions) && isBNUL(instructions[0].InstructionsArray)) ? getNotesText(instructions[0].InstructionsArray) : '';
+
+    let comments = isBNUL(array) ? array.filter((i, k) => { return (i.keyid == 3184) ? { ...i } : undefined; }) : [];
+    let commentstext = (isBNUL(comments) && isNU(comments[0].comments)) ? comments[0].comments : '';
+
+
+
+
+    return (
+      `
+        <div>
+          <div style="font-size:8px;font-weight:normal;">
+            ${isNUQZ(notestext) ? 'Notes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: ' + `<i>${notestext}</i>` : ''}
+          </div>
+          <div style="font-size:8px;font-weight:normal;">
+            ${isNUQZ(instructionstext) ? 'Instructions : ' + `<i>${instructionstext}</i>` : ''}
+          </div>
+          <div style="font-size:8px;font-weight:normal;">
+            ${isNUQZ(commentstext) ? 'Comments&nbsp;&nbsp;: ' + `<i>${commentstext}</i>` : ''}
+          </div>
+        </div>
+      `
+    );
+
+  }
+
+  // <link href='https://fonts.googleapis.com/css?family=Libre Barcode 39' rel='stylesheet' />
+
+  var htmlcontent =
+    `<html>
+      <head>
+        <style>
+          @font-face { 
+            font-family: "Libre Barcode 39";
+            /* Add other properties here, as needed. For example: */
+            /*
+            font-weight: 100 900;
+            font-style: normal italic;
+            */
+            src: url(data:application/octet-stream;base64,d09GMgABAAAAAAUQAAwAAAAAHbwAAAS/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEQGYACBOBEICqFsmXULgXIAATYCJAODYAQgBYRyB4lbG/8XEcW8BPjDATdkYDHuyyIU4VFEeloVdkU9YwwjgEM9p1er61s6nO/v0OUhL9w5eP5/rd03s2KGa3LJqiFOJOMlWCgQyh5K87gR8//za+7NJQ/z201F/uyfDimJEInESIkQ1W7vZ6LcwgPDFJOasHrc3eC8vCgedM1vLQ/6/wSsTe7HdOUsWKpGDb0ZATocixXZkAgXqGrvK/6aaaUAYIpY/CMRmAh7oU6uHJDRlwB22HPKiBnwFFhgJlCACDBT4Myci5tBAwqsaU7ZJQ41PLq9+sYI4CDjlWBgqNgEOSaA94WXrq0cOJADAggmdcM2bGGY4FUaiOUh3xZou9MFGFffWxax+4fT0h10njh8EnWIgtzWpv8psB6U4/A2C3I8ZYAcAaABOhAiQoAQMScQoyfCBrjJufPCp+/Lj5tzqgPbhbeevYmZvTOhGh0ubFhBfX/VxcMBAadFLjZ3r7iEpJS0jKycvIKikrKKqpq6hqaWto6unj4Bok4HgAGARwDuoBuAfo6coPUAqfwTwbx8G1DcB6avFxO2bsbqtqy6rS4xO01OvLdo/tKmo8J3YdRUUQumWrasO6kOAkw5i2ZtK3kQXSfmcG2InqQ+MiIhApTxOyHbNGnW3+g6MpuqiLglBkQk5NCw0M+jhESLZq2B4DoxB/oB6ZoQPLgW5LYcLOZ9KKcL8RcLclErmKNLYWeJTAzOn/60xpyKjH4GglJ/3lQFL9aFFtJUKlWNylWkMlWpXiWqU61yyqpSFcqoWLpMMssiq2yyyyGnXHLLI6988iugoEIKK6KoYooroeSXLRW/g9VOqO7n77jkp6x+GwEgMjLsBdtLuo43m1cvANfKn7o1/1TT6A5b0OCEwM/BrZBXQCZ54TTPyCu7H4jyME0DQEYNZpK7BLyeIICNTSLEZAeuJKsfF3KpHNfwSGJcp8/fuIlGv+NmhszHLdRy/197aAds43AoLD8rK9YCA6FwWAQWckDAGBtWFWlFRcgcYyVuhrGALa04+LypW9ngHcww2lYYLEQDO7lkQyCRXAIucThrMzwOtoWccC49OrMheBEcnkK91uWw/XLwJWJIrYy6xPXWBeIeTS4uDtsSOE75zL/jG9t0DNmRxz3edEWzfqlpywv3835VDGxnZeHX9lgObd+Ww3Z2zZbc8Q3kaoM3R/i2/WjTYsxQw3a0HmWsuPsQ+tXz/tQTIadV/0uDf74P0ERJVlRNN0yL1WZ3QIQJZVxIpY11XM8PwihO0iwvyqpu2q4fxmle1m0/zut+3k9MXEJSSlpGVk5eQVFJWUVVTV1DU0tbR1dP38DQyNjE1MzcwtLK2sYWsrN3cHSCUWgMFod39u4jJE5x+SoWpYtnuSJiSsedcNIpp51x1jnnXXDRJZddcdU1191w0y233XHXvZ6+qnrGjVJfSo23K9pCglu3BzHvpH7WGrOFoF/yNTxLXf8xUvlcCXClKMS2lSelRFvykyz6MB89zNitshTcbteyFNgWQufKtpQVS36Ce8dLIQE/TcbfiCRN1AAyLJfn3+eCYjiABEm5+6AYDiBBUjTDcrg8/z4KiuEAEiRFe/pCMRxAgqRohuVwef59KSiGA0iQFO3pHXLj2GX/W/EA);
+          }
+        </style>
+      </head>
+      <body>
+        <div>
+          <div style="height:1px;width:99%;background-color:grey;margin-top:0px;margin-bottom:5px;">
+          </div>
+          <div style="width:100%;display:flex;flex-direction:row;justify-content:space-between;">
+            <div style="width:10%;">
+              <img src=${ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit)
+      && responseJSON.consultationEdit.hosumrclassificationnature == 20 ? 'https://t3.ftcdn.net/jpg/00/96/48/12/240_F_96481235_mbMgVHpExxdYAfHHDlGNLj9Ubz6AjosL.jpg'
+      : responseJSON.consultationEdit.hosumrclassificationnature == 17 ?
+        'https://cdn-icons-png.flaticon.com/512/78/78524.png' :
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8DhoTnZqdQCZkmNqbXjMBHft1C4Fu0Bh9Eq2xFTsYHFt_mqMRSC1x5xpaNe9nWPgnPKY&usqp=CAU'} style="height:40px;width:40px;">
+              </img>
+            </div>
+          <div style="width:30%;display:flex;flex-direction:column;justify-content:flex-end;">
+            <div style="display:flex;width:100%;flex-direction:row;justify-content:space-between;align-items:flex-end;">
+              <div style="font-size:10px;width:40%;">
+                ${ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) ? responseJSON.consultationEdit.heading : ''} NO.
+              </div>
+              <div style="font-size:11px;font-weight:bold;width:60%;">
+                :&nbsp;${' '}
+              </div>
+            </div> 
+            <div style="display:flex;width:100%;flex-direction:row;justify-content:space-between;align-items:center;">
+              <div style="font-size:10px;width:40%;">
+                Ref No
+              </div>
+              <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:60%;">
+                <div style="font-size:11px;font-weight:bold;">
+                  :&nbsp;${' '}&nbsp;&nbsp;&nbsp;&nbsp;
+                </div>
+                <div style="font-family: 'Libre Barcode 39';font-size:40px;height: 30px;">
+                  ${ValueCheck(Global.PatientDetails.profilecontent[0].patientno) ? Global.PatientDetails.profilecontent[0].patientno : ' '}
+                </div>
+              </div>
+            </div>   
+          </div>
+          <div style="width:40%;text-align:center;font-weight:bold;font-size:12px;">
+          ${ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) ? responseJSON.consultationEdit.heading : ''}
+          </div>
+          <div style="display:flex;flex-direction:column;width:40%;align-items:flex-end;justify-content:flex-end;">
+            <div style="display:flex;width:250px;flex-direction:row;justify-content:space-between;align-items:flex-end;">
+              <div style="font-size:10px;width:30%;">
+                Consultant
+              </div>
+              <div style="font-size:11px;font-weight:bold;width:70%;">
+                :&nbsp;${Global.userData.username}
+              </div>
+            </div>
+            <div style="display:flex;width:250px;flex-direction:row;justify-content:space-between;align-items:flex-end;">
+              <div style="font-size:10px;width:30%;">
+                Clinical Unit
+              </div>
+              <div style="font-size:11px;font-weight:bold;width:70%;">
+                :&nbsp;${Global.userData.department}
+              </div>
+            </div>
+            <div style="display:flex;width:250px;flex-direction:row;justify-content:space-between;align-items:flex-end;">
+              <div style="font-size:10px;width:30%;">
+                Date
+              </div>
+              <div style="font-size:11px;font-weight:bold;width:70%;">
+                :&nbsp;${new Date().toLocaleString()}
+              </div>
+            </div>
+          </div>
+          </div>
+      ${props.type != undefined && props.type == 2 ? '' : getPatientData()}
+      <div style="flex-direction: row;display: flex;width:100%;margin-top:5px;">
+            <div style="flex-direction: column;display: flex;border: 1px solid grey;border-right:0px solid grey;width:5%;font-size:15px;font-weight: normal;text-align:center;justify-content:center;">
+              <div style="font-size:12px;">No</div>
+            </div>
+            <div style="flex-direction: column;display: flex;border: 1px solid #888888;border-right:0px solid #888888;width:25%;font-size:15px;font-weight: normal;text-align:center;justify-content:center;">
+              <div style="font-size:12px;">Medicine</div>
+              <div style="font-size:8px;">Content</div>
+            </div>
+            <div style="flex-direction: row;display: flex;width:70%;">
+              <div style="flex-direction: column;display: flex;border: 1px solid grey;border-right:0px solid grey;width:30%;font-size:15px;font-weight: normal;text-align:center;justify-content:center;">
+                <div style="font-size:12px;">Dosage</div>
+                <div style="font-size:8px;">Timing</div>
+              </div>
+              <div style="flex-direction: column;display: flex;border: 1px solid grey;border-right:0px solid grey;width:20%;font-size:15px;font-weight: normal;text-align:center;justify-content:center;">
+                <div style="font-size:12px;">Duration</div>
+              </div>
+              <div style="flex-direction: column;display: flex;border: 1px solid grey;border-right:0px solid grey;width:12%;font-size:15px;font-weight: normal;text-align:center;justify-content:center;">
+                <div style="font-size:12px;">Route</div>
+              </div>
+              <div style="flex-direction: column;display: flex;border: 1px solid grey;border-right:0px solid grey;width:18%;font-size:15px;font-weight: normal;text-align:center;justify-content:center;">
+                <div style="font-size:10px;">Medication Date</div>
+              </div>
+              <div style="flex-direction: column;display: flex;border: 1px solid grey;width:20%;font-size:15px;font-weight: normal;text-align:center;justify-content:center;">
+                <div style="font-size:12px;">Remarks</div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </body>
+    </html>`
+    +
+    `<div style="">${data
+      .map((item, i) => {
+        return `
+                <div style="flex-direction: row;display: flex;width:100%;align-items:stretch;justify-content:stretch;text-decoration: ${item.statuscode == 'D' ? 'line-through' : 'none'};">
+                <div style="display:flex;justify-content:center;align-items:center;text-align:center;background-color:white;width: 5%;font-size:10px;font-weight: bold;border: 1px solid grey;border-top:0px solid;border-right:0px solid;">
+                ${i + 1}${'.'}
+                </div>
+                    <div style="display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;background-color:white;width: 25%;font-size:15px;font-weight: bold;border: 1px solid grey;border-top:0px solid;border-right:0px solid;">
+                      <div style="margin-left:5px;font-size:10px;font-weight: bold;color:red;text-align:left;">
+                        ${item.timingdata[0].timings.timingcategorycode &&
+            item.timingdata[0].timings.timingcategorycode != null &&
+            item.timingdata[0].timings.timingcategorycode != undefined &&
+            item.timingdata[0].timings.timingcategorycode == 4 ||
+            item.timingdata[0].timings.timingcategorycode &&
+            item.timingdata[0].timings.timingcategorycode != null &&
+            item.timingdata[0].timings.timingcategorycode != undefined &&
+            item.timingdata[0].timings.timingcategorycode == 8
+            ?
+            '' :
+            item.timingdata[0].timings.timingcategoryname &&
+              item.timingdata[0].timings.timingcategoryname != null &&
+              item.timingdata[0].timings.timingcategoryname != undefined ?
+              '[' + item.timingdata[0].timings.timingcategoryname + ']' :
+              ''}
+                      </div>
+                      
+                      <div style="margin-left:5px;font-size:14px;">
+                        ${item.outsidemedicine &&
+            item.outsidemedicine != null &&
+            item.outsidemedicine != undefined &&
+            item.outsidemedicine ?
+            '<b style="font-size:15px;color:red;">*</b>' : ''
+          }
+                        ${item.assignedstatusname &&
+            item.assignedstatusname != null &&
+            item.assignedstatusname !=
+            undefined &&
+            item.assignedstatusname.length > 0
+            ? item.assignedstatusname
+            : ''
+          }
+                      </div>
+
+                      <div style="margin-left:5px;font-size:9px;font-weight: normal;text-align:left;">
+                        ${item.outsidemedicine &&
+            item.outsidemedicine != null &&
+            item.outsidemedicine != undefined &&
+            item.outsidemedicine == true ?
+            '<b style="font-size:15px;color:white;">*</b>' : ''
+          }  
+                        ${item.content &&
+            item.content != null &&
+            item.content !=
+            undefined &&
+            item.content.length > 0
+            ? item.content
+            : ''
+          }
+                      </div>
+                      ${ValueCheck(item.statuscode) && item.statuscode != 'A' && item.statuscode != 'B' ? `<b style="font-size:10px;color:red;text-decoration:underline dotted ;">${ValueCheck(item.statusremarks) && item.statusremarks != '' ? item.statusremarks : getDropDownStatus(ValueCheck(item.statuscode)
+            ? item.statuscode
+            : 'B')}</b>` : ''}
+                    </div>
+                    ${!item.multitiming
+            ? `<div style="width:70%;text-align:center;flex-direction: row;display: flex;font-size:15px;font-weight: bold;">
+                      ${fnCommonTiming(item, false)}
+                      </div>` :
+            `<div style="width:70%;text-align:center;flex-direction: column;display: flex;justify-content:center;">
+                        ${item.timingdata && item.timingdata != null && item.timingdata != undefined ? item.timingdata.map(multi => {
+              return `<div style="flex-direction: row;display: flex;font-size:15px;font-weight: bold;height:100%;">
+                          ${fnCommonTiming({ ...multi, 'timingdata': [multi] }, true)}
+                          </div>`;
+            }).join('') : ''}
+                        </div>`}
+                      </div>`;
+      }).join('')}</div>
+                      <div>
+                      ${ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) && responseJSON.consultationEdit.hosumrclassificationnature == 20 ?
+      `<div style="text-align:left;font-size:10px;margin-top:5px;">
+                          <b style="color:red;">
+                            *
+                          </b>
+                          Indicates an outside medicine.
+                        </div>` : ''}
+                      </div>`
+    +
+    `<div>
+                      ${isBNUL(props.MoreButtonData) ? getMoreButtonData(props.MoreButtonData) : ''}
+                      </div>`
+    ;
+
+
+  var htmlheader =
+    `
+    <table style="width: 100%;">
+      <tr>
+        <td style="border: 1px solid white;text-align:center;">
+          <img src="${Global.hospitallogo[2] ? Global.hospitallogo[2] : ''}" alt="logo" style="width:60px;height:60px;">
+          </img>
+        </td>
+        <td style="border: 1px solid white;text-align:center;">
+          <div style="display: flex;align-items: center;flex-direction: column;">
+            <div>
+                <div style="font-weight: bold;font-size:20px;">
+                  ${Global.hospitalname ? Global.hospitalname : ''}
+                </div>
+                <div style="font-size:10px;">
+                  ${Global.hospitalwebsite ? Global.hospitalwebsite : ''}
+                </div>
+                <div style="font-size:10px;">
+                  ${Global.hospitalemail ? Global.hospitalemail : ''}
+                </div>
+            </div>
+          </div>
+        </td>
+        <td style="border: 1px solid white;text-align:center;">
+            <img src="${Global.hospitallogo[3] ? Global.hospitallogo[3] : ''}" alt="logo" style="width:60px;height:60px;">
+            </img>
+        </td>
+      </tr>
+    </table>
+  `;
+
+  var htmlfooter =
+    `<div style="height:1px;width:100%;background-color:grey;margin-bottom:5px;">
+          </div>
+    <table style="width:99%;">
+    
+    
+      <tr>
+        <td style="text-align:center;border: 1px solid white;background-color: white;"> 
+          <div style="text-align:center;margin-right:480px;">
+        <img src="https://i.ibb.co/dkNbcDN/jesconnewlogo.jpg" style="position:absolute;opacity:0.1;top:15px;height:55px;width:450px;">
+        </img>
+        </div>
+          <div style="display: flex;flex-direction: row;justify-content:space-between;">
+            <div style="font-size:12px;display:flex;flex-direction:column;">
+              <div style="text-align:left;font-size:10px;">
+                Prescribed By :
+              </div>
+              <div style="margin-left:0px;display:flex;flex-direction:column;">
+                <div style="text-align:left;font-size:11px;font-weight:bold;">
+                  ${Global.userData.username}
+                </div>
+                <div style="text-align:left;font-size:8px;font-weight:bold;">
+                ${Global.userData.department}
+                </div>
+                <img style="width:80px;height:40px;" src=${imageURL + Global.userData.signatureurl}>
+                </img>
+              </div>
+            </div>
+            <div style="font-size:12px;display:flex;flex-direction:column;">
+              <div style="text-align:left;font-size:10px;">
+              Dispensed By :
+              </div>
+              <div style="margin-left:0px;display:flex;flex-direction:column;">
+                <div style="text-align:left;font-size:11px;font-weight:bold;">
+                PHARMACIST
+                </div>
+                <div style="text-align:left;font-size:11px;font-weight:bold;color:white;">
+                ${'_'}
+                </div>
+                <!--<img style="width:80px;height:40px;" src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Signature_of_Ann_Miller.svg/800px-Signature_of_Ann_Miller.svg.png'>
+                </img>-->
+              </div>
+            </div>
+            <div style="font-size:12px;display:flex;flex-direction:column;">
+              <div style="text-align:left;font-size:10px;">
+                Verified By :
+              </div>
+              <div style="margin-left:0px;display:flex;flex-direction:column;">
+                <div style="text-align:left;font-size:11px;font-weight:bold;">
+                PHARMACIST
+                </div>
+                <div style="text-align:left;font-size:11px;font-weight:bold;color:white;">
+                ${'_'}
+                </div>
+
+              </div>
+            </div>
+            
+          </div>
+          
+        
+          
+        </td>
+      </tr>
+    </table>
+  `;
+  var htmldata2 =
+    `<html>
+        <head>
+          <style>
+                .page-header, .page-header-space {
+                height: 75px;
+                }
+                .page-footer, .page-footer-space {
+                height: 100px;
+                }
+                .page-footer {
+                position: fixed;
+                bottom: 0;
+                width: 100%;
+                /* border: 1px solid black;*/ /* for demo */
+                background: white; /* for demo */
+                }
+                .page-header {
+                position: fixed;
+                top: 0;
+                width: 100%;
+                /*border: 1px solid black; */ /* for demo */
+                background: white; /* for demo */
+                }
+                .page {
+                page-break-after: never;
+                }
+                @page {
+                margin: 10mm;
+                }
+                @media print {
+                thead {display: table-header-group;} 
+                tfoot {display: table-footer-group;}
+                button {display: none;}
+                body {margin: 0;}
+                }
+          </style>
+        </head>
+        <body>
+        
+          <div class="page-header" style="text-align: center;">` +
+    htmlheader +
+    `</div>
+        
+          <div class="page-footer" style="text-align: center;"> ` +
+    htmlfooter +
+    `</div>
+    
+          <table>
+        
+            <thead>
+              <tr>
+                <td>
+                  <div class="page-header-space"></div>
+                </td>
+              </tr>
+            </thead>
+        
+            <tbody>
+              <tr>
+                <td>
+                  <div class="page" style="">
+                  <div style="background:white;background-color:white;color:white;height:1px;">
+                  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
+                  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
+                  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
+                  </div>` +
+    htmlcontent +
+    `</div>
+                </td>
+              </tr>
+            </tbody>
+        
+            <tfoot>
+              <tr>
+                <td>
+                  <div class="page-footer-space"></div>
+                </td>
+              </tr>
+            </tfoot>
+        
+          </table>
+        
+        </body>
+        </html>`;
+
+  const fnPrint = async () => {
+    if (Platform.OS === 'web') {
+      window.electronAPI.savePDF(htmldata2);
+      return;
+    }
+    if (await isPermitted()) {
+      setIsLoading(true);
+
+      const results = await RNHTMLtoPDF.convert({
+        html: htmldata2,
+        fileName: 'prescription',
+        base64: true,
+      });
+      let filePath = RNFetchBlob.fs.dirs.DownloadDir + '/' + 'prescriptionprint' + '.pdf';
+
+      if (
+        results.base64 &&
+        results.base64 != null &&
+        results.base64 != undefined
+      ) {
+        RNFetchBlob.fs.writeFile(filePath, results.base64, 'base64').then(response => {
+          var formData = new FormData();
+          formData.append('file', {
+            uri: 'file://' + filePath,
+            type: 'application/pdf',
+            name: '.pdf',
+          });
+          // let multiformapi = 'http://192.168.0.21:9007/fileupload/emr/printdocument';
+          let multiformapi = APIURL + 'file/fileupload/emr/printdocument';
+          NetworkServiceCall('multiform', multiformapi, formData)
+            .then(function (responsedata) {
+              if (responsedata.httpstatus == 200) {
+                let printapi = APIURL + 'pdfmail/orders/printfile/';
+                // console.log('jjjjj', printapi)
+                // let printapi = 'http://192.168.0.21:9071/orders/printfile/';
+                let printername = 'EPSON1B1D75 (M100 Series)';
+                let output = {
+                  patientno: responsedata.data.fileuri,
+                  patientname: printername,
+                };
+
+                axios
+                  .post(printapi, output)
+                  .then(function (response) {
+
+                    if (
+                      response &&
+                      response.data &&
+                      response.data != undefined &&
+                      response.data.httpstatus &&
+                      response.data.httpstatus != null &&
+                      response.data.httpstatus == 200
+                    ) {
+                      notifyMessage('Printed Successfully', 1);
+                      setIsLoading(false);
+                      // console.log(response)
+                    } else {
+                      notifyMessage('Print Failed', 2);
+                      setIsLoading(false);
+                      // console.log(response)
+                    }
+                  })
+                  .catch(function (error) {
+                    notifyMessage('Print Failed', 2);
+                    setIsLoading(false);
+                    // console.log(response)
+                  });
+              } else {
+                notifyMessage('PRINT FAILED.Try Again.', 2); //multiform not 200 error
+                setIsLoading(false);
+              }
+            })
+            .catch(error => {
+              notifyMessage('PRINT FAILED.Try Again.', 2); //multiform catch error
+              setIsLoading(false);
+            });
+        })
+          .catch(error => {
+
+            notifyMessage('FILE CREATION FAILED.Try Again.', 3); //RNFetchBlob.fs.writeFile error
+            setIsLoading(false);
+          });
+      } else {
+        notifyMessage('conversion failed.Try Again.', 3); // result.base64 error
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const createPDF = async () => {
+    if (Platform.OS === 'web') {
+      window.electronAPI.savePDF(htmldata2);
+      return;
+    }
+    console.log('CALLING>>>>>>>>>>>>>>>>>>');
+    if (await isPermitted()) {
+      setIsLoading(true);
+      const results = await RNHTMLtoPDF.convert({
+        html: htmldata2,
+        fileName: 'template',
+        base64: true,
+      }).catch(errors => {
+        setIsLoading(false);
+      });
+      setIsLoading(false);
+
+      await RNPrint.print({ filePath: results.filePath });
+    }
+  };
+
+  const isPermitted = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+          // {
+          //     title: 'External Storage Write Permission',
+          //     message: 'App needs access to Storage data',
+          // },
+        );
+        return granted === PermissionsAndroid.RESULTS.GRANTED;
+      } catch (err) {
+        alert('File access Permission not allowed', err);
+        return false;
+      }
+    } else {
+      return true;
+    }
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      {isLoading ? <Loader displaytext={true} /> : null}
+      <View style={{ flex: 1 }}>
+        <WebView
+          source={{ html: htmldata2 }}
+          style={{ height: Dimensions.get('screen').height * 0.42 }}
+          scalesPageToFit={false}
+        />
+      </View>
+    </View>
+  );
+});
+
+function getDropDownStatus(details) {
+  let dropdownvaluenew;
+  Dropdown.DDStatusNature != null
+    ? Dropdown.DDStatusNature.map(val => {
+      if (val.datavalue == details) {
+        dropdownvaluenew = val.displayvalue;
+      }
+    })
+    : null;
+  return dropdownvaluenew;
+}
+
+function getDropDownIntake(item) {
+  let dropdownvaluenew3 = ' ';
+  Dropdown.Intake != null
+    ? Dropdown.Intake.map(val => {
+      if (val.datavalue == item) {
+        dropdownvaluenew3 = val.displayvalue;
+      }
+    })
+    : null;
+  return dropdownvaluenew3;
+}
+
+function getDropDownCode(item) {
+  // console.log('itemmmmm,,,mmmmm', item)
+  let dropdownvaluenew = ' ';
+  Dropdown.DDADurationType != null
+    ? Dropdown.DDADurationType.map(val => {
+      if (val.datavalue == item) {
+        dropdownvaluenew = val.displayvalue;
+      }
+    })
+    : '';
+  return dropdownvaluenew;
+}
+
+function getDropDownDurationNature(item) {
+  let dropdownvaluenew2 = ' ';
+  Dropdown.DDADurationNature != null
+    ? Dropdown.DDADurationNature.map(val => {
+      if (val.datavalue == item) {
+        dropdownvaluenew2 = val.displayvalue;
+      }
+    })
+    : null;
+  return dropdownvaluenew2;
+}
+
+export default PreviewPrescriptionNew;