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

package/src/Screens/ChartScreenNew.js

@@ -0,0 +1,1579 @@
+import React, { useState, useRef, useEffect, useContext } from 'react';
+import { StyleSheet, Dimensions, View, Text, FlatList, Image, TouchableOpacity, Button, PermissionsAndroid, TextInput, RefreshControl, Platform, TouchableWithoutFeedback, ScrollView } from 'react-native';
+import Loader from '../Custom/Loader';
+import { Global } from '../../../../../src/Common/Global';
+import HeaderBlock from './HeaderBlock';
+import CContainerView from '../CustomComponents/CContainerView';
+import CDetailView from '../CustomComponents/CDetailView';
+import CFooterView from '../CustomComponents/CFooterView';
+import RNHTMLtoPDF from 'react-native-html-to-pdf';
+import { normalize } from '../CommonStyle/componentStyle';
+import { imageURL, audioURL, videoURL, pdfURL, APIURL } from '../../../../../src/Common/apiConstants';
+import WebView from 'react-native-webview';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import axios from 'axios';
+import { ArrayCheck, CButtonShadow, CShadowDynamic, getLoading, isBNUL, isNU, isNUQ, isNUQZ, isPermitted, notifyMessage, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import RNFetchBlob from 'rn-fetch-blob';
+import { ActivityIndicator } from 'react-native';
+import moment from 'moment';
+// import Dropdown from '../Json/Dropdown.json'
+import HReportFormat from '../Html/HReportFormat';
+import HReportHeader from '../Html/HReportHeader';
+import HReportFooter from '../Html/HReportFooter';
+import HReportPatientChart from '../Html/HReportPatientChart';
+// import HOCIcons from '../HOC/HOCIcons';
+import SSearch from '../StaticComponents/SSearch';
+import { Menu, MenuOption, MenuOptions, MenuProvider, MenuTrigger } from 'react-native-popup-menu';
+import CDropDownList from '../CustomComponents/CDropDownList';
+import SDatePickerLabel from '../StaticComponents/SDatePickerLabel';
+import CCustomTextInput from '../CustomComponents/CCustomTextInput';
+// import CButtonDropDown from '../CustomComponents/CButtonDropDown';
+import HHeading from '../HOC/HHeading';
+import ReactNativeBlobUtil from 'rn-fetch-blob';
+import CChartScanOverlay from '../CustomComponents/CChartScanOverlay';
+import HShadowButton from '../HOC/HShadowButton';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import HtmlContentViewer from '../CustomComponents/HtmlContentViewer';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+import CAwesomeButton from '../CustomComponents/CAwesomeButton';
+import HOCIcons from '../HOC/HOCIcons';
+
+const ChartScreenNew = (props) => {
+
+    useEffect(() => {
+        getNatureData();
+    }, []);
+
+    const navigation = useNavigation();
+    const webviewRef = useRef();
+    const [refresh, setRefresh] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [overlayVisible, setOverlayVisible] = useState(false);
+    const [DateView, setDateView] = useState(false);
+    const [searchNature, setSearchNature] = useState('');
+    const [HtmlData, setHtmlData] = useState();
+    const [criteriafornature, setCriteriaForNature] = useState();
+    const [chartScanOverlay, setChartScanOverlay] = useState(false);
+    const [chartScanData, setChartScanData] = useState();
+    const [criteriainfo, setCiteriaInfo] = useState();
+    const [FormatType, setFormatType] = useState();
+    const [criteriadate, setCiteriaDate] = useState();
+    const [RetryView, setRetryView] = useState(true);
+    function getChartData(info, dates, nature, firsttime) {
+
+        setIsLoading(true);
+        setHtmlData();
+
+        let buttonapi = APIURL + 'insurancesaveresponse//RnResponse';
+        let output = {};
+        output.groups = {
+            "procedurename": 'rnlapatientrecord',
+            "hopapatient": Global.PatientDetails.hopapatient,
+            "displaystatus": firsttime ? 0 : 1,
+            ...info,
+            ...dates,
+            'criterianature': nature
+
+        };
+        console.log('buttonapi', buttonapi);
+        console.log('output Json', JSON.stringify(output));
+
+        NetworkServiceCall('post', buttonapi, output)
+            .then(function (response) {
+                if (response.httpstatus == 200 && isNU(response.data) && isNU(response.data.response) && isBNUL(response.data.response.editArray) && response.data.response.editArray.length == 3) {
+                    setHtmlData(response.data.response.editArray);
+                    setIsLoading(false);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Data not found.', 2);
+                }
+            })
+    }
+
+    function getNatureData() {
+
+        setIsLoading(true);
+
+        setCriteriaForNature();
+        let buttonapi = APIURL + 'insuranceadvanceget/emrcommonget/rnhomrclassificationnatures';
+        console.log('buttonapi', buttonapi);
+
+        NetworkServiceCall("get", buttonapi, "")
+            .then(function (response) {
+                if (response.httpstatus == 200 && isNU(response.data) && isBNUL(response.data.data)) {
+
+                    const updatedData = isNUQZ(props.route.params.specificnature) ? response.data.data.map((item) => ({ ...item, selected: SpecificNatureChecker(item) })) : response.data.data.map((item) => ({ ...item, selected: 1 }));
+                    const constcriteriainfo = {
+                        'formattype': 3,
+                        'treatmenttype': isNU(Global.PatientDetails) && isBNUL(Global.PatientDetails.profilecontent) && isNUQ(Global.PatientDetails.profilecontent[0].patienttype) && Global.PatientDetails.profilecontent[0].patienttype == "IP" ? 4 : 5,
+                        'consultation': isNU(Global.PatientDetails) && isBNUL(Global.PatientDetails.profilecontent) && isNUQ(Global.PatientDetails.profilecontent[0].patienttype) && Global.PatientDetails.profilecontent[0].patienttype == "IP" ? 0 : 1,
+                        'admission': isNU(Global.PatientDetails) && isBNUL(Global.PatientDetails.profilecontent) && isNUQ(Global.PatientDetails.profilecontent[0].patienttype) && Global.PatientDetails.profilecontent[0].patienttype == "IP" ? 1 : 0,
+                        'current': 1,
+                    };
+                    const constformattype = [
+                        {
+                            'icongroup': 3,
+                            'icon': 'table-large',
+                            'datavalue': 1,
+                            'displayvalue': 'SUMMARY',
+                        },
+                        {
+                            'icongroup': 5,
+                            'icon': 'file-invoice',
+                            'datavalue': 2,
+                            'displayvalue': 'DETAILED\nSUMMARY',
+                        },
+                        {
+                            'icongroup': 3,
+                            'icon': 'file-table',
+                            'datavalue': 3,
+                            'displayvalue': 'DETAILED\nDESCRIPTION',
+                        }
+                    ];
+                    const constcriteriadate = {
+                        'fromdate': props.route.params.customdate ? props.route.params.fromdate : '', // moment().format('YYYY-MM-DD')
+                        'todate': props.route.params.customdate ? props.route.params.todate : ''
+                    };
+                    setCiteriaInfo(constcriteriainfo);
+                    setFormatType(constformattype);
+                    setCiteriaDate(constcriteriadate);
+                    setCriteriaForNature(updatedData);
+                    setRetryView(false);
+                    getChartData(constcriteriainfo, constcriteriadate, updatedData, true);
+                }
+                else {
+                    setIsLoading(false);
+                }
+            })
+    }
+
+    function getChartScan() {
+
+        setIsLoading(true);
+        setChartScanData();
+
+        let fromdate = isNUQ(criteriadate.fromdate) ? "'" + criteriadate.fromdate + "'" : "''";
+        let todate = isNUQ(criteriadate.todate) ? "'" + criteriadate.todate + "'" : "''";
+
+        let buttonapi = APIURL + 'insuranceadvanceget/emrcommonget/rnhomrchartfiles ' + Global.PatientDetails.hopapatient + "," + null + ',' + 1 + "," + fromdate + "," + todate;
+
+        console.log('getChartScan buttonapi', buttonapi);
+
+        NetworkServiceCall("get", buttonapi, "")
+            .then(function (response) {
+                if (response.httpstatus == 200 && isNU(response.data) && isBNUL(response.data.data)) {
+
+                    // let jsondata = {
+                    //     'heading': 'CHART SCAN',
+                    //     'icongroup': 3,
+                    //     'icon': 'scanner',
+                    //     'datearray': [
+                    //         {
+                    //             'heading': 'Array 1',
+                    //             'icon': 'file-alt',
+                    //             'hideheading': true,
+                    //             'naturearray': [
+                    //                 {
+                    //                     'heading': 'Array 2',
+                    //                     'icon': 'file-alt',
+                    //                     'hideheading': true,
+                    //                     'filetypearray': response.data.data
+                    //                 },
+                    //             ]
+                    //         }
+                    //     ]
+                    // }
+                    setIsLoading(false);
+                    let jsondata = {
+                        'heading': 'CHART SCAN',
+                        'icongroup': 3,
+                        'icon': 'scanner',
+                        'datearray': [
+                            {
+                                'heading': 'Array 1',
+                                'icon': 'file-alt',
+                                'hideheading': true,
+                                'naturearray': response.data.data
+                            }
+                        ]
+                    }
+                    setChartScanData(jsondata);
+                    setTimeout(() => {
+                        setChartScanOverlay(true);
+                    });
+
+
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('No Files Available.');
+                }
+            });
+    }
+
+    function getChartFiles() {
+
+        setIsLoading(true);
+        setChartScanData();
+
+        let fromdate = isNUQ(criteriadate.fromdate) ? "'" + criteriadate.fromdate + "'" : "''";
+        let todate = isNUQ(criteriadate.todate) ? "'" + criteriadate.todate + "'" : "''";
+
+        let buttonapi = APIURL + 'insuranceadvanceget/emrcommonget/rnhomrchartfiles ' + Global.PatientDetails.hopapatient + "," + null + ',' + 2 + "," + fromdate + "," + todate;
+
+        console.log('getChartScan buttonapi', buttonapi);
+
+        NetworkServiceCall("get", buttonapi, "")
+            .then(function (response) {
+                if (response.httpstatus == 200 && isNU(response.data) && isBNUL(response.data.data)) {
+
+                    setIsLoading(false);
+                    let jsondata = {
+                        'heading': 'FILES',
+                        'icon': 'folder',
+                        'icongroup': 4,
+                        'datearray': response.data.data
+                    }
+                    setChartScanData(jsondata);
+                    setTimeout(() => {
+                        setChartScanOverlay(true);
+                    });
+
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('No Files Available.');
+                }
+            });
+
+    }
+
+    function SpecificNatureChecker(item) {
+
+        // patient card array   nature array
+        // prescription 1   --    20
+        // vital 5          --    10
+        // service 4        --    17
+        // chart 0          --    0
+
+        if (props.route.params.specificnature == 1 && item.code == 20) {
+            return 1;
+        }
+        else if (props.route.params.specificnature == 5 && item.code == 10) {
+            return 1;
+        }
+        else if (props.route.params.specificnature == 4 && item.code == 17) {
+            return 1;
+        }
+        else {
+            return 0;
+        }
+
+    }
+
+    function getFilter(params) {
+
+        switch (params.datavalue) {
+            case 1: // all
+                setCiteriaDate({
+                    "fromdate": '',
+                    "todate": ''
+                });
+                setDateView(false);
+                break;
+            case 2: // today
+                setCiteriaDate({
+                    "fromdate": moment().format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(false);
+                break;
+            case 3: // yesterday
+                var dayBefore = moment(moment().format('YYYY-MM-DD')).subtract(1, 'days');
+                setCiteriaDate({
+                    "fromdate": moment(dayBefore).format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(false);
+                break;
+            case 4:  // one week before
+                var dayBefore = moment(moment().format('YYYY-MM-DD')).subtract(7, 'days');
+                setCiteriaDate({
+                    "fromdate": moment(dayBefore).format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(false);
+                break;
+            case 5: // one month before
+                var dayBefore = moment(moment().format('YYYY-MM-DD')).subtract(1, 'month');
+                setCiteriaDate({
+                    "fromdate": moment(dayBefore).format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(false);
+                break;
+            case 6: // 6 month before
+                var dayBefore = moment(moment().format('YYYY-MM-DD')).subtract(6, 'month');
+                setCiteriaDate({
+                    "fromdate": moment(dayBefore).format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(false);
+                break;
+            case 7: // one year before
+                var dayBefore = moment(moment().format('YYYY-MM-DD')).subtract(1, 'year');
+                setCiteriaDate({
+                    "fromdate": moment(dayBefore).format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(false);
+                break;
+            case 8: // one year before
+                var dayBefore = moment(moment().format('YYYY-MM-DD')).subtract(5, 'year');
+                setCiteriaDate({
+                    "fromdate": moment(dayBefore).format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(false);
+                break;
+            case 9:    //date view
+                console.log('pressed 9')
+                setCiteriaDate({
+                    "fromdate": moment().format('YYYY-MM-DD'),
+                    "todate": moment().format('YYYY-MM-DD')
+                });
+                setDateView(true);
+                break;
+        }
+    }
+
+    const closeOverlay = () => {
+        setOverlayVisible(false);
+    }
+
+    function getOverlayChildrenWrapperStyle() {
+        return ({
+
+
+            position: 'absolute',
+            bottom: 0,
+            top: Dimensions.get('screen').height * (0.131),
+            borderTopLeftRadius: 10,
+            borderTopRightRadius: 10,
+            borderColor: Global.AppTheme.primary_color,
+            borderWidth: 2,
+            alignItems: 'center',
+            alignSelf: 'center',
+            justifyContent: 'flex-start',
+            width: Dimensions.get('window').width,
+            padding: 0
+
+
+
+
+
+
+        })
+    }
+
+    const PreviewPDF = async () => {
+
+        if (await isPermitted()) {
+            setIsLoading(true);
+
+            const results = await RNHTMLtoPDF.convert({
+                html: HReportFormat(HtmlData[1].value, HReportHeader({ "patientid": ValueCheck(Global.PatientDetails) && ValueCheck(Global.PatientDetails.profilecontent[0].patientno) ? Global.PatientDetails.profilecontent[0].patientno : '' }), HReportFooter(), '110px', '80px'),
+                fileName: 'patient report',
+                base64: true,
+                height: 842, // a5 - 596(points) 21(cm)   // a4 - 842(points) 29.7(cm)
+                width: 596   // a5 - 420(points) 14.8(cm) // a4 - 596(points) 21(cm)
+            }).catch(errors => {
+                setIsLoading(false);
+            });
+
+            const fileBase64 = await ReactNativeBlobUtil.fs.readFile(results.filePath, 'base64');
+            const filePath = RNFetchBlob.fs.dirs.DownloadDir + '/' + moment().format('DD-MM-YYYY hmmssSSS') + '.pdf';
+            RNFetchBlob.fs.writeFile(filePath, fileBase64, 'base64').then(response => {
+                notifyMessage(filePath, 1),
+                    setIsLoading(false);
+            })
+                .catch(errors => {
+                    notifyMessage("Download Failed", 2)
+                    setIsLoading(false);
+                });
+            setIsLoading(false);
+        }
+    }
+
+    function fnHeaderData(i) {
+        let temp = i && i != null && i != undefined ?
+            i.map(u => (u.componentname == 'header' ? u.value : '')).join('') : ' ';
+        return temp;
+    }
+
+    function fnFooterData(i) {
+        let temp = i && i != null && i != undefined ?
+            i.map(u => (u.componentname == 'footer' ? u.value : '')).join('') : ' ';
+        return temp;
+    }
+
+    function fnContentData(i) {
+        let temp = i && i != null && i != undefined ?
+            i.map(u => u.componentname != 'header' && u.componentname != 'footer' ? u.value : '').join('') : ' ';
+        return temp;
+    }
+
+    const transformJson = (input) => {
+
+        return {
+            data: input.map(({ editArray, pdffile }) => ({
+                filelink: HReportFormat(fnContentData(editArray), fnHeaderData(editArray), fnFooterData(editArray), '70px', '80px'),
+                filename: ' '
+            })).filter(item => isNUQ(item.filename) && isNUQ(item.filelink))
+        };
+    };
+
+    function HistoryPdf(item) {
+
+        setIsLoading(true);
+
+        let buttonapi = APIURL + 'insuranceadvanceget/emrcommonget/rnhomrsummaryhistory ' + Global.PatientDetails.hopapatient + ',' + item.naturecode;
+        console.log('buttonapi', buttonapi);
+
+        NetworkServiceCall("get", buttonapi, "")
+            .then(function (response) {
+                console.log('HistoryPdf', JSON.stringify(response));
+                if (response.httpstatus == 200 && isNU(response.data) && isBNUL(response.data.groups)) {
+                    navigation.navigate('WebViewGallery', {
+                        'displayarray': [...transformJson(response.data.groups).data]
+                    })
+                    setIsLoading(false);
+                }
+                else {
+                    notifyMessage('Summary not available.')
+                    setIsLoading(false)
+                }
+            })
+
+    }
+
+    function getAllTabFunctions(key, item) {
+
+        switch (key) {
+            case "CS01":
+                // Allpdf();
+                PreviewPDF();
+                break;
+            case "CS02":
+                getChartScan();
+                break;
+            case "CS03":
+                getChartFiles();
+                break;
+            case "CS04":
+                setOverlayVisible(true);
+                break;
+            case "CS06":
+                HistoryPdf(item)
+                break;
+            case "CS07":
+                HistoryPdf(item)
+                break;
+            case "CS08":
+                HistoryPdf(item)
+                break;
+            case "CS09":
+                HistoryPdf(item)
+                break;
+            case "CS10":
+                HistoryPdf(item)
+                break;
+            case "CS11":
+                HistoryPdf(item)
+                break;
+            case "CS12":
+
+                break;
+
+
+        }
+    }
+
+    function CheckAllSelected(array) {
+
+        let prevcodearray = array.filter((i, k) => { return i.selected == 1 ? { ...i } : undefined });
+        let prevcode = isBNUL(prevcodearray) && (prevcodearray.length == array.length) ? true : false;
+        return prevcode;
+
+    }
+
+    function CheckAllSelectedCount(array) {
+
+        let prevcodearray = array.filter((i, k) => { return i.selected == 1 ? { ...i } : undefined });
+        let prevcode = isBNUL(prevcodearray) ? prevcodearray.length : 0;
+        return prevcode;
+
+    }
+
+    function RenderNature(val) {
+
+        return (
+            <TouchableWithoutFeedback>
+                <View style={{ padding: normalize(3), borderWidth: 0 }}>
+                    <View
+                        style={{
+                            borderWidth: 1,
+                            borderRadius: 5,
+                            borderColor: 'lightgrey',
+                            padding: normalize(5),
+                            elevation: 2,
+                            backgroundColor: 'white'
+                        }}
+                    >
+                        <TouchableOpacity
+                            disabled={val.item.selected ? false : true}
+                            onPress={() => {
+                                val.item.showview = !val.item.showview;
+                                setRefresh(refresh + 1);
+                            }}
+                            style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%' }}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                                <HOCIcons.Icons
+                                    icongroup={val.item.icongroup ? val.item.icongroup : 5}
+                                    name={val.item.icon ? val.item.icon : 'file-alt'}
+                                    size={normalize(18)}
+                                    color={val.item.selected ? Global.AppTheme.primary_color : 'grey'}
+                                    style={{ width: normalize(30), borderWidth: 0, textAlign: 'center' }}
+                                />
+                                <Text adjustsFontSizeToFit style={{
+                                    paddingLeft: normalize(5),
+                                    fontWeight: 'bold',
+                                    color: val.item.selected ? Global.AppTheme.primary_color : 'grey',
+                                    fontSize: normalize(14)
+                                }}>
+                                    {val.item.displayname}
+                                </Text>
+                            </View>
+                            {val.item.selected == 1 ?
+                                <View style={{ marginHorizontal: normalize(10), marginVertical: normalize(5) }}>
+                                    <TouchableOpacity
+                                        onPress={() => {
+                                            val.item.showview = !val.item.showview;
+                                            setRefresh(refresh + 1);
+                                        }}
+                                        style={{}}>
+                                        <HOCIcons.FontAwesome5
+                                            name={val.item.showview ? 'chevron-up' : 'chevron-down'}
+                                            size={normalize(18)}
+                                            color={Global.AppTheme.primary_color}
+                                            style={{ textAlign: 'center', borderWidth: 0 }}
+                                        />
+                                    </TouchableOpacity>
+                                </View>
+                                : null}
+                            <View>
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        if (val.item.selected == 1) {
+                                            val.item.selected = 0;
+                                            setRefresh(refresh + 1);
+                                        }
+                                        else {
+                                            val.item.selected = 1;
+                                            setRefresh(refresh + 1);
+                                        }
+                                    }}
+                                    style={{}}>
+                                    <HOCIcons.Fontisto
+                                        name={val.item.selected == 1 ? 'toggle-on' : 'toggle-off'}
+                                        size={normalize(25)}
+                                        color={val.item.selected == 1 ? 'green' : '#646464'}
+                                        style={{ textAlign: 'center', borderWidth: 0 }}
+                                    />
+                                </TouchableOpacity>
+                            </View>
+                        </TouchableOpacity>
+                        {val.item.selected && isBNUL(val.item.data) && val.item.showview ?
+                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', borderWidth: 0 }}>
+                                {val.item.data.map((val) => {
+                                    return (
+                                        renderProperties(val)
+                                    )
+                                })}
+                            </View>
+                            : null}
+                    </View>
+                </View>
+            </TouchableWithoutFeedback>
+        )
+    }
+
+    function renderProperties(val) {
+
+        return (
+            <View style={{ marginHorizontal: normalize(2), marginVertical: normalize(7), padding: normalize(7), minWidth: normalize(80), minHeight: normalize(50), borderWidth: 0.5, borderRadius: 5, borderColor: 'lightgrey' }}>
+
+                {isBNUL(val.tagproperties) ?
+                    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                        {val.tagproperties.map((s) => {
+                            return (
+                                renderDetail(s, val)
+                            )
+                        })}
+                    </View>
+                    : null}
+                <Text style={{
+                    position: 'absolute',
+                    backgroundColor: 'white',
+                    top: normalize(-7),
+                    left: normalize(10),
+                    fontSize: normalize(12),
+                    color: Global.AppTheme.primary_color,
+                }}>
+                    {val.displayname ? val.displayname : null}
+                </Text>
+            </View>
+        )
+
+    }
+
+    function renderDetail(val, abovedata) {
+
+        return (
+            <TouchableOpacity
+                onPress={() => {
+                    abovedata.displayvalue = val.displayname;
+                    abovedata.datavalue = val.code;
+                    setRefresh(refresh + 1);
+                }}
+                style={{
+                    borderRadius: 5,
+                    borderWidth: 0.5,
+                    // height: normalize(45),
+                    // width: normalize(45),
+                    borderColor: 'lightblue',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    elevation: 2,
+                    margin: normalize(4),
+                    padding: normalize(5),
+                    paddingHorizontal: normalize(10),
+                    backgroundColor: abovedata.datavalue == val.code ? Global.AppTheme.selected_color : 'white'
+                }}>
+                <HOCIcons.Icons
+                    icongroup={isNU(val.icongroup) ? val.icongroup : 5}
+                    name={isNUQ(val.icon) ? val.icon : 'table'}
+                    size={normalize(20)}
+                    color={Global.AppTheme.primary_color}
+                />
+                <Text adjustsFontSizeToFit style={{ fontSize: normalize(9), fontWeight: 'bold', color: Global.AppTheme.primary_color, textAlign: 'center' }}>{val.displayname ? val.displayname : null}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    function TreatmentTypeFunction(criteria, type) {
+
+        switch (type) {
+            case 1:
+                criteria.consultation = criteria.consultation === 1 ? 0 : 1;
+                break;
+            case 2:
+                criteria.admission = criteria.admission === 1 ? 0 : 1;
+                break;
+            case 3:
+                criteria.current = criteria.current === 1 ? 0 : 1;
+                break;
+        }
+        CheckTreatmentType(criteria);
+
+    }
+
+    function CheckTreatmentType(criteria) {
+
+        const key = `${criteria.consultation}${criteria.admission}${criteria.current}`;
+
+        const actions = {
+            '100': () => { criteria.treatmenttype = 1; }, // consultation only.
+            '010': () => { criteria.treatmenttype = 2; }, // admission only.
+            '110': () => { criteria.treatmenttype = 3; }, // consultation and admission
+            '011': () => { criteria.treatmenttype = 4; }, // current admission
+            '101': () => { criteria.treatmenttype = 5; }, // current consultation
+            '000': () => { criteria.treatmenttype = 6; }, // no option selected. (please select consultation or admission)
+            '001': () => { criteria.treatmenttype = 7; }, // current only so invalid. ( please select consultation or admission)
+            '111': () => {
+                criteria.current = 0;
+                criteria.treatmenttype = 3;
+            }, // consultation and admission
+        };
+
+        if (actions[key]) {
+            actions[key]();
+        }
+        setRefresh(refresh + 1);
+
+    }
+
+    function RenderFlashList(array) {
+
+        // let newdata = isBNUL(array) ? array.filter(function (item) { return item }) : [];
+
+        const filteredData = array.filter((item) => item.displayname.toLowerCase().includes(searchNature.toLowerCase()));
+
+
+        return (
+            isBNUL(filteredData) ?
+                <FlatList
+                    data={filteredData}
+                    nestedScrollEnabled={true}
+                    renderItem={RenderNature}
+                    estimatedItemSize={normalize(180)}
+                />
+                : null
+        )
+
+    }
+
+    function SelectDeselectNature(i) {
+
+        const updatedData = criteriafornature.map((item) => ({ ...item, selected: i }));
+        setCriteriaForNature(updatedData);
+
+    }
+
+    function ChangeFormatType(i, val) {
+
+        const updatedData = criteriafornature.map((item) => ({
+            ...item,
+            'data': item.data.map((items) => (
+                items.code == 2 ?
+                    {
+                        ...items,
+                        'datavalue': val.datavalue,
+                        'displayvalue': val.displayvalue
+                    }
+                    :
+                    {
+                        ...items,
+                    }
+
+            ))
+        }));
+        setCriteriaForNature(updatedData);
+
+    }
+
+    function buttonView(item, width) {
+
+        return (
+            <HShadowButton
+                useicon={true}
+                usetext={true}
+                disabled={false}
+                buttonstyle={[styles.footerButton, CShadowDynamic(-3, 3, 5, 0, Global.AppTheme.primary_color)]}
+                iconcolor={Global.AppTheme.primary_color}
+                icongroup={item.icongroup}
+                iconname={item.iconname}
+                iconsize={normalize(24)}
+                displaytext={item.displaytext}
+                buttonCallback={() => {
+                    getAllTabFunctions(item.functionid, item)
+                }}
+                textstyle={styles.optionText}
+            />
+        )
+
+    }
+
+    return (
+        <CContainerView>
+            <HeaderBlock
+                style={{ marginBottom: normalize(30) }}
+                navigation={navigation}
+                backhandler={false}
+            />
+            <CDetailView>
+                <View style={{
+                    flex: 1,
+                    backgroundColor: 'white',
+                    borderColor: 'black',
+                }}>
+                    <HHeading
+                        styles={{
+                            "iconname": 'user-alt',
+                            "bgcolor": "#f2efef",
+                            "iconsize": 16,
+                            "iconcolor": Global.AppTheme.primary_color,
+                            "displaytext": 'PATIENT CHART',
+                            "textsize": 14,
+                            "textcolor": Global.AppTheme.primary_color
+                        }}
+                        callBack={val => (val == undefined ? null : console.log(val))}>
+                    </HHeading>
+                    <View style={{ flex: 1 }}>
+
+
+
+                        {isBNUL(HtmlData) ?
+                            (console.log('HtmlData', HReportFormat(HtmlData[1].value, HReportHeader({ "patientid": ValueCheck(Global.PatientDetails) && ValueCheck(Global.PatientDetails.profilecontent[0].patientno) ? Global.PatientDetails.profilecontent[0].patientno : '' }), HReportFooter(), '150px', '80px')),
+                                <HtmlContentViewer
+                                    htmlContent={HReportFormat(HtmlData?.[1]?.value, HReportHeader({ "patientid": ValueCheck(Global?.PatientDetails) && ValueCheck(Global?.PatientDetails?.profilecontent[0]?.patientno) ? Global?.PatientDetails?.profilecontent[0]?.patientno : '' }), HReportFooter(), '150px', '80px')}
+                                    iframeRef={webviewRef}
+                                    height={500}
+                                />
+                            )
+                            : null}
+
+                    </View>
+
+                    {isLoading ?
+                        <Loader displaytext={true} />
+                        : null}
+
+                    {chartScanOverlay && isNU(chartScanData) ?
+                        <CChartScanOverlay
+                            headingstyle={{
+                                heading: chartScanData.heading,
+                                headingicon: chartScanData.icon,
+                                headingicongroup: chartScanData.icongroup,
+                                height: 0.131
+                            }}
+                            overlaydata={chartScanData}
+                            closeOverlay={() => {
+                                setChartScanOverlay(false);
+                            }}
+                        />
+                        : null}
+
+                    {overlayVisible && isNU(criteriainfo) && isBNUL(criteriafornature) && isBNUL(FormatType) ?
+                        <CModalOverlay
+                            visible={overlayVisible}
+                            onClose={() => {
+                                closeOverlay();
+                            }}
+                            closeOnTouchOutside={true}
+                            // containerStyle={{ backgroundColor: 'transparent' }}
+                            containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
+                            childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+                        // animationType="fadeInUp"
+                        // animationDuration={1700}
+                        >
+                            <View style={{ width: '100%', flex: 1 }}>
+                                <View style={{
+                                    borderWidth: 0,
+                                    flexDirection: 'row',
+                                    backgroundColor: '#f0f0f0',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    borderTopLeftRadius: 7,
+                                    borderTopRightRadius: 7,
+                                    paddingVertical: normalize(5)
+                                }}>
+                                    <View style={{ borderWidth: 0, flex: 1, }}>
+                                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                            <HOCIcons.Icons
+                                                icongroup={5}
+                                                name={'list-alt'}
+                                                size={normalize(18)}
+                                                color={Global.AppTheme.primary_color}
+                                                style={{ width: normalize(30), borderWidth: 0, textAlign: 'center' }}
+                                            />
+                                            <Text adjustsFontSizeToFit style={{
+                                                paddingLeft: normalize(5),
+                                                fontWeight: 'bold',
+                                                color: Global.AppTheme.primary_color,
+                                                fontSize: normalize(14)
+                                            }}>
+                                                {'PATIENT Criteria'}
+                                            </Text>
+                                        </View>
+                                    </View>
+
+                                    <TouchableOpacity
+                                        onPress={() => {
+                                            closeOverlay(); // Toggle the state
+                                        }}
+                                        style={{
+                                            // flex: 1,
+                                            justifyContent: 'flex-end',
+                                            alignItems: 'flex-end',
+                                            borderWidth: 0,
+                                            borderRadius: 15,
+                                        }}
+                                    >
+                                        <HOCIcons.FontAwesome5 name="angle-double-down" size={20} color="darkblue" style={{ marginHorizontal: normalize(10) }} />
+                                    </TouchableOpacity>
+                                </View>
+                                <View style={{ flex: 1 }}>
+
+                                    <View style={{ marginTop: normalize(7) }}>
+                                        <SSearch
+                                            disabled={false}
+                                            editable={true}
+                                            dropdownapi={`insurance/emrcommonget/rnddhosudatefilter 1`}
+                                            disablesearchcomponent={true}
+                                            onChangeData={val => val && getFilter(val)}
+                                        />
+                                    </View>
+
+                                    {DateView ?
+                                        <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-evenly', marginTop: normalize(7) }}>
+                                            <View style={{ borderWidth: 0, width: '47%' }}>
+                                                <SDatePickerLabel
+                                                    labeltext={'From Date'}
+                                                    icon={{
+                                                        'icongroup': 5,
+                                                        'name': 'calendar-alt',
+                                                        'color': Global.AppTheme.primary_color,
+                                                        'size': normalize(15),
+                                                        'style': {
+                                                            marginHorizontal: normalize(5),
+                                                        }
+                                                    }}
+                                                    positionviewstyle={{
+                                                        position: 'absolute',
+                                                        top: normalize(-5),
+                                                        left: normalize(7),
+                                                        backgroundColor: 'white',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center'
+                                                    }}
+                                                    positiontextstyle={{
+                                                        color: Global.AppTheme.primary_color,
+                                                        fontSize: normalize(10),
+                                                        textAlign: 'left',
+                                                        fontWeight: 'normal'
+                                                    }}
+                                                    pickerstyle={{
+                                                        flexDirection: 'row',
+                                                        backgroundColor: '#fff',
+                                                        width: '100%',
+                                                        borderColor: 'grey',
+                                                        borderWidth: 0.5,
+                                                        borderRadius: 5,
+                                                        alignItems: 'center',
+                                                        height: normalize(30),
+                                                        elevation: 2,
+                                                        justifyContent: 'center',
+                                                        marginVertical: normalize(3)
+                                                    }}
+                                                    textstyle={{
+                                                        fontSize: normalize(12),
+                                                        color: "black",
+                                                        fontWeight: 'bold'
+                                                    }}
+                                                    // minimumdate={moment().format('YYYY-MM-DD')}
+                                                    maximumdate={moment().format('YYYY-MM-DD')}
+                                                    passingDate={criteriadate.fromdate}
+                                                    onChangeData={val => val == undefined ? null : (
+                                                        setCiteriaDate({
+                                                            "fromdate": moment(val).format('YYYY-MM-DD'),
+                                                            "todate": criteriadate.todate
+                                                        })
+                                                    )}
+                                                />
+                                            </View>
+                                            <View style={{ borderWidth: 0, width: '47%' }}>
+                                                <SDatePickerLabel
+                                                    labeltext={'To Date'}
+                                                    icon={{
+                                                        'icongroup': 5,
+                                                        'name': 'calendar-alt',
+                                                        'color': Global.AppTheme.primary_color,
+                                                        'size': normalize(15),
+                                                        'style': {
+                                                            marginHorizontal: normalize(5)
+                                                        }
+                                                    }}
+                                                    positionviewstyle={{
+                                                        position: 'absolute',
+                                                        top: normalize(-5),
+                                                        left: normalize(7),
+                                                        backgroundColor: 'white',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center'
+                                                    }}
+                                                    positiontextstyle={{
+                                                        color: Global.AppTheme.primary_color,
+                                                        fontSize: normalize(10),
+                                                        textAlign: 'left',
+                                                        fontWeight: 'normal'
+                                                    }}
+                                                    pickerstyle={{
+                                                        flexDirection: 'row',
+                                                        backgroundColor: '#fff',
+                                                        width: '100%',
+                                                        borderColor: 'grey',
+                                                        borderWidth: 0.5,
+                                                        borderRadius: 5,
+                                                        alignItems: 'center',
+                                                        height: normalize(30),
+                                                        elevation: 2,
+                                                        justifyContent: 'center',
+                                                        marginVertical: normalize(3)
+                                                    }}
+                                                    textstyle={{
+                                                        fontSize: normalize(12),
+                                                        color: "black",
+                                                        fontWeight: 'bold'
+                                                    }}
+                                                    // minimumdate={moment().format('YYYY-MM-DD')}
+                                                    maximumdate={moment().format('YYYY-MM-DD')}
+                                                    passingDate={criteriadate.todate}
+                                                    onChangeData={val => val == undefined ? null : (
+                                                        setCiteriaDate({
+                                                            "fromdate": criteriadate.fromdate,
+                                                            "todate": moment(val).format('YYYY-MM-DD')
+                                                        })
+                                                    )}
+                                                />
+                                            </View>
+                                        </View>
+                                        : null}
+
+                                    <View style={{ flexDirection: 'row', width: '100%' }}>
+
+                                        <View style={{ flexDirection: 'row', borderWidth: 0.5, borderRadius: 0, borderColor: 'lightgrey', alignItems: 'center', marginTop: normalize(10), marginBottom: normalize(7), marginHorizontal: normalize(7) }}>
+
+                                            <TouchableOpacity
+                                                onPress={() => {
+                                                    TreatmentTypeFunction(criteriainfo, 1)
+                                                }}
+                                                style={{
+                                                    borderRadius: 10,
+                                                    borderWidth: 0.5,
+                                                    height: normalize(40),
+                                                    // width: normalize(40),
+                                                    borderColor: 'lightblue',
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                    elevation: 2,
+                                                    margin: normalize(4),
+                                                    paddingHorizontal: normalize(4),
+                                                    backgroundColor: criteriainfo.consultation == 1 ? Global.AppTheme.selected_color : 'white'
+                                                }}>
+                                                <HOCIcons.FontAwesome5
+                                                    name={'hospital-user'}
+                                                    size={normalize(20)}
+                                                    color={Global.AppTheme.primary_color}
+                                                />
+                                                <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), fontWeight: 'bold', color: Global.AppTheme.primary_color, textAlign: 'center' }}>CONSULTATION</Text>
+                                            </TouchableOpacity>
+
+                                            <TouchableOpacity
+                                                onPress={() => {
+                                                    TreatmentTypeFunction(criteriainfo, 2)
+                                                }}
+                                                style={{
+                                                    borderRadius: 10,
+                                                    borderWidth: 0.5,
+                                                    height: normalize(40),
+                                                    // width: normalize(40),
+                                                    borderColor: 'lightblue',
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                    elevation: 2,
+                                                    margin: normalize(4),
+                                                    paddingHorizontal: normalize(4),
+                                                    backgroundColor: criteriainfo.admission == 1 ? Global.AppTheme.selected_color : 'white'
+                                                }}>
+                                                <HOCIcons.FontAwesome5
+                                                    name={'bed'}
+                                                    size={normalize(20)}
+                                                    color={Global.AppTheme.primary_color}
+                                                />
+                                                <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), fontWeight: 'bold', color: Global.AppTheme.primary_color, textAlign: 'center' }}>ADMISSION</Text>
+                                            </TouchableOpacity>
+
+                                            {(criteriainfo.admission == 1 && criteriainfo.consultation == 0) || (criteriainfo.consultation == 1 && criteriainfo.admission == 0) ?
+                                                <TouchableOpacity
+                                                    onPress={() => {
+                                                        TreatmentTypeFunction(criteriainfo, 3)
+                                                    }}
+                                                    style={{
+                                                        borderRadius: 10,
+                                                        borderWidth: 0.5,
+                                                        height: normalize(40),
+                                                        // width: normalize(40),
+                                                        borderColor: 'lightblue',
+                                                        justifyContent: 'center',
+                                                        alignItems: 'center',
+                                                        elevation: 2,
+                                                        margin: normalize(4),
+                                                        paddingHorizontal: normalize(4),
+                                                        backgroundColor: criteriainfo.current == 1 ? Global.AppTheme.selected_color : 'white'
+                                                    }}>
+                                                    <HOCIcons.MaterialCommunityIcons
+                                                        name={'clock-check-outline'}
+                                                        size={normalize(20)}
+                                                        color={Global.AppTheme.primary_color}
+                                                    />
+                                                    <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), fontWeight: 'bold', color: Global.AppTheme.primary_color, textAlign: 'center' }}>CURRENT</Text>
+                                                </TouchableOpacity>
+                                                : null}
+
+                                            <Text style={{
+                                                position: 'absolute',
+                                                backgroundColor: 'white',
+                                                top: normalize(-5),
+                                                left: normalize(10),
+                                                fontSize: normalize(11),
+                                                fontWeight: 'normal',
+                                                color: Global.AppTheme.primary_color
+                                            }}>
+                                                {" Treatment Type "}
+                                            </Text>
+                                        </View>
+
+                                        <View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: normalize(5), paddingTop: normalize(7), borderRadius: 0, borderWidth: 0.5, borderColor: 'lightgrey', alignItems: 'center', marginTop: normalize(10), marginBottom: normalize(7) }}>
+
+                                            {isBNUL(FormatType) ?
+
+                                                FormatType.map((val) => {
+                                                    return (
+                                                        <TouchableOpacity
+                                                            onPress={() => {
+                                                                if (val.datavalue == criteriainfo.formattype) {
+                                                                    ChangeFormatType(criteriafornature, val);
+
+                                                                }
+                                                                else {
+                                                                    criteriainfo.formattype = val.datavalue;
+                                                                    ChangeFormatType(criteriafornature, val);
+                                                                    setRefresh(refresh + 1);
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                borderRadius: 10,
+                                                                borderWidth: 0.5,
+                                                                height: normalize(45),
+                                                                // width: normalize(40),
+                                                                borderColor: 'lightblue',
+                                                                justifyContent: 'center',
+                                                                alignItems: 'center',
+                                                                elevation: 2,
+                                                                margin: normalize(4),
+                                                                paddingHorizontal: normalize(6),
+                                                                backgroundColor: val.datavalue == criteriainfo.formattype ? Global.AppTheme.selected_color : 'white'
+                                                            }}>
+                                                            <HOCIcons.Icons
+                                                                icongroup={val.icongroup ? val.icongroup : 3}
+                                                                name={val.icon ? val.icon : 'file'}
+                                                                size={normalize(20)}
+                                                                color={Global.AppTheme.primary_color}
+                                                            />
+                                                            <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), paddingVertical: normalize(4), fontWeight: 'bold', color: Global.AppTheme.primary_color, textAlign: 'center' }}>{val.displayvalue ? val.displayvalue : null}</Text>
+                                                        </TouchableOpacity>
+                                                    )
+                                                })
+                                                : null}
+
+                                            <Text style={{
+                                                position: 'absolute',
+                                                backgroundColor: 'white',
+                                                top: normalize(-4),
+                                                left: normalize(10),
+                                                fontSize: normalize(11),
+                                                color: Global.AppTheme.primary_color
+                                            }}>
+                                                {" Format Type "}
+                                            </Text>
+                                        </View>
+                                    </View>
+
+                                    {isBNUL(criteriafornature) ?
+
+                                        <View style={{ flex: 1 }}>
+                                            <View style={{ width: '100%', justifyContent: 'space-evenly', alignItems: 'flex-start', marginVertical: normalize(5), flexDirection: 'row' }}>
+                                                <View style={{ width: '85%', justifyContent: 'center', alignItems: 'center' }}>
+                                                    <View style={{ width: '95%', justifyContent: 'center' }}>
+                                                        <CCustomTextInput
+                                                            required={false}
+                                                            info={"Enter Nature."}
+                                                            custompositiontextviewstyle={{
+                                                                position: 'absolute',
+                                                                top: normalize(-5),
+                                                                left: normalize(7),
+                                                                flexDirection: 'row',
+                                                                alignItems: 'center',
+                                                                backgroundColor: 'white'
+                                                            }}
+                                                            inputstyle={{
+                                                                flexDirection: 'row',
+                                                                borderWidth: 0.5,
+                                                                borderColor: 'lightgrey',
+                                                                borderRadius: 5,
+                                                                alignItems: 'center',
+                                                                height: normalize(35),
+                                                                backgroundColor: 'white',
+                                                                elevation: 0
+                                                            }}
+                                                            iconstyle={{
+                                                                icongroup: 4,
+                                                                iconname: "file-text-o",
+                                                                iconsize: normalize(18),
+                                                                iconcolor: '#164c92',
+                                                                style: {
+                                                                    paddingHorizontal: normalize(7)
+                                                                }
+                                                            }}
+                                                            data={{
+                                                                displaytext: ' Nature ',
+                                                                type: 'default',
+                                                                iconcolor: 'darkblue',
+                                                                editable: true,
+                                                                itemwidth: '100%',
+                                                                iconname: 'id-badge',
+                                                                value: isNUQ(searchNature) ? searchNature : null,
+                                                                tfontweight: isNUQ(searchNature) ? 'bold' : 'bold',
+                                                                placeholder: 'Search nature',
+                                                                placeholdercolor: 'lightgrey',
+                                                                capitalize: 'characters',
+                                                                tfontsize: normalize(14)
+                                                            }}
+                                                            callBack={val => (val == undefined ? null : (
+                                                                setSearchNature(val)
+                                                            ))}
+                                                            CloseIcon={isNUQ(searchNature) ? true : false}
+                                                            CloseCallBack={val => (val == undefined ? null : (
+                                                                setSearchNature('')
+                                                            ))}
+                                                        />
+                                                    </View>
+                                                </View>
+                                                <View style={{ width: '15%', justifyContent: 'center', borderWidth: 0, alignItems: 'center' }}>
+                                                    <TouchableOpacity
+                                                        onPress={() => {
+                                                            CheckAllSelected(criteriafornature) ?
+                                                                SelectDeselectNature(0) : SelectDeselectNature(1)
+                                                        }}
+                                                        style={{
+                                                            borderRadius: 5,
+                                                            borderWidth: 0.5,
+                                                            height: normalize(35),
+                                                            width: '95%',
+                                                            borderColor: 'lightblue',
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center',
+                                                            elevation: 2,
+                                                            backgroundColor: 'white'
+                                                        }}>
+                                                        <HOCIcons.Icons
+                                                            icongroup={13}
+                                                            name={CheckAllSelected(criteriafornature) ? 'toggle-on' : 'toggle-off'}
+                                                            size={normalize(20)}
+                                                            color={CheckAllSelected(criteriafornature) ? 'green' : '#646464'}
+                                                        />
+                                                        {/* <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), color: Global.AppTheme.primary_color, textAlign: 'center' }}>{'Select All'}</Text> */}
+                                                        <Text adjustsFontSizeToFit style={{ fontSize: normalize(10), lineHeight: normalize(8), color: Global.AppTheme.primary_color, textAlign: 'center', fontWeight: 'bold' }}>{CheckAllSelectedCount(criteriafornature)}{"/"}{criteriafornature.length}{""}</Text>
+                                                    </TouchableOpacity>
+                                                </View>
+                                            </View>
+
+                                            <View style={{ flex: 1, borderWidth: 0, width: '100%' }}>
+                                                {RenderFlashList(criteriafornature)}
+                                            </View>
+                                        </View>
+                                        : null}
+                                </View>
+                                <CFooterView style={{ backgroundColor: '#f0f0f0' }}>
+                                    <View style={{ width: normalize(55) }}>
+                                        <CAwesomeButton
+                                            callback={() => {
+
+                                                if (isNU(criteriainfo)) {
+                                                    if (criteriainfo.treatmenttype == 6) {
+                                                        notifyMessage('Please Select Any Treatment Type.');
+                                                    }
+                                                    else if (criteriainfo.treatmenttype == 7) {
+                                                        notifyMessage('Please Select Any Treatment Type.');
+                                                    }
+                                                    else {
+                                                        closeOverlay();
+                                                        getChartData(criteriainfo, criteriadate, criteriafornature, false);
+                                                    }
+                                                }
+
+                                            }}
+                                            buttonstyle={{
+                                                'borderRadius': 10,
+                                                'borderWidth': 0.5,
+                                                'height': normalize(45),
+                                                'width': '100%',
+                                                'backgroundColor': '#f2f3ff',
+                                                'paddingHorizontal': 0,
+                                                'raiseLevel': 1,
+                                                'paddingBottom': 0,
+                                                'borderColor': 'lightblue',
+                                                'paddingTop': 0,
+                                                'style': {
+                                                    margin: 5,
+                                                }
+                                            }}
+                                            viewstyle={{
+                                                borderWidth: 0,
+                                                borderRadius: 0,
+                                                justifyContent: 'center',
+                                                alignItems: 'center'
+                                            }}
+                                            icon={{
+                                                'icongroup': 1,
+                                                'name': 'select1',
+                                                'color': Global.AppTheme.primary_color,
+                                                'size': normalize(25),
+                                                'style': {
+                                                    textAlign: 'center'
+                                                }
+                                            }}
+                                            text={{
+                                                fontSize: normalize(9),
+                                                // lineHeight:normalize(10),
+                                                fontWeight: 'bold',
+                                                color: Global.AppTheme.primary_color,
+                                                textAlign: 'center'
+                                            }}
+                                            displaytext={'GENERATE'}
+                                        />
+                                    </View>
+                                </CFooterView>
+                            </View>
+                        </CModalOverlay>
+                        : null}
+
+                    {!isLoading && !isBNUL(criteriafornature) ?
+                        <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
+                            <TouchableOpacity
+                                onPress={() => {
+                                    getNatureData();
+                                }}
+                                style={{ backgroundColor: 'white', padding: normalize(10), borderRadius: 10, elevation: 2, borderLeftWidth: 2, borderBottomWidth: 2, borderColor: 'grey' }}>
+                                <Text style={{ color: Global.AppTheme.primary_color, fontWeight: 'normal', fontSize: normalize(12), textAlign: 'center' }}>{"Data not found\nPlease try again"}</Text>
+                                {/* <Button title="Try Again" onPress={() => { getNatureData()}} /> */}
+                            </TouchableOpacity>
+                        </View>
+                        : null}
+
+
+                </View>
+            </CDetailView>
+
+            <View
+                style={[{ paddingVertical: 5, justifyContent: 'center', backgroundColor: 'white', borderTopWidth: 1, borderTopColor: 'lightgrey', width: '100%' }]}
+            >
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', borderWidth: 0, width: '100%' }}>
+                    {[
+                        {
+                            "displaytext": "Criteria",
+                            "fontcolor": Global.AppTheme.primary_color,
+                            "shadowcolor": "#fff",
+                            "size": 10,
+                            "icongroup": 5,
+                            "iconname": "list-alt",
+                            "iconcolor": Global.AppTheme.primary_color,
+                            "selected": false,
+                            "visibility": isBNUL(criteriafornature) ? true : false,
+                            "iconsize": 20,
+                            "functionid": "CS04",
+                            "buttontype": 'button'
+                        },
+                        // {
+                        //     "displaytext": "Download",
+                        //     "fontcolor": Global.AppTheme.primary_color,
+                        //     "shadowcolor": "#fff",
+                        //     "size": 10,
+                        //     "icongroup": 5,
+                        //     "iconname": "download",
+                        //     "iconcolor": Global.AppTheme.primary_color,
+                        //     "selected": false,
+                        //     "visibility": isBNUL(HtmlData) ? true : false,
+                        //     "iconsize": 20,
+                        //     "functionid": "CS01"
+                        // },
+                    ]
+                        .map((item, i) => {
+                            return (
+                                item.visibility ?
+
+                                    item.buttontype == 'more' ?
+
+                                        <Menu key={i}>
+                                            <MenuTrigger
+                                                customStyles={{
+                                                    triggerWrapper: {
+                                                        borderWidth: 0,
+                                                        justifyContent: 'flex-start',
+                                                        alignItems: 'flex-start'
+                                                    }
+                                                }}
+                                            >
+                                                <HShadowButton
+                                                    useicon={true}
+                                                    usetext={true}
+                                                    disabled={true}
+                                                    buttonstyle={{
+                                                        ...CButtonShadow(),
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        borderWidth: 1,
+                                                        borderColor: 'lightblue',
+                                                        borderRadius: 10,
+                                                        height: normalize(40),
+                                                        width: normalize(60),
+                                                        marginVertical: normalize(7),
+                                                        backgroundColor: 'white'
+                                                    }}
+                                                    iconcolor={Global.AppTheme.primary_color}
+                                                    icongroup={3}
+                                                    iconname={'dots-horizontal-circle-outline'}
+                                                    iconsize={normalize(24)}
+                                                    displaytext={'More'}
+                                                    buttonCallback={() => {
+
+                                                    }}
+                                                    textstyle={{
+                                                        color: Global.AppTheme.primary_color,
+                                                        fontSize: normalize(9),
+                                                        textAlign: 'center',
+                                                        alignSelf: 'center'
+                                                    }}
+                                                />
+                                                {/* <View style={{ marginHorizontal: normalize(7) }}>
+                                                    <View style={{
+                                                        borderRadius: 10,
+                                                        borderWidth: 0.5,
+                                                        height: normalize(40),
+                                                        width: normalize(60),
+                                                        backgroundColor: '#f2f3ff',
+                                                        paddingHorizontal: 0,
+                                                        elevation: 2,
+                                                        paddingBottom: 0,
+                                                        borderColor: 'lightblue',
+                                                        justifyContent: 'center',
+                                                        alignItems: 'center',
+                                                        margin: 5
+                                                    }}>
+                                                        <HOCIcons.MaterialCommunityIcons
+                                                            name={'dots-horizontal-circle-outline'}
+                                                            size={normalize(20)}
+                                                            color={Global.AppTheme.primary_color}
+                                                            style={{
+                                                                paddingHorizontal: normalize(3)
+                                                            }}
+                                                        />
+                                                        <Text style={{ fontSize: normalize(7), color: Global.AppTheme.primary_color, fontWeight: 'normal' }}>{'More'}</Text>
+                                                    </View>
+                                                </View> */}
+                                            </MenuTrigger>
+                                            <MenuOptions
+                                                optionsContainerStyle={{ marginTop: normalize(-45), backgroundColor: '#ffffff00' }}
+                                                customStyles={{
+                                                    optionsContainer: {
+                                                        shadowColor: '#00000044',
+                                                        shadowRadius: 0,
+                                                        borderRadius: 5,
+                                                        borderWidth: 0,
+                                                        padding: normalize(5),
+                                                        borderColor: 'lightgrey',
+                                                        elevation: 2,
+                                                        width: '80%',
+                                                        backgroundColor: 'white'
+                                                    },
+                                                    optionText: {},
+                                                }}>
+                                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+                                                    {isBNUL(item.morearray) ? item.morearray.map((item) => {
+                                                        return (
+                                                            <View style={{ marginHorizontal: normalize(7) }}>
+
+                                                                {buttonView(item, 50)}
+                                                            </View>
+                                                        )
+                                                    }) : null}
+                                                </View>
+                                            </MenuOptions>
+                                        </Menu>
+
+                                        :
+                                        <View style={{ marginHorizontal: normalize(7) }}>
+                                            {buttonView(item, 60)}
+                                        </View>
+                                    : null
+                            )
+                        })}
+                </View>
+            </View>
+        </CContainerView>
+    )
+};
+
+export default ChartScreenNew;
+
+const styles = StyleSheet.create({
+    footerButton: {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: 'lightblue',
+        borderRadius: 10,
+        height: Dimensions.get('screen').height * 0.055,
+        width: Dimensions.get('screen').height * 0.065,
+        marginVertical: normalize(7),
+        backgroundColor: 'white',
+    },
+    footerButtonText: {
+        fontSize: normalize(9),
+        textAlign: 'center',
+        alignSelf: 'center',
+    },
+    moreButtonContainer: {
+        borderWidth: 0,
+    },
+    menuOptions: {
+        marginTop: normalize(-52),
+    },
+    moreOptionsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap-reverse',
+        justifyContent: 'flex-end',
+        borderWidth: 0,
+    },
+    menuOption: {
+        marginHorizontal: normalize(3),
+    },
+    subFooterButton: {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: 'lightblue',
+        borderRadius: 10,
+        height: normalize(40),
+        width: normalize(50),
+        marginVertical: normalize(7),
+        backgroundColor: 'white',
+    },
+    optionText: {
+        fontSize: normalize(8),
+        color: Global.AppTheme.primary_color,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        maxWidth: normalize(60),
+    }
+})