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

package/src/StaticComponents/STimingDropDownNew.js

@@ -0,0 +1,1589 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { View, Text, TouchableOpacity, Dimensions, Image, StyleSheet, ActivityIndicator, TextInput, FlatList, ScrollView, Switch } from 'react-native';
+import Overlay from 'react-native-modal-overlay';
+import Icons from '../Common/Icons';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import Dropdown from '../Json/Dropdown.json';
+import SDropDownNew from '../Components/SDropDownNew';
+
+import Entypo from 'react-native-vector-icons/Entypo';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import { APIURL } from '../Common/apiConstants';
+import { isNU, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import SDropDownDosage from '../CustomComponents/SDropDownDosage';
+import SearchLoader from '../Custom/SearchLoader';
+import { getPopupHeadingOptionText } from '../CommonStyle/PopupStyle';
+import { colors } from '../CommonStyle/commonStyle';
+import PreviewDosage from '../Custom/PreviewDosage';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import { Global } from '../Common/Global';
+import STimingSwitch from './STimingSwitch';
+import moment from 'moment';
+import AwesomeButton from 'react-native-really-awesome-button';
+import CAwesomeButton from '../CustomComponents/CAwesomeButton';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+
+
+var searchResult = [];
+export default function STimingDropDownNew(props) {
+    // console.log("------JJ-------TT----------HH-----------JJ--------UU------",JSON.stringify(props.completeData))
+    const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+    const [timingsArray, setTimingsArray] = useState();
+    const [description, setDescription] = useState('');
+    const [tempString, settempString] = useState([]);
+    // console.log("ooooooooooooooooooo", JSON.stringify(tempString))
+    const [category, setCategory] = useState({
+        'categorycode': 0,
+        'categoryname': '',
+    });
+    const [data, setData] = useState();
+    const [searchData, setSearchData] = useState('');
+    const [visibility, setVisibility] = useState(true);
+    const [savevisibility, setSaveVisibility] = useState(true);
+    const [section, setSection] = useState(3);
+    const [isLoading, setIsLoading] = useState(false);
+    const [refresh, setRefresh] = useState(0);
+    const [displayData, setDisplayData] = useState([]);
+    const [filterPurpose, setFilterPurpose] = useState([]);
+    const [categoryrefresh, setCategoryRefresh] = useState(true);
+    const dropdowndata = props.dropdowndata;
+    const [alphaindex, setAlphaIndex] = useState();
+    const [alphaFilter, setAlphaFilter] = useState(false);
+    const [isdropdownshow, setDropdownShow] = useState(false);
+    const [switchRefresh, setswitchRefresh] = useState(true);
+    function getOverlay() {
+        setDropdownShow(true);
+        getTimingsData({
+            'datavalue': 0,
+            'displaytext': 'HHHH',
+        });
+    }
+
+    const hosumrclassificationnature = responseJSON.consultation[responseJSON.natureindex].hosumrclassificationnature;
+
+    function getTimings(params) {
+        setDropdownShow(true);
+        // setTimeout(() => {
+        setTimingsArray(props.completeData.timingdata[0].timings.timingsarray);
+        // });
+        setDescription(props.completeData.timingdata[0].timings.description);
+        setRefresh(refresh + 1);
+    }
+
+    // useEffect(() => {
+    //     // getTimingsData()
+    // }, [])
+
+    const convertTime12to24 = (time12h) => {
+        const [time, modifier] = time12h.split(' ');
+        let [hours, minutes] = time.split(':');
+        if (hours === '12') {
+            hours = '00';
+        }
+        if (modifier === 'PM') {
+            hours = parseInt(hours, 10) + 12;
+        }
+        return `${hours}:${minutes}`;
+    };
+
+    function AddNewTimings(params) {
+        console.log('CATEGORY CODE>>>>>>>>>>>>>>>>>>>>', category.categorycode);
+        // const newArr = timingsArray.map((item) => item.data)
+        // const merged = [].concat.apply([], newArr);
+
+        const DosageCount = timingsArray.map(obj => ({
+            ...obj,
+            dosage: obj.dosage,
+        }));
+
+        var filterforemptydosage = timingsArray.filter(function (event) {
+            return event.usagename != '';
+        });
+
+        // console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$", JSON.stringify(category.categorycode))
+
+        // console.log("ytftydtcyccyctyctccsewaqawhgvjjh", JSON.stringify(DosageCount))
+        var totalCount = DosageCount.reduce((accum, item) => accum + item.dosage[0].volume, 0);
+        // console.log("--------------------------- TOTALLLLLLLLLLLLLLLL COUNTTTTTTTTTTTTTTTTTT --------------------", JSON.stringify(totalCount))
+
+        if (description != '' && description != 0 && description != '' &&
+            filterforemptydosage.length > 0) {
+
+            props.onNewTimings({
+                'medicinecode': 0,
+                'hosuconsultant': Global.userData != undefined && Global.userData != null ? Global.userData.hosuconsultant : 0,
+                'ssuser': Global.userData != undefined && Global.userData != null ? Global.userData.suuser : 0,
+                'flag': 1,
+                'calculationcount': totalCount,
+                'datavalue': data.datavalue != undefined ? data.datavalue : props.completeData != undefined ? props.completeData.hosumrprescriptiontiming : 0,
+                'timingdescription': description,
+
+                'timingcategorycode': category.categorycode != 0 ? category.categorycode :
+                    props.completeData != undefined && props.completeData.timingdata != undefined &&
+                        props.completeData.timingdata[0].timings != undefined
+                        && props.completeData.timingdata[0].timings.timingcategorycode != undefined ?
+                        props.completeData.timingdata[0].timings.timingcategorycode : 4,
+
+                'timingcategoryname': category.categorycode != 0 ? category.categoryname :
+                    props.completeData != undefined && props.completeData.timingdata[0].timings != undefined
+                        && props.completeData.timingdata[0].timings.timingcategoryname != undefined ?
+                        props.completeData.timingdata[0].timings.timingcategoryname : 'SCHEDULED',
+
+                'timingsarray': timingsArray.map(obj => ({
+                    ...obj,
+                    dosage: obj.dosage,
+                })),
+            });
+
+            props.onDuplicate({
+                'medicinecode': 0,
+                'ssuser': Global.userData != undefined && Global.userData != null ? Global.userData.suuser : 0,
+                'flag': 1,
+                'datavalue': data.datavalue,
+                'timingdescription': description,
+                // "timingcategorycode":  category.categorycode,
+                // "timingcategoryname":  category.categoryname,
+                'timingcategorycode': category.categorycode != 0 ? category.categorycode :
+                    props.completeData != undefined && props.completeData.timingdata[0].timings != undefined
+                        && props.completeData.timingdata[0].timings.timingcategorycode != undefined ?
+                        props.completeData.timingdata[0].timings.timingcategorycode : 0,
+
+                'timingcategoryname': category.categorycode != 0 ? category.categoryname :
+                    props.completeData != undefined && props.completeData.timingdata[0].timings != undefined
+                        && props.completeData.timingdata[0].timings.timingcategoryname != undefined ?
+                        props.completeData.timingdata[0].timings.timingcategoryname : 0,
+
+                'timingsarray': timingsArray,
+            });
+            // setDropDownData(description)
+            setDropdownShow(false);
+            props.singlelinepreview != undefined ? props.singlelinepreview(1) : null;
+        } else {
+            notifyMessage('Please fill out required fields', 3);
+        }
+    }
+    // console.log("Timings Arrrrrayyy Outsideeeeeee network call", JSON.stringify(timingsArray))
+
+    function getTimingsData(val) {
+
+        var TestTimingNewFormat = {
+            'data': {
+                'title': 'Timing',
+                'medicincode': 0,
+                'doctorcode': 0,
+                'timingdescription': '',
+                'flag': 1,
+                'datavalue': 0,
+                'timingsarray': [
+                    {
+                        'timingslot': 1,
+                        'timingslotname': '',
+                        'timingslotfrom': '',
+                        'timingslotto': '',
+                        'usagename': '',
+                        'editstatus': false,
+                        'dosage': [
+                            {
+                                'volume': 0,
+                                'unit': '',
+                                'intake': '0',
+                                'usagename': '',
+                                'usagetype': 0,
+                                'patientdescription': '',
+                                'consultantdescription': '',
+                                'medicationdescription': '',
+                                'patientdescriptionlocalfont': '',
+                                'remarks': '',
+                                'description': '',
+                                'intakedisplay': 'NA',
+                            },
+                        ],
+                    },
+                ],
+            },
+        };
+
+        setTimingsArray();
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhosumrtimings ' + val.datavalue;
+        console.log('Butttttooonnnn apiiiiiiiiiii', JSON.stringify(buttonapi));
+        NetworkServiceCall('get', buttonapi)
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    setData(response.data);
+                    setDescription(response.data.timingdescription);
+                    setTimingsArray(response.data.timingsarray);
+                    setIsLoading(false);
+                    if (response.data.datavalue == 0) {
+                        setSaveVisibility(true);
+                    }
+                    setRefresh(refresh + 1);
+                    setCategory({
+                        'categorycode': 4,
+                        'categoryname': 'SCHEDULED',
+                    });
+                    setCategoryRefresh(false);
+                    setTimeout(() => {
+                        setCategoryRefresh(true);
+                    });
+                } else {
+                    setIsLoading(false);
+                    notifyMessage('Network Error', 4);
+                }
+            });
+    }
+
+    function getOverlayScreenChildcontainer() {
+        return (
+            {
+                height: Dimensions.get('window').height * 0.6,
+                marginBottom: Dimensions.get('window').height * 0.01,
+                // marginTop: Dimensions.get('window').height * 0.01
+            }
+        );
+    }
+
+
+    function GetDropdown(data) {
+        const newDropDownData = data.filter(function (item) {
+            const dataItem = item.displayvalue ? item.displayvalue.toUpperCase() : ''.toUpperCase();
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        });
+        return (
+            <View style={{ flexDirection: 'row' }}>
+                <FlatList
+                    data={newDropDownData}
+                    keyboardShouldPersistTaps="handled"
+                    renderItem={renderItemDropdown}
+                    initialNumToRender={10}
+                    keyExtractor={(item, index) => 'key' + index}
+                />
+                {displayData != undefined && displayData.length > 0 ?
+                    <View style={{
+                        marginBottom: Dimensions.get('window').height * 0.01,
+                    }}>
+                        <FlatList
+                            data={['#', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', '.', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']}
+                            renderItem={renderAlphabet}
+                            keyboardShouldPersistTaps="handled"
+                            style={{ paddingBottom: 20 }}
+                            contentContainerStyle={{ alignItems: 'center' }}
+                            keyExtractor={(item, index) => 'key' + index}
+                        />
+                    </View> : null}
+            </View>
+        );
+    }
+
+    function renderAlphabet({ index, item }) {
+        return (
+            <TouchableOpacity style={{
+                width: normalize(20), alignItems: 'center', paddingVertical: 2, borderRadius: normalize(40) / 2,
+                backgroundColor: index == alphaindex ? Global.AppTheme.primary_color : 'white',
+            }}
+                onPress={() => getAlphabetData(item, index)}>
+                <Text style={{
+                    color: index == alphaindex ? 'white' : 'black',
+                    fontWeight: index == alphaindex ? 'bold' : 'normal',
+                }}>{item}</Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getAlphabetData(alpha, index) {
+        var filter = displayData.filter(value => value.displayvalue != undefined ? (value.displayvalue).charAt(0) == alpha : '');
+        setAlphaIndex(index);
+        setFilterPurpose(filter);
+        setSearchData(alpha);
+        index == 0 ? (setAlphaFilter(false), setSearchData('')) : (setAlphaFilter(true), setSearchData(alpha));
+    }
+
+    function getDeleteTiming(params) {
+        if (tempString.length > 0) {
+            let buttonapi = APIURL + 'emr/emrcommonget/rnlatimingtemplatedelete ' + "'" + tempString[0] + "'" + ',' + Global.userData.hosuconsultant;
+            console.log('Template Stringggggggggggggggg', JSON.stringify(buttonapi));
+            NetworkServiceCall('get', buttonapi, '')
+                .then(function (response) {
+                    console.log('Template', JSON.stringify(response));
+                    if (response.httpstatus == 200 &&
+                        response.data != undefined &&
+                        response.data.message != undefined) {
+                        notifyMessage(response.data.message, 1);
+                        if (response.data.deletestatus == true) {
+                            FetchDropdownList(1);
+                            settempString([]);
+                        }
+                    } else {
+                        notifyMessage('Error On Delete', 2);
+                    }
+                });
+        } else {
+            notifyMessage('Long Press to select a timing', 3);
+        }
+    }
+
+    function mode(array) {
+        if (array.length == 0)
+            {return null;}
+        var modeMap = {};
+        var maxEl = array[0], maxCount = 1;
+        for (var i = 0; i < array.length; i++) {
+            var el = array[i];
+            if (modeMap[el] == null)
+                {modeMap[el] = 1;}
+            else
+                {modeMap[el]++;}
+            if (modeMap[el] > maxCount) {
+                maxEl = el;
+                maxCount = modeMap[el];
+            }
+        }
+        return maxEl;
+    }
+
+    function selection(item, changevalue, keycode) {
+
+        const DosageCount = item.timingsarray.map((obj, i) => ({
+            ...obj,
+            dosage: obj.dosage,
+        }));
+        const totalCount = DosageCount.reduce((accum, item) => accum + item.dosage[0].volume, 0);
+        console.log('props.completeData.timingdata[0].keyid,', props.completeData.timingdata[0].keyid);
+        const dataset = {
+            ...item,
+            'ssuser': Global.userData != undefined && Global.userData != null ? Global.userData.suuser : 0,
+            'hosuconsultant': Global.userData != undefined && Global.userData != null ? Global.userData.hosuconsultant : 0,
+            'calculationcount': totalCount,
+            'key': keycode,
+            'timingsarray': item.timingsarray.map(obj => ({
+                ...obj,
+                keyid: isNU(props.completeData.timingdata[0].keyid) ? props.completeData.timingdata[0].keyid : 1,
+                dosage: obj.dosage,
+            })),
+        };
+
+        //
+        // let onDuplicate = {
+        //     "keykk": dataset.key
+        // }
+
+        // let onDuplicate = {
+        //     ...item,
+        //     "ssuser": Global.userData != undefined && Global.userData != null ? Global.userData.suuser : 0,
+        //     "hosuconsultant": Global.userData != undefined && Global.userData != null ? Global.userData.hosuconsultant : 0,
+        //     "key": keycode
+        // }
+
+        (props.completeData.flag != 2 ?
+            props.onNewTimings(dataset) :
+            props.UpdateNewTimings(dataset));
+        // props.onDuplicate({
+        //     ...item,
+        //     "ssuser": Global.userData != undefined && Global.userData != null ? Global.userData.suuser : 0,
+        //     "hosuconsultant": Global.userData != undefined && Global.userData != null ? Global.userData.hosuconsultant : 0,
+        //     "key": keycode,
+        //     "timingsarray": item.timingsarray
+        // });
+        // props.refreshCount(1);
+        // (props.singlelinepreview != undefined ? props.singlelinepreview(1) : null);
+        // props.editStatus(1);
+        // setDropDownData(item.displayvalue);
+        setDropdownShow(false);
+    }
+
+    function getLongPress(datavalue) {
+        if (tempString.includes(datavalue.datavalue)) {
+            datavalue.selected = !datavalue.selected;
+            setRefresh(refresh + 1);
+            var index = tempString.indexOf(datavalue.datavalue);
+            if (index > -1) {
+                tempString.splice(index, 1);
+            }
+        } else {
+            datavalue.selected = !datavalue.selected;
+            setRefresh(refresh + 1);
+            tempString.push(datavalue.datavalue);
+        }
+    }
+
+    function getDropDownIntake(item) {
+        let dropdownvaluenew3 = ' ';
+        Dropdown.Intake != null
+            ? Dropdown.Intake.map(val => {
+                if (val.datavalue == item) {
+                    dropdownvaluenew3 = val.displayvalue;
+                }
+            })
+            : null;
+        return ' ' + dropdownvaluenew3;
+    }
+
+    function getDosageUnit(details) {
+        let dropdownvaluenew4;
+        Global.DosageArray != null && Global.DosageArray != undefined
+            && Global.DosageArray.length > 0
+            ? Global.DosageArray.map(val => {
+                if (val.datavalue == parseInt(details)) {
+                    dropdownvaluenew4 = val.displayvalue;
+                }
+            })
+            : null;
+        return dropdownvaluenew4;
+    }
+
+    function renderItemDropdown(data) {
+        return (
+            <TouchableOpacity style={{
+                borderColor: 'lightblue', borderWidth: 1, borderBottomWidth: 1, borderRadius: 7,
+                backgroundColor: data.item.selected ? '#fcb8b8' : '#fff', marginVertical: normalize(2),
+            }}
+                onPress={() => selection(data.item, data.item.selected, props.keycode)}
+                onLongPress={() => getLongPress(data.item)}>
+                <TouchableOpacity
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        width: '100%',
+                    }}
+                    disabled={true}
+                // onPress={() => selection(data.item, data.item.selected, props.keycode)}
+                // activeOpacity={0.5}
+                >
+                    <FontAwesome name="dot-circle-o" color={Global.AppTheme.primary_color} size={normalize(15)} style={{ paddingHorizontal: normalize(7) }} />
+                    <Text style={{ fontWeight: 'bold', fontSize: normalize(14) }}>
+                        {data.item.displayvalue}
+                    </Text>
+                </TouchableOpacity>
+
+                {data.item.timingcategoryname != undefined &&
+                    data.item.timingcategoryname != null &&
+                    data.item.timingcategoryname != '' ?
+                    <View style={{ position: 'absolute', top: 0, right: 3 }}>
+                        <Text style={{ fontSize: normalize(9), alignSelf: 'flex-start', fontWeight: 'bold' }} >
+                            {data.item.timingcategoryname}
+                        </Text>
+                    </View> : null}
+
+                {/* <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}> */}
+                <View style={{ flexDirection: 'row', paddingLeft: normalize(25), width: '100%', flexWrap: 'wrap' }}>
+                    {data.item.timingsarray != undefined ? data.item.timingsarray.map((subitem, k) => {
+                        // console.log("........KKKKK........LLLL........KKKKK.......",JSON.stringify(subitem))
+                        return (
+                            <View key={k}>
+                                {subitem.dosage != undefined && subitem.dosage[0].volume != 0 ?
+                                    <View style={{ flexDirection: 'row', paddingLeft: normalize(5), justifyContent: 'center', alignItems: 'center' }} >
+                                        <Text style={{ fontSize: normalize(11) }}>{subitem.timingslotname} {''}</Text>
+                                        <Text style={{ fontSize: normalize(11) }}>{subitem.dosage[0].volume} {''}</Text>
+                                        <Text style={{ fontSize: normalize(11) }}>{getDosageUnit(subitem.dosage[0].unit) != 'Not Applicable' ? getDosageUnit(subitem.dosage[0].unit) : ''} {' '}</Text>
+                                        <Text style={{ fontSize: normalize(10) }}>{getDropDownIntake(subitem.dosage[0].intake)}</Text>
+                                        <Text style={{ fontSize: normalize(11), fontWeight: 'bold' }}> | </Text>
+                                    </View>
+                                    : null}
+                            </View>
+                        );
+                    }) : null}
+                </View>
+                {/* </ScrollView> */}
+            </TouchableOpacity>
+        );
+    }
+
+    function DropdownLayout() {
+        return (
+            <View style={layoutstyles.overlay_screen_container}>
+                <View style={{ alignItems: 'center' }}>
+                    {/* <Text style={{ fontSize: normalize(12), fontWeight: 'bold' }}> Select Option  </Text> */}
+                </View>
+                <View style={getOverlayScreenContainer()}>
+                    <View
+                        style={[ComponentStyles.searchTextbox_View,
+                        layoutstyles.overlay_searchTextbox_View,
+                        ]}
+                    >
+                        <View style={layoutstyles.textinput_view}>
+                            <TextInput
+                                style={[ComponentStyles.searchTextbox]}
+                                editable={true}
+                                autoCapitalize={'characters'}
+                                value={searchData}
+                                onChangeText={text => setSearchData(text)}
+                                secureTextEntry={false}
+                                keyboardType={'default'}
+                                placeholder="Search"
+                            />
+                        </View>
+                        <Image style={[ComponentStyles.searchIcon]}
+                            source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+                        />
+
+                    </View>
+                </View>
+                <View style={getOverlayScreenChildcontainer()}>
+                    {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+                </View>
+
+
+            </View>
+
+        );
+    }
+
+    // console.log("SECTIONNNNNNNNNN INFORMATIONNNNNNNNNNNN", JSON.stringify(section))
+
+    function FetchDropdownList(key) {
+        // console.log("AFTERRRRRRRRRRRRR INFORMATIONNNNNNNNNNNN", JSON.stringify(key))
+
+        props.singlelinepreview != undefined ? props.singlelinepreview(1) : null;
+        setSearchData('');
+        settempString([]);
+        setIsLoading(true);
+        setDropdownShow(true);
+        let buttonapi = key == 3 ? APIURL + 'emr/emrcommonget/rnlafavoritetimings ' + Global.userData.hosuconsultant + ',' + hosumrclassificationnature : APIURL + props.dropdownapi;
+        console.log('DROPDOWN', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                // console.log("RESPOSEEEEEEEEEEEEEEEEEEEEE", JSON.stringify(response))
+                if (response.data.data != null && response.data.data != undefined) {
+                    searchResult = response;
+                    setDisplayData(response.data.data);
+                    setIsLoading(false);
+                }
+                else {
+                    searchResult = [];
+                    setDisplayData([]);
+                    setIsLoading(false);
+                }
+            });
+    }
+
+    function getFavTimings() {
+        setSection(3);
+        FetchDropdownList(3);
+    }
+
+    function getOverlayScreenContainer() {
+        return ({
+            flexDirection: 'row',
+            marginHorizontal: 5,
+            marginVertical: 4,
+            height: Dimensions.get('window').height * 0.045,
+        });
+    }
+
+    function getSavedDataTimings(params) {
+        // console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^", JSON.stringify(params))
+        if (props.completeData.timingdata[0].timings != undefined && props.completeData.timingdata[0].timings != null && props.completeData.timingdata[0].timings.timingsarray != undefined) {
+            // console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^", JSON.stringify(params))
+            setSection(2);
+            setSaveVisibility(false);
+            setDropdownShow(true);
+
+            setTimingsArray();
+            setIsLoading(true);
+
+            // const Destructure = props.completeData.timingdata[0].timings.timingsarray.map(obj => ({
+            //     ...obj,
+            //     dosage: [obj.dosage],
+            // }))
+
+            // console.log("DESTRUCTREDDDDDDDDDD ARRRAYYYYYYYYY",JSON.stringify())
+            const SavedJSON = {
+                'medicinecode': props.completeData.timingdata[0].timings.medicinecode,
+                'ssuser': props.completeData.timingdata[0].timings.ssuser,
+                'flag': props.completeData.timingdata[0].timings.flag,
+                'calculationcount': props.completeData.timingdata[0].timings.calculationcount,
+                'datavalue': props.completeData.timingdata[0].timings.datavalue,
+                'timingcategorycode': props.completeData.timingdata[0].timings.timingcategorycode,
+                'timingcategoryname': props.completeData.timingdata[0].timings.timingcategoryname,
+                'timingdescription': props.completeData.timing != '' && props.completeData.timing != undefined && props.completeData.timing != null ? props.completeData.timing : props.completeData.timingdata[0].timings.timingdescription,
+                'timingsarray': props.completeData.timingdata[0].timings.timingsarray,
+            };
+
+            // console.log(".............................SAVED DATA ...................... ", JSON.stringify(SavedJSON))
+
+            setTimeout(() => {
+                setData(SavedJSON);
+                setDescription(SavedJSON.timingdescription);
+                setTimingsArray(SavedJSON.timingsarray);
+                setIsLoading(false);
+                setRefresh(refresh + 1);
+            });
+        }
+    }
+
+    function getSectionData(params) {
+        setSection(2);
+        setSaveVisibility(false);
+        setDropdownShow(true);
+        // console.log(".............................SECTION DATA ...................... ", JSON.stringify(props.completeData))
+        getTimingsData({
+            'datavalue': props.completeData.hosumrprescriptiontiming,
+            'displaytext': props.completeData.timing,
+        });
+    }
+
+    function getButtonClick(item) {
+        // console.log("JSON STRINGYFY", JSON.stringify(item.stage))
+        switch (item.stage) {
+            case 3: getFavTimings();
+                break;
+            case 4: setDropdownShow(false);
+                break;
+
+            case 1: getSearch();
+                break;
+            case 2: setSection(2, getTimingsData({
+                'datavalue': 0,
+                'displaytext': 'HHHH',
+            }));
+        }
+    }
+
+    function getSearch() {
+        setSection(1);
+        FetchDropdownList(1);
+
+    }
+
+
+    function getSectionDataDuplicate(params) {
+        // console.log(".......IIIIIIIII>>>>>YYYYYYYYYYNNNNNNNN>>>>>>>>KKKKKKK", JSON.stringify(props.completeData.timingdata[0].duplicatedata.timingsarray))
+        setSection(2);
+        setSaveVisibility(false);
+        setDropdownShow(true);
+        // console.log(".............................DETAILS ...................... ", JSON.stringify(props.completeData.duplicatedata.timingcategoryname))
+        setTimingsArray();
+        setIsLoading(true);
+
+        setTimeout(() => {
+            setData(props.completeData.timingdata[0].duplicatedata);
+            setDescription(props.completeData.timingdata[0].duplicatedata.timingdescription);
+            setTimingsArray(props.completeData.timingdata[0].duplicatedata.timingsarray);
+            setIsLoading(false);
+            setRefresh(refresh + 1);
+        });
+    }
+
+    return (
+        <View>
+            {props.type == undefined && props.type != 2 ?
+                <TouchableOpacity
+                    // onPress={() => props.editable ? getOverlay() : getTimings()}
+                    disabled={props.multiformat != undefined ? props.multiformat : false}
+                    // onPress={() => props.editable ? FetchDropdownList() : props.completeData.duplicatedata != undefined ? getSectionDataDuplicate() : props.completeData.flag != 2 ? getSectionData() : getSavedDataTimings()}
+                    onPress={() => setSection(3, FetchDropdownList(3))}
+                    // onPress={() => FetchDropdownList() }
+                    style={{
+                        borderWidth: 1,
+                        borderColor: 'lightgrey',
+                        borderRadius: 5,
+                        paddingLeft: 2,
+                        width: props.widthArr,
+                        alignItems: 'center',
+                        paddingRight: 15,
+                        paddingLeft: normalize(5),
+                        elevation: 3,
+                        marginVertical: normalize(2),
+                        marginHorizontal: normalize(2),
+                        backgroundColor:
+                            props.completeData != undefined && props.completeData.timingdata != undefined && props.completeData.timingdata[0].timings != undefined
+                                && props.completeData.timingdata[0].timings.timingcategorycode != undefined ?
+                                props.completeData.timingdata[0].timings.timingcategorycode == 4 || props.completeData.timingdata[0].timings.timingcategorycode == 0 ?
+                                    props.cornerKey % 2 ? '#fff' : 'white' : '#fff' :
+                                props.cornerKey % 2 ? '#fff' : 'white',
+                        height: Dimensions.get('screen').height * 0.055,
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                    }}>
+                    <Text
+                        adjustsFontSizeToFit
+                        style={{
+                            fontSize: normalize(13),
+                            alignSelf: 'center',
+                            fontWeight: 'bold',
+                            width: '90%',
+                        }}>
+                        {dropdowndata != null && dropdowndata != undefined
+                            ? dropdowndata
+                            : ''}
+                        {' '}
+                    </Text>
+
+                    {props.completeData != undefined && props.completeData.timingdata != undefined
+                        && props.completeData.timingdata.length > 0 && props.completeData.timingdata[0].timings != undefined
+                        && props.completeData.timingdata[0].timings.timingcategoryname != undefined
+                        && dropdowndata != null && dropdowndata != undefined && dropdowndata != '' && dropdowndata != ' ' ?
+                        <View style={{ position: 'absolute', bottom: 0, right: 3 }}>
+                            <Text style={{ fontSize: normalize(9), alignSelf: 'flex-start', fontWeight: 'bold' }} >
+                                {props.completeData.timingdata[0].timings.timingcategoryname}
+                            </Text>
+                        </View> : null}
+
+                    {dropdowndata != null && dropdowndata != undefined && dropdowndata != '' && dropdowndata != ' ' ?
+                        <TouchableOpacity
+                            // onPress={() => props.completeData.duplicatedata != undefined ? getSectionDataDuplicate() : props.completeData.flag != 2 ? getSectionData() : getSavedDataTimings()}>
+                            onPress={() => props.completeData.timingdata[0].duplicatedata != undefined ? getSectionDataDuplicate() : getSavedDataTimings()}>
+                            <FontAwesome
+                                name="edit"
+                                color={Global.AppTheme.primary_color}
+                                size={normalize(20)}
+                                style={{}}
+                            />
+                        </TouchableOpacity> : null}
+                </TouchableOpacity>
+                :
+                <View style={{ flexDirection: 'column' }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: normalize(5) }}>
+                        <Icons.MaterialCommunityIcons name={'clock-time-eight'} color={Global.AppTheme.primary_color} style={{ opacity: 0.9 }}
+                            size={normalize(13)} />
+                        <Text style={{
+                            fontSize: normalize(11),
+                            fontWeight: Platform.OS == 'ios' ? '300' : '325',
+                            color: Global.AppTheme.primary_color,
+                        }}> Timings *
+                        </Text>
+                    </View>
+
+                    <TouchableOpacity
+                        disabled={props.multiformat != undefined ? props.multiformat : false}
+                        onPress={() => setSection(3, FetchDropdownList(3))}
+                        style={{
+                            width: Dimensions.get('screen').width * 0.5,
+                            alignItems: 'center',
+                            backgroundColor: '#fff',
+                            height: normalize(30),
+                            borderColor: 'lightgrey',
+                            borderWidth: 1, borderRadius: 5,
+                            paddingHorizontal: normalize(10),
+                            flexDirection: 'row',
+                            justifyContent: 'space-between', elevation: 3, marginHorizontal: normalize(5),
+                        }}>
+                        <Text
+                            adjustsFontSizeToFit
+                            style={{
+                                fontSize: normalize(13),
+                                alignSelf: 'center',
+                                fontWeight: 'bold',
+                                width: '90%',
+                            }}>
+                            {dropdowndata != null && dropdowndata != undefined
+                                ? dropdowndata
+                                : ''}
+                            {' '}
+                        </Text>
+
+                        {props.completeData != undefined && props.completeData.timingdata[0].timings != undefined
+                            && props.completeData.timingdata[0].timings.timingcategoryname != undefined
+                            && dropdowndata != null && dropdowndata != undefined && dropdowndata != '' && dropdowndata != ' ' ?
+                            <View style={{ position: 'absolute', bottom: 0, right: 3 }}>
+                                <Text style={{ fontSize: normalize(8), alignSelf: 'flex-start', fontWeight: 'bold' }} >
+                                    {props.completeData.timingdata[0].timings.timingcategoryname}
+                                </Text>
+                            </View> : null}
+
+                        {dropdowndata != null && dropdowndata != undefined && dropdowndata != '' && dropdowndata != ' ' ?
+                            <TouchableOpacity
+                                onPress={() => props.completeData.timingdata[0].duplicatedata != undefined ? getSectionDataDuplicate() : getSavedDataTimings()}>
+                                <FontAwesome
+                                    name="edit"
+                                    color={Global.AppTheme.primary_color}
+                                    size={normalize(15)}
+                                    style={{}}
+                                />
+                            </TouchableOpacity> : null}
+                    </TouchableOpacity>
+                </View>
+            }
+
+            {isdropdownshow ? (
+                <Overlay
+                    visible={true}
+                    onClose={() => setDropdownShow(false)}
+                    closeOnTouchOutside
+                    animationType="fadeInUp"
+                    containerStyle={{ backgroundColor: 'transparent' }}
+                    childrenWrapperStyle={getPopupContainerStyle()}
+                    animationDuration={500}>
+                    <View style={{ flex: 1, width: '100%', marginTop: normalize(-10) }}>
+
+                        {/* <TouchableOpacity style={{ position: 'absolute', right: 0, zIndex: 1, top: normalize(-5) }}
+                            onPress={() => setDropdownShow(false)}
+                        >
+                            <AntDesign name={"close"}
+                                color={Global.AppTheme.primary_color} size={normalize(30)} />
+                        </TouchableOpacity> */}
+
+                        <Text style={{ alignSelf: 'center', fontSize: normalize(13), fontWeight: 'bold', color: Global.AppTheme.primary_color }}>{section == 1 || section == 3 ? props.heading + ' TIMINGS' : savevisibility ? 'CREATE ' + props.heading + ' TIMINGS' : 'EDIT ' + props.heading + ' TIMINGS'}</Text>
+                        <View
+                            style={{
+                                //marginTop: normalize(10),
+                                // backgroundColor: '#eae5e5',
+                                width: '100%',
+                                borderRadius: 5,
+                                // height: normalize(35),
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-evenly',
+                                paddingTop: normalize(5),
+                            }}>
+
+                            {[{ 'iconname': 'heartbeat', 'width': 73, 'displayvalue': 'FAV', 'color': Global.AppTheme.primary_color, 'stage': 3 },
+                            { 'iconname': 'search', 'width': 73, 'displayvalue': 'ALL', 'color': Global.AppTheme.primary_color, 'stage': 1 },
+                            { 'iconname': 'list-ul', 'width': 73, 'displayvalue': 'CREATE', 'color': Global.AppTheme.primary_color, 'stage': 2 },
+                            { 'iconname': 'reply', 'width': 73, 'displayvalue': 'BACK', 'color': Global.AppTheme.primary_color, 'stage': 4 },
+                            ].map((buttons, i) => {
+                                return (
+                                    <AwesomeButton key={i}
+                                        onPress={() => getButtonClick(buttons)}
+                                        borderRadius={10}
+                                        borderWidth={1}
+                                        height={normalize(35)}
+                                        // width={normalize(buttons.width)}
+                                        width={normalize(55)}
+                                        backgroundColor={section == buttons.stage ? '#eaf2ff' : '#fff'}
+                                        paddingHorizontal={0}
+                                        raiseLevel={2}
+                                        paddingBottom={0}
+                                        borderColor={section == buttons.stage ? '#eaf2ff' : Global.AppTheme.primary_color}
+                                        paddingTop={0}
+                                        style={{ padding: 0 }}
+                                    >
+                                        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                                            <Icons.FontAwesome5 name={buttons.iconname} style={{ paddingRight: normalize(0) }}
+                                                color={Global.AppTheme.primary_color} size={normalize(17)} />
+                                            <Text style={[getPopupHeadingOptionText(
+                                                section == buttons.stage ? buttons.color : colors.color_DeselectText,
+                                            ), { fontSize: normalize(10), paddingLeft: normalize(0) }]}>{buttons.displayvalue}</Text>
+                                        </View>
+                                    </AwesomeButton>
+
+                                    // <TouchableOpacity key={i}
+                                    //     onPress={() => getButtonClick(buttons)}
+                                    //     style={{
+                                    //         height: '100%',
+                                    //         flexDirection: 'row',
+                                    //         alignItems: 'center',
+                                    //     }}>
+                                    //     <View>
+                                    //         <FontAwesome5
+                                    //             name={buttons.iconname}
+                                    //             color={section == buttons.stage ? buttons.color : colors.color_DeselectText}
+                                    //             size={normalize(20)}
+                                    //         />
+                                    //     </View>
+                                    //     <View>
+                                    //         <Text
+                                    //             style={getPopupHeadingOptionText(
+                                    //                 section == buttons.stage ? buttons.color : colors.color_DeselectText,
+                                    //             )}>
+                                    //             {buttons.displayvalue}
+                                    //         </Text>
+                                    //     </View>
+                                    // </TouchableOpacity>
+                                );
+                            })}
+                        </View>
+
+
+                        {section == 1 || section == 3 ?
+                            <View style={{ flex: 1, width: '100%' }}>
+                                {!isLoading ?
+                                    searchResult.httpstatus == 200 ?
+                                        DropdownLayout()
+                                        :
+                                        <View>
+                                            <Text style={[ComponentStyles.no_data_found_text]}>No Result Found</Text>
+                                        </View>
+                                    :
+                                    <View style={{
+                                        flex: 1, width: '100%', justifyContent: 'center',
+                                        backgroundColor: 'transparent', borderRadius: 10,
+                                    }}>
+                                        <SearchLoader />
+                                    </View>}
+                            </View> :
+                            <View style={{ flex: 1, width: '100%' }}>
+                                {getTimingsView()}
+                            </View>}
+                    </View>
+                    {section == 1 ?
+                        <View style={{
+                            position: 'relative', flexDirection: 'column', alignSelf: 'flex-start',
+                        }}>
+
+                            <CAwesomeButton
+                                data={{
+                                    'displaytext': 'Delete',
+                                    'size': 10,
+                                    'iconname': 'trash',
+                                    'selected': false,
+                                    'visibility': true,
+                                    'iconsize': 20,
+                                    'functionid': 'STD01',
+                                    'shadowcolor': '#eaf2ff',
+                                    'iconcolor': Global.AppTheme.primary_color,
+                                    'fontcolor': 'red',
+                                }}
+                                callBack={val => val == undefined ? null : getDeleteTiming()}
+                            />
+
+                            {/* <TouchableOpacity style={{
+                            justifyContent: 'center', backgroundColor: '#f7f4f4', marginLeft: normalize(0),
+                            borderRadius: 10, alignItems: 'center', paddingHorizontal: normalize(15), paddingTop: normalize(5)
+                        }}
+                            onPress={() => getDeleteTiming()}
+                        >
+                            <AntDesign name={"delete"}
+                                color={"red"} size={normalize(20)} />
+
+                            <Text
+                                style={{
+                                    fontSize: normalize(11),
+                                    color: 'red',
+                                    fontWeight: 'bold',
+                                }}>
+                                {' '}
+                                {"Delete"}
+                            </Text>
+                        </TouchableOpacity> */}
+                        </View> : null}
+
+                </Overlay>
+            ) : null}
+        </View>
+    );
+
+    function SaveTimings() {
+        var filterforemptydosage = timingsArray.filter(function (event) {
+            return event.editstatus == true;
+        });
+
+        // console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$", JSON.stringify(filterforemptydosage))
+
+        var output = {
+            'groups': {
+                'procedurename': 'hosumrtimingtemplates1',
+                'medicinecode': 0,
+                'ssuser': Global.userData != undefined && Global.userData != null ? Global.userData.suuser : 0,
+                'flag': 1,
+                'hosuconsultant': Global.userData != undefined && Global.userData != null ? Global.userData.hosuconsultant : 0,
+                'timingdescription': description,
+                'hosumrclassificationnature': hosumrclassificationnature,
+                'timingcategorycode': category.categorycode != 0 ? category.categorycode : 4,
+                'timingcategoryname': category.categoryname,
+                'timingsarray': timingsArray.map(obj => ({
+                    ...obj,
+                    dosage: obj.dosage,
+                })),
+            },
+        };
+
+        if (description != '' && description != 0 && description != '' &&
+            filterforemptydosage.length > 0 && output.timingcategorycode != 0) {
+            let buttonapi = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+            console.log('+++++++++++++++++++++++++++++', buttonapi);
+            console.log('+++++++++++++++++++++++++++++', JSON.stringify(output));
+            setIsLoading(true);
+            NetworkServiceCall('post', buttonapi, output)
+                .then(function (response) {
+                    console.log('RESPONSEE>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(response));
+                    if (response.httpstatus == 200
+                        && response.data != undefined
+                        && response.data.code != undefined && response.data.code > 0) {
+                        setIsLoading(false);
+                        setSection(1);
+                        FetchDropdownList(1);
+                        notifyMessage('Data Saved!!!!!', 1);
+                        setIsLoading(false);
+
+                    } else {
+                        setIsLoading(false);
+                        notifyMessage('Data Not Saved!!!!!', 2);
+                    }
+                });
+        } else {
+            notifyMessage('Please fill out required fields', 3);
+        }
+    }
+
+    function getBgColor(key) {
+        switch (key) {
+            case 1: return 'yellow';
+            case 2: return 'orange';
+            case 3: return 'blue';
+            case 4: return 'black';
+            default: return 'black';
+        }
+    }
+
+    function getTimingsView(params) {
+        return (
+            <View style={{ marginTop: normalize(10), flex: 1 }}>
+                <View style={{ flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-evenly', width: '100%' }}>
+                    {data != undefined && categoryrefresh ?
+                        <View style={{ flexDirection: 'column', marginHorizontal: normalize(5) }}>
+                            <Text style={{ fontSize: normalize(11), paddingBottom: normalize(2), paddingLeft: normalize(8) }}>Timing Category</Text>
+                            <SDropDownNew
+                                dropdownapi={'emr/emrcommonget/rnladropdown 13'}
+                                dropdowndata={savevisibility ? category.categoryname : props.completeData != undefined &&
+                                    props.completeData.timingdata[0].timings != undefined &&
+                                    props.completeData.timingdata[0].timings.timingcategoryname != undefined ? props.completeData.timingdata[0].timings.timingcategoryname : data.timingcategoryname}
+                                onChangeData={val =>
+                                    val == undefined ? null : (category.categorycode = val.datavalue,
+                                        category.categoryname = val.displayvalue)}
+                                iconName={'clock'}
+                                editable={true}
+                                widthArr={Dimensions.get('screen').width * 0.45}
+                                refreshCount={val =>
+                                    val == undefined ? null : setRefresh(refresh + val)
+                                }
+                            />
+                        </View> : null}
+
+                    <View style={{}}>
+                        <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Timing Name</Text>
+                        <View
+                            style={{
+                                flexDirection: 'row',
+                                borderWidth: 1,
+                                borderColor: 'lightgrey',
+                                width: Dimensions.get('screen').width * 0.45,
+                                justifyContent: 'flex-start',
+                                alignItems: 'center',
+                                borderRadius: 5,
+                                height: Dimensions.get('screen').height * 0.040,
+                                backgroundColor: '#fff', elevation: 3,
+
+                            }}>
+
+                            <TextInput
+                                editable={true} // To scroll data , Editable is checked in onChangeText props
+                                keyboardType={'default'}
+                                placeholder={'Description...'}
+                                placeholderTextColor={'lightgrey'}
+                                onChangeText={changevalue =>
+                                    setDescription(changevalue)
+                                }
+                                scrollEnabled
+                                style={{
+                                    textAlignVertical: 'center',
+                                    width: '80%',
+                                    marginLeft: '1%',
+                                    padding: 0,
+                                    height: '100%',
+                                    fontSize: normalize(14),
+                                }}
+                            >{description}</TextInput>
+                        </View>
+                    </View>
+
+                </View>
+                {switchRefresh ?
+                    <View keyboardShouldPersistTaps={'handled'} style={{ flex: 1 }}>
+                        <ScrollView style={{ marginBottom: normalize(40) }} keyboardShouldPersistTaps={'handled'}>
+                            {timingsArray != null && timingsArray != undefined && visibility ?
+                                timingsArray.map((item, i) => {
+                                    return (
+                                        <View key={i}
+                                            style={{
+                                                margin: normalize(1),
+                                                marginRight: normalize(0),
+                                                marginLeft: normalize(5),
+                                                marginTop: normalize(5),
+                                                marginBottom: normalize(5),
+                                                flexDirection: 'row',
+                                                alignItems: 'center', backgroundColor: '#fff',
+                                            }}>
+                                            <View style={{}}>
+                                                <View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: normalize(5) }}>
+                                                    {/* <Text>{props.completeData != undefined &&
+                                                    props.completeData.timingdata[0].timings != undefined &&
+                                                    props.completeData.timingdata[0].timings.timingcategoryname != undefined ? props.completeData.timingdata[0].timings.timingcategoryname : data.timingcategoryname}</Text> */}
+
+                                                    {/* {props.completeData != undefined &&
+                                                    props.completeData.timingdata[0].timings != undefined &&
+                                                    props.completeData.timingdata[0].timings.timingcategorycode == 4
+                                                    || category.categorycode == 4 ? */}
+                                                    <View>
+                                                        {item.dosage != undefined &&
+                                                            item.dosage[0] != undefined &&
+                                                            item.dosage[0].specifictime ?
+                                                            <Text
+                                                                style={{ fontSize: normalize(8), marginTop: 2, fontWeight: 'bold', color: 'black' }}>
+                                                                {getSlotName(item.timingslotname, item.dosage[0], item)}
+                                                            </Text> :
+                                                            <Text
+                                                                style={{ fontSize: normalize(8), marginTop: 2, fontWeight: 'bold', color: 'black' }}>
+                                                                {item.timingslotname}
+                                                            </Text>}
+                                                    </View>
+                                                    {/* : null} */}
+
+                                                    {item.dosage != undefined &&
+                                                        item.dosage[0] != undefined &&
+                                                        item.dosage[0].specifictime != undefined &&
+                                                        item.dosage[0].specifictime ?
+                                                        <Text
+                                                            style={{ fontSize: normalize(10), marginTop: 2, fontWeight: 'bold', color: 'red' }}>
+                                                            {' @ '}{item.dosage[0].timeprovided}
+                                                        </Text> : null}
+                                                </View>
+
+                                                <View
+                                                    style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                                    <SDropDownDosage
+                                                        dropdownapi={'emr/emrcommonget/rnladropdown 10'}
+                                                        dropdowndata={item.dosage[0].usagename}
+                                                        completeData={item}
+                                                        iconName={'time'}
+                                                        cornerKey={item.bgcolor}
+                                                        // disabled={item.data[0].usagename != null && i != 0 ? true : false}
+                                                        onChangeData={val => (
+                                                            val == undefined
+                                                                ? null
+                                                                : getDosageTiming(item, val)
+                                                        )}
+                                                        onChangeDosage={val => (
+                                                            val == undefined
+                                                                ? null
+                                                                : AddNewDosage(item, val)
+                                                        )}
+                                                        onDeleteData={val => (
+                                                            val == undefined
+                                                                ? null
+                                                                : deleteDosageTimings(item, val)
+                                                        )}
+                                                        editable={item.usagename != 0 && item.usagename != undefined && item.usagename != '' ? false : true}
+                                                        widthArr={Dimensions.get('screen').width * 0.40}
+                                                        refreshCount={val =>
+                                                            val == undefined ? null : setRefresh(refresh + 1)
+                                                        }
+                                                        editStatus={val =>
+                                                            val == undefined ? null : console.log(val)
+                                                        }
+                                                    />
+                                                </View>
+                                            </View>
+
+                                            {switchRefresh ?
+                                                <STimingSwitch key={i}
+                                                    data={item.dosage != undefined && item.dosage[0].specifictime != undefined
+                                                        && item.dosage[0].specifictime ? getArrayTimingSwitchSpecificTime(item.timingslotname, item.dosage[0], item)
+                                                        : getArrayTimingSwitch(item.timingslotname, item.dosage[0])}
+                                                    callBack={val =>
+                                                        val == undefined ? null : (item.timingslotname = val.slotname,
+                                                            item.timingslotfrom = val.timingslotfrom,
+                                                            item.timingslotto = val.timingslotto,
+                                                            item.timingslot = val.timingslot,
+                                                            setRefresh(refresh + 1))
+                                                    } /> : null}
+
+                                            {i != 0 ?
+                                                <View style={{ position: 'absolute', right: normalize(20), top: normalize(5) }}>
+                                                    <TouchableOpacity onPress={() => removetiming(item, i)}>
+                                                        <FontAwesome5 name="trash" color="red" size={normalize(15)} />
+                                                    </TouchableOpacity>
+                                                </View> : null}
+                                        </View>
+                                    );
+                                })
+                                : null}
+
+                            {isLoading ?
+                                <View style={{
+                                    flex: 1, width: '100%', justifyContent: 'center',
+                                    backgroundColor: 'transparent', borderRadius: 10,
+                                }}>
+                                    <SearchLoader />
+                                </View> : null}
+
+                            {timingsArray != null && timingsArray != undefined ?
+                                timingsArray.map((item, i) => {
+                                    return (
+                                        item.dosage != undefined && item.dosage[0].usagename != undefined && item.dosage[0].usagename != '' ?
+                                            <PreviewDosage data={item} arrayData={category} key={i} /> : null
+                                    );
+                                }) : null}
+
+                        </ScrollView>
+                        {timingsArray != null && timingsArray != undefined ?
+                            <View
+                                style={{
+                                    zIndex: 1,
+                                    width: '100%',
+                                    justifyContent: 'flex-start',
+                                    alignItems: 'center',
+                                    flexDirection: 'row',
+                                    height: normalize(32),
+                                    marginTop: normalize(10),
+                                    marginBottom: normalize(10),
+                                }}>
+
+                                {[{ 'displaytext': 'Save', 'size': 10, 'iconname': 'save', 'selected': false, 'visibility': savevisibility ? true : false, 'iconsize': 20, 'functionid': 'SS01' },
+                                { 'displaytext': 'Edit', 'size': 10, 'iconname': 'edit', 'selected': false, 'visibility': !savevisibility ? true : false, 'iconsize': 20, 'functionid': 'SS03' },
+                                { 'displaytext': 'Parameter', 'size': 10, 'iconname': 'plus', 'selected': false, 'visibility': true, 'iconsize': 20, 'functionid': 'SS02' }]
+                                    .map((item, i) => {
+                                        return (
+                                            item.visibility ?
+                                                <View key={i} style={{ paddingLeft: normalize(5) }}>
+                                                    <CAwesomeButton
+                                                        data={{
+                                                            ...item,
+                                                            'shadowcolor': '#eaf2ff',
+                                                            'iconcolor': Global.AppTheme.primary_color,
+                                                            'fontcolor': Global.AppTheme.primary_color,
+                                                        }}
+                                                        callBack={val => val == undefined ? null : getFooterIconClick(item)}
+                                                    />
+                                                </View> : null);
+                                    })}
+                            </View> : null}
+                    </View> : null}
+            </View >
+        );
+    }
+
+    function getFooterIconClick(key) {
+        switch (key.functionid) {
+            case 'SS01': SaveTimings();
+                break;
+            case 'SS02': ADDNEWROW();
+                break;
+            case 'SS03': AddNewTimings();
+                break;
+        }
+    }
+
+    function removetiming(params, index) {
+        if (params.homrcodetimingdetail != undefined
+            && params.homrcodetimingdetail != null) {
+            const objWithIdIndex = timingsArray.findIndex((obj) => obj.timingslot === params.timingslot);
+            var output = {};
+            output.groups = {};
+            output.groups.procedurename = 'homrtimingdetaildelete';
+            output.groups.consultationdata = responseJSON.consultationdata;
+            output.groups.hosumrclassificationnature = hosumrclassificationnature;
+            output.groups.deleteArray = [timingsArray[objWithIdIndex]];
+
+            let buttonapi = APIURL + 'commondelete/RnCommonDelete';
+            console.log('deletebuttonapi', buttonapi);
+            console.log('delete outputttttttttttttRRRRRRRRRRRRRRRRRRRRR', JSON.stringify(output));
+            setIsLoading(true);
+            NetworkServiceCall('post', buttonapi, output)
+                .then(function (response) {
+                    console.log('RESPONSEEEEE>>>>>>>>>>>>>>>>TIMING DELETE', JSON.stringify(response));
+                    if (response.httpstatus == 200) {
+                        if (objWithIdIndex > -1) {
+                            timingsArray.splice(objWithIdIndex, 1);
+                        }
+                        setswitchRefresh(false);
+                        setTimeout(() => {
+                            setswitchRefresh(true);
+                        });
+                        setIsLoading(false);
+                    }
+                    else {
+                        setIsLoading(false);
+                        notifyMessage('Timing Delete Error', 2);
+                    }
+                });
+        } else {
+            timingsArray.splice(index, 1);
+            setswitchRefresh(false);
+            setTimeout(() => {
+                setswitchRefresh(true);
+            });
+        }
+    }
+
+    function getSlotName(key, dosage, params) {
+        var Arr = [{
+            'timingslot': 1,
+            'slotname': 'MORNING',
+            'timingslotfrom': '4:00 AM',
+            'timingslotto': '11:00 AM',
+            'selected': false,
+        }, {
+            'timingslot': 2,
+            'slotname': 'NOON',
+            'timingslotfrom': '11:00 AM',
+            'timingslotto': '4:00 PM',
+            'selected': false,
+        }, {
+            'timingslot': 3,
+            'slotname': 'EVENING',
+            'timingslotfrom': '4:00 PM',
+            'timingslotto': '6:00 PM',
+            'selected': false,
+        }, {
+            'timingslot': 4,
+            'slotname': 'NIGHT',
+            'timingslotfrom': '6:00 PM',
+            'timingslotto': '11:30 PM',
+            'selected': false,
+        }];
+
+        if (dosage.specifictime) {
+            // var xyz = Arr.map((item) => {
+            //     var format = 'hh:mm:ss'
+            //     var time = moment(convertTime12to24(dosage.timeprovided), format),
+            //         beforeTime = moment(convertTime12to24(item.timingslotfrom), format),
+            //         afterTime = moment(convertTime12to24(item.timingslotto), format);
+            //     if (time.isBetween(beforeTime, afterTime)) {
+            //         item.selected = true
+            //         params.timingslotname = item.slotname
+            //         params.timingslot = item.timingslot
+            //         console.log('is between', time)
+            //     } else {
+            //         console.log('is not between', time)
+            //         item.selected = false
+            //     }
+            //     return item
+            // })
+
+            var xyz = Arr.map((item) => {
+                var format = 'hh:mm:ss';
+                var time = moment(convertTime12to24(dosage.timeprovided), format),
+                    beforeTime = moment(convertTime12to24(item.timingslotfrom), format),
+                    afterTime = moment(convertTime12to24(item.timingslotto), format);
+
+                // Declare params as a separate object if needed
+                let updatedParams = { ...params };  // Make a shallow copy of params
+
+                if (time.isBetween(beforeTime, afterTime)) {
+                    item.selected = true;
+                    updatedParams.timingslotname = item.slotname;  // Update the copy of params
+                    updatedParams.timingslot = item.timingslot;
+                    console.log('is between', time);
+                } else {
+                    console.log('is not between', time);
+                    item.selected = false;
+                }
+
+                // Return the updated item
+                return { ...item, updatedParams };
+            });
+
+        }
+        return key;
+    }
+
+    function getArrayTimingSwitchSpecificTime(key, dosage, params) {
+        var Arr = [{
+            'timingslot': 1,
+            'slotname': 'MORNING',
+            'timingslotfrom': '4:00 AM',
+            'timingslotto': '11:00 AM',
+            'selected': false,
+        }, {
+            'timingslot': 2,
+            'slotname': 'NOON',
+            'timingslotfrom': '11:00 AM',
+            'timingslotto': '4:00 PM',
+            'selected': false,
+        }, {
+            'timingslot': 3,
+            'slotname': 'EVENING',
+            'timingslotfrom': '4:00 PM',
+            'timingslotto': '6:00 PM',
+            'selected': false,
+        }, {
+            'timingslot': 4,
+            'slotname': 'NIGHT',
+            'timingslotfrom': '6:00 PM',
+            'timingslotto': '10:00 PM',
+            'selected': false,
+        }];
+
+        if (dosage.specifictime) {
+            var xyz = Arr.map((item) => {
+                var format = 'hh:mm:ss';
+                var time = moment(convertTime12to24(dosage.timeprovided), format),
+                    beforeTime = moment(convertTime12to24(item.timingslotfrom), format),
+                    afterTime = moment(convertTime12to24(item.timingslotto), format);
+                if (time.isBetween(beforeTime, afterTime)) {
+                    item.selected = true;
+                    // console.log('is between')
+                    params.timingslotname = item.slotname;
+                    params.timingslot = item.timingslot;
+                } else {
+                    // console.log('is not between')
+                    item.selected = false;
+                }
+                return item;
+            });
+        }
+        return xyz;
+    }
+
+    function getArrayTimingSwitch(key, dosage) {
+        var Arr = [{
+            'timingslot': 1,
+            'slotname': 'MORNING',
+            'timingslotfrom': '4:00 AM',
+            'timingslotto': '11:00 AM',
+            'selected': false,
+        }, {
+            'timingslot': 2,
+            'slotname': 'NOON',
+            'timingslotfrom': '11:00 AM',
+            'timingslotto': '4:00 PM',
+            'selected': false,
+        }, {
+            'timingslot': 3,
+            'slotname': 'EVENING',
+            'timingslotfrom': '4:00 PM',
+            'timingslotto': '6:00 PM',
+            'selected': false,
+        }, {
+            'timingslot': 4,
+            'slotname': 'NIGHT',
+            'timingslotfrom': '6:00 PM',
+            'timingslotto': '10:00 PM',
+            'selected': false,
+        }];
+
+        // if (key != undefined && key != "") {
+        //     const arr2 = key.split(',');
+        //     Arr.forEach(item1 => {
+        //         var itemFromArr2 = arr2.find(item2 => item2 == item1.slotname);
+
+        //         if (itemFromArr2) {
+        //             item1.selected = true;
+        //         }
+        //     })
+        // }
+
+        var foundIndex = Arr.findIndex(x => x.slotname == key);
+        if (foundIndex > -1) {
+            Arr[foundIndex].selected = true;
+        }
+        return Arr;
+    }
+
+    function ADDNEWROW() {
+        timingsArray.push(
+            {
+                'timingslot': 1,
+                'timingslotname': 'MORNING',
+                'timingslotfrom': '',
+                'timingslotto': '',
+                'usagename': '',
+                'editstatus': false,
+                'dosage': [
+                    {
+                        'volume': 0,
+                        'unit': '',
+                        'intake': '0',
+                        'usagename': '',
+                        'usagetype': 0,
+                        'patientdescription': '',
+                        'consultantdescription': '',
+                        'medicationdescription': '',
+                        'patientdescriptionlocalfont': '',
+                        'remarks': '',
+                        'description': '',
+                        'intakedisplay': 'NA',
+                    },
+                ],
+            }
+        );
+
+        setRefresh(refresh + 1);
+    }
+
+    function deleteDosageTimings(params, val, fullitem) {
+        params.usagename = '';
+        params.hosumrusage = 0;
+        val.dosage = [{
+            'timingslot': 1,
+            'timingslotname': 'EARLY MORNING',
+            'volume': 0,
+            'unit': '',
+            'intake': '0',
+            'usagename': '',
+            'usagetype': 0,
+            'specifictime': false,
+            'timeprovided': '',
+            'patientdescription': '',
+            'consultantdescription': '',
+            'medicationdescription': '',
+            'patientdescriptionlocalfont': '',
+            'remarks': '',
+            'description': '',
+            'intakedisplay': 'NA',
+        }];
+        params.selected = false;
+        params.editstatus = false;
+        setswitchRefresh(false);
+        setTimeout(() => {
+            setswitchRefresh(true);
+        });
+    }
+
+    function getDosageTiming(params, val, fullitem) {
+        var usagename = val.usagename != undefined ? val.usagename : val.displayvalue;
+        params.editstatus = true;
+        params.dosage = [val];
+        params.usagename = val.displayvalue;
+        params.dosage[0].usagename = usagename;
+        setswitchRefresh(false);
+        setTimeout(() => {
+            setswitchRefresh(true);
+        });
+    }
+
+    function AddNewDosage(params, val, fullitem) {
+        params.editstatus = true;
+        params.dosage = [{
+            ...val,
+            'specifictime': params.specifictime,
+        }];
+        params.usagename = val.displayvalue;
+        setswitchRefresh(false);
+        setTimeout(() => {
+            setswitchRefresh(true);
+        });
+    }
+
+    function getPopupContainerStyle() {
+        return {
+            position: 'absolute',
+            bottom: 0,
+            top: Dimensions.get('screen').height * 0.17,
+            width: Dimensions.get('screen').width,
+            borderRadius: 20,
+            borderWidth: 2,
+            borderColor: '#e0e0e0',
+            paddingHorizontal: normalize(5),
+        };
+    }
+}
+
+const layoutstyles = StyleSheet.create({
+    lefticon_container: {
+        marginLeft: '2%',
+    },
+    textinput_view: {
+        flex: 1,
+        paddingLeft: '1%',
+    },
+    overlay_screen_listview_container: {
+        justifyContent: 'center',
+        marginBottom: 10,
+    },
+    overlay_searchTextbox_View: {
+        width: '96%',
+
+    },
+    overlay_screen_heading_text: {
+        ...ComponentStyles.popup_heading,
+        width: '100%',
+    },
+    overlay_screen_container: {
+        width: '100%',
+    },
+});