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

package/src/Custom/TableComponent/CActivityTable.js

@@ -0,0 +1,707 @@
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { View, Text, ScrollView, TouchableOpacity, Dimensions, Platform } from 'react-native';
+import { APIURL } from '../../Common/apiConstants';
+import { Global } from '../../Common/Global';
+import Icons from '../../Common/Icons';
+import NetworkServiceCall from '../../Common/NetworkServiceCall';
+import { ArrayCheck, getLoading, isPermitted, notifyMessage, ValueCheck } from '../../CommonStyle/ComponentFunctions';
+import { normalize } from '../../CommonStyle/componentStyle';
+import Loader from '../Loader';
+import CTextHeader from './CTextHeader';
+import ProgressCircle from 'react-native-progress-circle';
+import HHeading from '../../HOC/HHeading';
+import RNHTMLtoPDF from 'react-native-html-to-pdf';
+import RNPrint from 'react-native-print';
+import HReportHeader from '../../Html/HReportHeader';
+import HReportFooter from '../../Html/HReportFooter';
+import HReportFormat from '../../Html/HReportFormat';
+
+
+export default function CActivityTable(props) {
+    var ReportData = {
+        'title': 'Report Investigation',
+        'username': 'DR MATHEW',
+        'suuser': 1,
+        'investigation': 'Investigation',
+        'activity': 'Activity 1',
+        'hopapatient': 0,
+        'patientid': '12356',
+        'patientname': 'NAME',
+        'dataArr': [
+            {
+                'columnid': 1,
+                'width': 0.3,
+                'displayheader': 'Investigation',
+                'columntype': 1,
+                'rows': [
+                    {
+                        'value': 'Investigation 1',
+                    },
+                    {
+                        'value': 'Investigation 2',
+                    },
+                    {
+                        'value': 'Investigation 3',
+                    },
+                ],
+            },
+            {
+                'columnid': 2,
+                'width': 0.9,
+                'displayheader': 'Activity 1',
+                'columntype': 2,
+                'rows': [
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 20,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                ],
+            },
+            {
+                'columnid': 3,
+                'width': 0.8,
+                'displayheader': 'Activity 2',
+                'columntype': 2,
+                'rows': [
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 20,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                ],
+            },
+            {
+                'columnid': 5,
+                'width': 0.8,
+                'displayheader': 'Activity 3',
+                'columntype': 2,
+                'rows': [
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 9,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T08:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                ],
+            },
+            {
+                'columnid': 3,
+                'width': 0.8,
+                'displayheader': 'Activity 2',
+                'columntype': 2,
+                'rows': [
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 20,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                ],
+            },
+            {
+                'columnid': 5,
+                'width': 0.8,
+                'displayheader': 'Activity 3',
+                'columntype': 2,
+                'rows': [
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 9,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                    {
+                        'starttime': '2023-11-21T07:02:39.200Z',
+                        'endtime': '2023-11-21T07:12:56.200Z',
+                        'userstart': 'User 1',
+                        'userend': 'User 2',
+                        'benchmarktime': 15,
+                        'unit': 'min',
+                        'totaltime': 0,
+                    },
+                ],
+            },
+            {
+                'columnid': 4,
+                'width': 0.4,
+                'displayheader': 'Total [Min]',
+                'columntype': 3,
+                'rows': [
+                    {
+                        'totaltime': '',
+                        'benchmarktime': '',
+                    },
+                    {
+                        'totaltime': '',
+                        'benchmarktime': '',
+                    },
+                    {
+                        'totaltime': '',
+                        'benchmarktime': '',
+                    },
+                ],
+            },
+        ],
+    };
+
+    const [data, setData] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const [refresh, setRefresh] = useState(0);
+    var d = new Date();
+
+    useEffect(() => {
+        getReportApi();
+    }, []);
+
+    function getReportApi() {
+        // let buttonapi = APIURL + 'emr/emrcommonget/procedurename ' + Global.userData.hopapatient + ',' + specimenid + ',' + investigation + ',' + activity + ',' + Global.userData.suuser
+        let buttonapi = APIURL + 'emr/emrcommonget/rnladropdown 17';
+        console.log('>>>>>>>><<<<<<<<<<KKKKKK>>>>>>>>><<<<<<<<<<<<<', buttonapi);
+        setIsLoading(true);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    setIsLoading(false);
+                    setData(ReportData);
+                    // getReportPDF(ReportData)
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Report not available , please try again later', 4);
+                }
+            });
+        getLoading(v => setIsLoading(false));
+    }
+
+    const getReportPDF = async (data) => {
+        if (Platform.OS === 'web') {
+            window.electronAPI.savePDF(data);
+            return;
+        }
+        if (await isPermitted()) {
+            const htmlresult = await RNHTMLtoPDF.convert({
+                html: HReportFormat(contentdata(data), HReportHeader(), HReportFooter()),
+                fileName: 'pdf',
+                base64: true,
+            });
+            setIsLoading(false);
+            await RNPrint.print({ filePath: htmlresult.filePath });
+        }
+
+    };
+
+    return (
+        <View style={{ backgroundColor: '#fff' }}>
+
+            {isLoading ?
+                <Loader displaytext={true} /> : null}
+
+            <HHeading
+                styles={{
+                    'iconname': 'stack-overflow',
+                    'bgcolor': '#f2efef',
+                    'iconsize': 16,
+                    'iconcolor': Global.AppTheme.primary_color,
+                    'displaytext': 'REPORT',
+                    'textsize': 14,
+                    'textcolor': Global.AppTheme.primary_color,
+                }}
+                callBack={val => (val == undefined ? null : console.log(val))} />
+
+            <ScrollView horizontal={true}>
+                <View style={{ marginTop: normalize(5), marginHorizontal: normalize(5) }}>
+                    {ValueCheck(data) && ArrayCheck(data.dataArr) ?
+                        <View style={{ flexDirection: 'row' }}>
+                            {data.dataArr.map((item, i) => {
+                                return (
+                                    <View key={i}>
+                                        <View style={{ flexDirection: 'row' }}>
+                                            {[{ 'header': item.displayheader, 'width': item.width }].map((header, j) => {
+                                                return (
+                                                    <View key={j} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                        <CTextHeader key={i}
+                                                            text={header.header}
+                                                            widthArr={Dimensions.get('screen').width * header.width}
+                                                            bgColor={'#eae8e8'} color={'black'} borderColor={'lightgrey'} marginHorizontal={normalize(2)} borderRadius={5} elevation={3}
+                                                        />
+                                                    </View>
+                                                );
+                                            })}
+                                        </View>
+
+                                        <View>
+                                            {item.rows.map((details, k) => {
+                                                return (
+                                                    <TouchableOpacity key={k}
+                                                        style={{
+                                                            flexDirection: 'row',
+                                                            marginTop: 1,
+                                                            backgroundColor: 'white',
+                                                            padding: 1,
+                                                        }}>
+                                                        {getSwitchComponent(item, details, k)}
+                                                    </TouchableOpacity>);
+                                            })}
+                                        </View>
+
+                                        <View style={{ marginTop: normalize(10) }}>
+                                            {i == 0 ?
+                                                <View
+                                                    style={{
+                                                        borderWidth: 1, justifyContent: 'center', backgroundColor: '#f7f4f4', borderColor: 'lightgrey',
+                                                        borderRadius: 5, elevation: 3, height: normalize(50),
+                                                        width: Dimensions.get('screen').width * item.width,
+                                                    }}>
+                                                    <Text adjustsFontSizeToFit numberOfLines={1} style={{
+                                                        fontSize: normalize(13), fontWeight: 'bold',
+                                                        color: 'black', paddingLeft: normalize(10),
+                                                    }}>{'TOTAL'}</Text>
+                                                </View>
+                                                :
+                                                <View
+                                                    style={{
+                                                        borderWidth: 1, justifyContent: 'center', backgroundColor: '#f7f4f4', borderColor: 'lightgrey',
+                                                        borderRadius: 5, elevation: 3, height: normalize(50),
+                                                        width: Dimensions.get('screen').width * item.width,
+                                                    }}>
+                                                    <View style={{ flexDirection: 'row', justifyContent: 'space-around', borderBottomWidth: 0 }}>
+                                                        <View>
+                                                            <View style={{ alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
+                                                                <ProgressCircle
+                                                                    percent={((10 / 10) * 100)}
+                                                                    radius={normalize(16)}
+                                                                    borderWidth={normalize(3)}
+                                                                    color={'green'}
+                                                                    shadowColor="lightgrey"
+                                                                    bgColor={'#fff'}
+                                                                >
+                                                                    <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'black' }}>{getBenchmarkTotal(item)}</Text>
+                                                                </ProgressCircle>
+                                                                <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(8), color: 'black' }}>{'BENCHMARK'}</Text>
+                                                            </View>
+                                                        </View>
+
+                                                        <View>
+                                                            <View style={{ alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
+                                                                <ProgressCircle
+                                                                    percent={((getTotalTime(item) / getBenchmarkTotal(item)) * 100)}
+                                                                    radius={normalize(16)}
+                                                                    borderWidth={normalize(3)}
+                                                                    color={getTotalTime(item) > getBenchmarkTotal(item) ? 'red' : 'green'}
+                                                                    shadowColor="lightgrey"
+                                                                    bgColor={'#fff'}
+                                                                >
+                                                                    <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'black' }}>{getTotalTime(item)}</Text>
+                                                                </ProgressCircle>
+                                                                <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(8), color: 'black' }}>{'TOTAL'}</Text>
+                                                            </View>
+                                                        </View>
+                                                    </View>
+                                                </View>}
+                                        </View>
+
+
+                                    </View>
+                                );
+                            })}
+                        </View> : null}
+                </View>
+            </ScrollView>
+
+            {/* <TouchableOpacity onPress={() => getReportPDF(data)}>
+                <Text>REPORT</Text>
+            </TouchableOpacity> */}
+        </View>
+    );
+
+    function getTimeDiffernece(start, end, item) {
+        var now = moment(start);
+        var end = moment(end);
+        var duration = moment.duration(end.diff(now));
+        var days = duration.asDays();
+        var hours = parseInt(duration.asHours());
+        var minutes = parseInt(duration.asMinutes());
+        // console.log(hours + ' hr and ' + minutes + ' min');
+        // console.log(days)
+        item.totaltime = minutes;
+        return item.totaltime;
+    }
+
+    function getBenchmarkTotal(item) {
+        // console.log("ITEMMMMMMMMMMMMMMM", JSON.stringify(item))
+        var x = item.rows.map(subitem => ValueCheck(subitem.benchmarktime) ? subitem.benchmarktime : 0).reduce((prev, next) => prev + next);
+        return x;
+    }
+
+    function getTotalTime(item) {
+        // console.log("ITEMMMMMMMMMMMMMMM", JSON.stringify(item))
+        var x = item.rows.map(subitem => ValueCheck(subitem.totaltime) ? subitem.totaltime : 0).reduce((prev, next) => prev + next);
+        return x;
+    }
+
+    function getRowTotalBench(rowkey, details) {
+        var x = data.dataArr.map((kkk) => kkk.rows[rowkey]);
+        var y = x.map(subitem => ValueCheck(subitem.benchmarktime) ? subitem.benchmarktime : 0).reduce((prev, next) => prev + next);
+        var z = x.map(subitem => ValueCheck(subitem.totaltime) ? subitem.totaltime : 0).reduce((prev, next) => prev + next);
+        details.benchmarktime = y;
+        details.totaltime = z;
+        return details.benchmarktime;
+    }
+
+    function getSwitchComponent(item, details, rowkey) {
+        switch (item.columntype) {
+            case 1:
+                return (
+                    <View
+                        style={{
+                            borderWidth: 1, justifyContent: 'center', backgroundColor: '#fff', borderColor: 'lightgrey',
+                            borderRadius: 5, elevation: 3, height: normalize(77),
+                            width: Dimensions.get('screen').width * item.width, alignItems: 'center',
+                        }}>
+                        <Text adjustsFontSizeToFit numberOfLines={1} style={{
+                            fontSize: normalize(13), fontWeight: 'bold',
+                            color: 'black',
+                        }}>{details.value}</Text>
+                    </View>
+                );
+            case 2:
+                return (
+                    <View
+                        style={{
+                            borderWidth: 1, justifyContent: 'center', backgroundColor: '#fff', borderColor: 'lightgrey',
+                            borderRadius: 5, elevation: 3, height: normalize(77),
+                            width: Dimensions.get('screen').width * item.width,
+                        }}>
+
+                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', borderBottomWidth: 0.5, borderBottomColor: 'grey' }}>
+                            <Text style={{ fontSize: normalize(8) }}>START</Text>
+                            <Text style={{ fontSize: normalize(8) }}>END</Text>
+                        </View>
+
+                        <View style={{ flexDirection: 'row' }}>
+                            <View style={{ width: '50%', borderWidth: 0.5, borderRightWidth: 0.5, marginRight: 0.5, borderRadius: 2, paddingLeft: normalize(5) }}>
+                                <Text style={{ fontSize: normalize(13), borderBottomWidth: 0.5 }}>{moment(details.starttime).format('DD-MM-YYYY hh:mm A')}</Text>
+                                <Text style={{ fontSize: normalize(13) }}>{'User 1'}</Text>
+                            </View>
+                            <View style={{ width: '50%', borderWidth: 0.5, borderRightWidth: 0.5, marginRight: 0.5, borderRadius: 2, paddingLeft: normalize(5) }}>
+                                <Text style={{ fontSize: normalize(13), borderBottomWidth: 0.5 }}>{moment(details.endtime).format('DD-MM-YYYY hh:mm A')}</Text>
+                                <Text style={{ fontSize: normalize(13) }}>{'User 2'}</Text>
+                            </View>
+                        </View>
+
+                        <View style={{ flexDirection: 'row', borderBottomWidth: 0 }}>
+                            <View style={{ width: '50%', borderWidth: 0.5, borderTopWidth: 0, borderBottomLeftRadius: 5, borderBottomRightRadius: 5, marginRight: 0.5 }}>
+                                <View style={{ alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
+                                    <ProgressCircle
+                                        percent={((10 / 10) * 100)}
+                                        radius={normalize(13)}
+                                        borderWidth={normalize(3)}
+                                        color={'green'}
+                                        shadowColor="lightgrey"
+                                        bgColor={'#fff'}
+                                    >
+                                        <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'black' }}>{details.benchmarktime}</Text>
+                                    </ProgressCircle>
+                                    <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), color: 'black' }}>{'BENCHMARK'}</Text>
+                                </View>
+                            </View>
+
+                            <View style={{ width: '50%', borderWidth: 0.5, borderTopWidth: 0, borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }}>
+                                <View style={{ alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
+                                    <ProgressCircle
+                                        percent={((getTimeDiffernece(details.starttime, details.endtime, details) / details.benchmarktime) * 100)}
+                                        radius={normalize(13)}
+                                        borderWidth={normalize(3)}
+                                        color={details.totaltime > details.benchmarktime ? 'red' : 'green'}
+                                        shadowColor="lightgrey"
+                                        bgColor={'#fff'}
+                                    >
+                                        <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'black' }}>{details.totaltime}</Text>
+                                    </ProgressCircle>
+                                    <Text style={{ fontSize: normalize(8), color: 'black' }}>{'TOTAL'}</Text>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                );
+
+            case 3:
+                return (
+                    <View
+                        style={{
+                            borderWidth: 1, justifyContent: 'center', backgroundColor: '#fff', borderColor: 'lightgrey',
+                            borderRadius: 5, elevation: 3, height: normalize(77),
+                            width: Dimensions.get('screen').width * 0.4,
+                        }}>
+
+                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', borderBottomWidth: 0 }}>
+                            <View>
+                                <View style={{ alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
+                                    <ProgressCircle
+                                        percent={((10 / 10) * 100)}
+                                        radius={normalize(16)}
+                                        borderWidth={normalize(3)}
+                                        color={'green'}
+                                        shadowColor="lightgrey"
+                                        bgColor={'#fff'}
+                                    >
+                                        <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'black' }}>{getRowTotalBench(rowkey, details)}</Text>
+                                    </ProgressCircle>
+                                    <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), color: 'black' }}>{'BENCHMARK'}</Text>
+                                </View>
+                            </View>
+
+                            <View>
+                                <View style={{ alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
+                                    <ProgressCircle
+                                        percent={((details.totaltime / details.benchmarktime) * 100)}
+                                        radius={normalize(16)}
+                                        borderWidth={normalize(3)}
+                                        color={details.totaltime > details.benchmarktime ? 'red' : 'green'}
+                                        shadowColor="lightgrey"
+                                        bgColor={'#fff'}
+                                    >
+                                        <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'black' }}>{details.totaltime}</Text>
+                                    </ProgressCircle>
+                                    <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), color: 'black' }}>{'TOTAL'}</Text>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                );
+        }
+    }
+
+    function contentdata(data) {
+        return (`
+
+        <style type="text/css">
+       .studentInfo {
+           width: 100%;
+           border-collapse: collapse;
+           border: 0px solid grey;
+
+       }
+ 
+           .studentInfo td {
+
+               border: 0.5px solid lightgrey;
+           }
+        
+        .headerTable td {
+            background: aliceblue;font-size:8px;
+            border: 0.5px solid lightgrey;
+        }
+        .DetailData td {
+          font-size:14px;text-align: center;
+          border: 0.5px solid lightgrey;
+        }
+       .header  {
+           text-align: left;
+           font-wight:'bold';
+           font-size:14px;
+       }
+       #rcorners1{
+        text-align:center;
+        align-items:center;
+        justify-content: center;
+        border-radius: 1500px;
+        background: red;
+        padding: 2px; 
+        width: 25px; 
+       }
+       
+   </style>
+
+        <div>
+            ${`<div style="border: 1px solid #000000; margin-top: 1em;padding:0px;">
+                    <span style="
+                        display: inline;
+                        background: #fff;
+                        margin-left:0px;
+                        padding: 0px 2px;
+                        position: relative;
+                        top: -0.6em;
+                        font-size:10px;
+                        font-weight:normal;"
+                    >
+                        Consultant Details
+                    </span>
+
+                    <div style="display:flex;flex-direction:column;margin:5px;margin-top:0px;">
+                        
+                    <div style="display:flex;flex-direction:row;">
+                        <div style="display:flex;flex-direction:row;align-items:flex-end;width:50%;">
+                            <div style="width:30%;font-size:8px;">
+                                Patient Name :
+                            </div>
+                            <div style="width:50%;font-weight:bold;font-size:10px;">
+                                :&nbsp;${data.patientname}
+                            </div>
+                        </div>
+                        <div style="display:flex;flex-direction:row;align-items:flex-end;width:50%;">
+                            <div style="width:30%;font-size:8px;">
+                                Investigation :
+                            </div>
+                            <div style="width:50%;font-weight:bold;font-size:10px;">
+                                :&nbsp;${''}
+                            </div>
+                        </div>
+                    </div>
+            ${`<div style="display:flex;flex-direction:row;">
+                    <div style="display:flex;flex-direction:row;align-items:flex-end;width:60%;">
+                        <div style="width:30%;font-size:8px;">
+                            Investigation :
+                        </div>
+                        <div style="width:50%;font-weight:bold;font-size:10px;">
+                            :&nbsp;${''}
+                        </div>
+                    </div>
+                    <div style="display:flex;flex-direction:row;align-items:flex-end;width:60%;">
+                        <div style="width:30%;font-size:8px;">
+                            Activity :
+                        </div>
+                        <div style="width:50%;font-weight:bold;font-size:10px;">
+                            :&nbsp;${''}
+                        </div>
+                    </div>
+                </div>`}
+
+                    </div>
+                </div>
+                </div>
+              `}
+
+        <div>
+            <div style="font-size:10px;text-align: center;padding-top:5px">
+                REPORT
+        </div>
+    <table style="width: 100%;">
+    <tbody>
+
+    <tr class="headerTable">
+    ${ValueCheck(data) && ArrayCheck(data.dataArr) ? data.dataArr.map((subArr, i) => {
+            return (
+                `<td> ${subArr.displayheader} </td>`
+            );
+        }).join('') : ''}
+    </tr>
+
+    ${ValueCheck(data) && ArrayCheck(data.dataArr) ? data.dataArr.map((subArr, i) => {
+            return (
+                `<tr class="DetailData">
+            ${ValueCheck(subArr.rows) && ArrayCheck(subArr.rows) ? subArr.rows.map((rows, i) => {
+                    return (
+                        `<tr><td> ${i + 1} </td></tr>`
+                    );
+                }).join('') : ''}
+            </tr>`
+            );
+        }).join('') : ''}
+
+    </tbody>
+    </div>
+    </div>
+    `);
+    }
+}