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

package/src/Custom/CBookingPostpone.js

@@ -0,0 +1,1822 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Text, View, FlatList, TouchableOpacity, Dimensions, ActivityIndicator, ScrollView, Switch, TextInput, RefreshControl } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { normalize } from '../CommonStyle/componentStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { ArrayCheck, getLoading, isBNUL, isNU, isNUQ, isNUQZ, notifyMessage, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import CTextHeader from './TableComponent/CTextHeader';
+import CTextBody from './TableComponent/CTextBody';
+import HHeading from '../HOC/HHeading';
+import STimePicker from '../StaticComponents/STimePicker';
+import Loader from './Loader';
+import moment from 'moment';
+import SDropDownNew from '../Components/SDropDownNew';
+
+import HOCIcons from '../HOC/HOCIcons';
+import SDatePickerNew from '../StaticComponents/SDatePickerNew';
+import { Menu, MenuOptions, MenuTrigger } from 'react-native-popup-menu';
+import CCommentOverlay from '../CustomComponents/CCommentOverlay';
+import CTokenListOverlay from './CTokenListOverlay';
+import CText from '../CustomComponents/CText';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import CAwesomeButton from '../CustomComponents/CAwesomeButton';
+
+const CBookingPostpone = (props) => {
+
+    const navigation = useNavigation();
+
+    const { width, height } = Dimensions.get('screen');
+    const flatlistRef = useRef();
+    const dividedWidth = width / 7;
+    const [data, setData] = useState();
+    const [refresh, setRefresh] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [footerData, setFooterData] = useState();
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const d = new Date();
+    const [monthinno, setMonthInNo] = useState(d.getMonth());
+    const [postponedate, setPostponeDate] = useState();
+    // console.log('postponedate',postponedate)
+    let monthName = months[monthinno];
+    const [year, setYear] = useState(d.getFullYear());
+    const [edit, setEdit] = useState(false);
+    const [consultant, setConsultant] = useState(Global.userData.hosuconsultant);
+    const [pulltorefresh] = useState(false);
+
+    useEffect(() => {
+        if (consultant > 0) {
+            getConsultation(consultant, year, monthinno);
+        }
+    }, []);
+
+    function getFooterIconsFunctions(val) {
+
+        switch (val.functionid) {
+            case 'CB01':
+                ValueCheck(footerData) && ValueCheck(footerData.daywisedata) && ArrayCheck(footerData.daywisedata.tokensArray) ? getSave() : console.log('Disabled');
+                break;
+            case 'CB02': props.callBack(4);
+                break;
+            case 'CB03': props.callBack(2);
+                break;
+            case 'CB04': props.callBack(0);
+                break;
+            case 'CB05': props.callBack(1);
+                break;
+            default: console.log('Deault');
+                break;
+        }
+    }
+
+    function getSave() {
+
+        var output = {
+            'groups': {
+                'procedurename': 'hocobookingtokenpostpone1',
+                'suuser': Global.userData.suuser,
+                'hosuconsultant': consultant,
+                'dataArray': isBNUL(footerData.daywisedata.tokensArray[0].tokenArr) ? footerData.daywisedata.tokensArray[0].tokenArr : footerData.daywisedata.tokensArray[1].tokenArr,
+            },
+        };
+        let buttonapi = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+        console.log('Button apiiiiiiiiii', JSON.stringify(buttonapi));
+        console.log('output CBooking apiiiiiiiiii', JSON.stringify(output));
+
+        setIsLoading(true);
+        NetworkServiceCall('post', buttonapi, output).then(function (response) {
+            console.log('output CBooking apiiiiiiiiiiiiiiiiiiiiii', JSON.stringify(response));
+            if (response.httpstatus == 200
+                && response.data != undefined && response.data != null
+                && response.data.code != undefined && response.data.code > 0) {
+                notifyMessage('Data Saved!!!!!', 1);
+                setFooterData();
+                setPostponeDate();
+                setEdit(false);
+                setIsLoading(false);
+                getConsultation(consultant, year, monthinno);
+            } else {
+                // getDateData(footerData)
+                setIsLoading(false);
+                notifyMessage('Data Not Saved!!!!!', 2);
+            }
+        });
+        getLoading(v => setIsLoading(false));
+    }
+
+    function ShowDatePicker(array) {
+
+        let prevcodearray = array.filter((i, k) => { return i.selected ? { ...i } : undefined; });
+        let prevcode = isBNUL(prevcodearray) ? true : false;
+        return prevcode;
+
+    }
+
+    function GetSelectedTokenType(array) {
+
+        let prevcodearray = array.filter((i, k) => { return i.selected ? { ...i } : undefined; });
+        let prevcode = isBNUL(prevcodearray) && prevcodearray.length == 1 ? prevcodearray[0].bookingtype : false;
+        return prevcode;
+    }
+
+    function footerComponent() {
+
+        return (
+            <View style={{ marginTop: normalize(5) }}>
+                <View style={{ flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', width: '100%' }}>
+                    <View style={{ width: '50%', borderWidth: 0 }}>
+                        {ValueCheck(footerData) && ArrayCheck(footerData.data) ?
+                            <View style={{ marginTop: normalize(12) }}>
+                                <View style={{ paddingHorizontal: normalize(5), flexDirection: 'row', flexWrap: 'wrap' }}>
+                                    {footerData.data.map((display, p) => {
+
+                                        return (
+                                            display != null && display != undefined ?
+                                                // <View key={p} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: normalize(4), paddingLeft: normalize(5) }}>
+                                                //     <View style={{
+                                                //         width: normalize(20),
+                                                //         height: normalize(15),
+                                                //         backgroundColor: display.color,
+                                                //         borderRadius: 5,
+                                                //         alignItems: 'center',
+                                                //         justifyContent: 'center',
+                                                //         marginRight: 5
+                                                //     }}>
+                                                //         <Text style={{ fontSize: normalize(9), fontWeight: 'bold', color: 'white' }}>{display.value}</Text>
+                                                //     </View>
+                                                //     <Text style={{ fontSize: normalize(12) }}>{display.key}</Text>
+                                                // </View>
+
+                                                <TouchableOpacity
+                                                    key={p}
+                                                    disabled={display.key == 'TOTAL' ? true : false}
+                                                    onPress={() => {
+                                                        footerData.daywisedata = [];
+                                                        footerData.data.forEach((item) => {
+                                                            item.selected = false;
+                                                        });
+                                                        display.selected = true;
+                                                        setRefresh(refresh + 1);
+                                                        // setRefresh(refresh+1);
+                                                        getApiPatientData2(footerData, postponedate, display.bookingtype);
+                                                    }}
+                                                    style={{
+                                                        minWidth: normalize(50),
+                                                        borderRadius: 10,
+                                                        marginBottom: normalize(3),
+                                                        marginLeft: normalize(3),
+                                                        paddingVertical: normalize(3),
+                                                        alignItems: 'flex-start',
+                                                        backgroundColor: display.selected ? '#acbeff' : 'white',
+                                                        borderWidth: 0.5,
+                                                        borderColor: display.color,
+                                                        paddingHorizontal: normalize(3),
+                                                        borderBottomWidth: 3,
+                                                        borderLeftWidth: 3,
+                                                        opacity: 0.8,
+                                                        flexDirection: 'column',
+                                                        justifyContent: 'space-between',
+                                                    }}>
+                                                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                                        <Icons.FontAwesome5
+                                                            name={ValueCheck(display.iconname) ? display.iconname : 'coins'}
+                                                            color={display.color}
+                                                            size={normalize(10)}
+                                                        />
+                                                        <Text style={{ fontWeight: 'bold', fontSize: normalize(15), color: 'black', paddingLeft: normalize(10), textAlign: 'center' }}>
+                                                            {display.value}
+                                                        </Text>
+                                                    </View>
+                                                    <Text numberOfLines={1} style={{
+                                                        alignSelf: 'center',
+                                                        fontSize: normalize(8),
+                                                        fontWeight: '700',
+                                                        color: 'black',
+                                                    }}>
+                                                        {display.key}
+                                                    </Text>
+                                                </TouchableOpacity>
+                                                : null);
+                                    })}
+                                </View>
+                            </View>
+                            : null}
+                    </View>
+                    <View style={{ borderWidth: 0 }}>
+                        {isNU(footerData) && isBNUL(footerData.data) && ShowDatePicker(footerData.data) && isNU(postponedate) ?
+                            <View style={{ justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+                                <View style={{ width: Dimensions.get('screen').width * 0.3 }}>
+                                    <Text style={{ fontSize: normalize(10) }}>Postponed Date</Text>
+                                    <SDatePickerNew
+                                        icon={{
+                                            'icongroup': 5,
+                                            'name': 'calendar-alt',
+                                            'size': normalize(15),
+                                        }}
+                                        iconstyle={{
+                                            color: Global.AppTheme.primary_color,
+                                            paddingHorizontal: normalize(5),
+                                            textAlign: 'center',
+                                        }}
+                                        pickerstyle={{
+                                            flexDirection: 'row',
+                                            backgroundColor: '#fff',
+                                            width: '100%',
+                                            borderColor: 'lightgrey',
+                                            borderWidth: 1,
+                                            borderRadius: 5,
+                                            alignItems: 'center',
+                                            height: normalize(30),
+                                            elevation: 5,
+                                            justifyContent: 'flex-start',
+                                            marginVertical: normalize(3),
+                                        }}
+                                        textstyle={{
+                                            fontSize: normalize(14),
+                                            color: 'black',
+                                            fontWeight: 'bold',
+                                        }}
+                                        table={false}
+                                        data={{
+                                            itemwidth: '100%',
+                                            displaytext: 'Consultation Date',
+                                        }}
+                                        minimumdate={moment().format('YYYY-MM-DD')}
+                                        passingDate={postponedate}
+                                        onChangeData={val => val == undefined ? null : (
+                                            setPostponeDate(moment(val).format('YYYY-MM-DD')),
+                                            footerData.daywisedata = [],
+                                            (isNU(GetSelectedTokenType(footerData.data)) ? getApiPatientData2(footerData, moment(val).format('YYYY-MM-DD'), GetSelectedTokenType(footerData.data)) : null),
+                                            console.log('SDatePickerNew', JSON.stringify(footerData.data)),
+                                            console.log(moment(val).format('YYYY-MM-DD')),
+                                            console.log(moment().format('LT'))
+                                        )}
+                                        refreshCount={val => val == undefined ? null : setRefresh(refresh + val)}
+                                    />
+                                </View>
+                            </View>
+                            : null}
+                    </View>
+                </View>
+
+
+
+                {/* {footerData != undefined && footerData.data != undefined ?
+                    <View
+                        style={{ backgroundColor: '#fff', height: normalize(25), alignItems: 'center', justifyContent: 'space-evenly', flexDirection: 'row' }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', width: '50%', justifyContent: 'center' }}>
+                            <Icons.FontAwesome5 name={"calendar-day"} color={"black"} size={normalize(15)} />
+                            <Text style={{ fontWeight: 'bold', fontSize: normalize(15), color: 'black', paddingLeft: normalize(10) }}>
+                                {footerData.displaytext + "/" + monthName + "/" + year}
+                            </Text>
+                        </View>
+                    </View> : null} */}
+
+                {footerData != undefined && ValueCheck(footerData.daywisedata) && ArrayCheck(footerData.daywisedata.tokensArray) ?
+                    <FlatList
+                        nestedScrollEnabled={true}
+                        data={footerData.daywisedata.tokensArray}
+                        style={{ width: width }}
+                        renderItem={(k) => renderFooterView(k)}
+                        keyExtractor={(item, index) => 'key' + index}
+                        listKey={(item, index) => 'key' + index}
+                    />
+                    : null}
+            </View>
+        );
+    }
+
+    function getExpand(params) {
+        // params.expand = !params.expand
+        // setRefresh(refresh + 1)
+    }
+
+    function getTimeDiffernece(params) {
+        var startTime = moment(params.reportingtime, 'HH:mm:ss a');
+        var endTime = moment(params.reportingto, 'HH:mm:ss a');
+        var duration = moment.duration(endTime.diff(startTime));
+        var hours = parseInt(duration.asHours());
+        var minutes = parseInt(duration.asMinutes());
+        // console.log(hours + ' hr and ' + minutes + ' min');
+        params.waitingtime = minutes;
+        return minutes;
+    }
+
+    function getSingleRT(item, val) {
+        item.reportingtime = val;
+        item.EditFlag = 2;
+        item.reportingto = moment(moment(item.reportingtime, 'HH:mm:ss a')).add(30, 'minutes').format('hh:mm A');
+        getEditFlag();
+    }
+
+    function getSingleCT(item, val) {
+        item.reportingto = val;
+        item.EditFlag = 2;
+        // item.reportingtime = moment(moment(item.reportingto, 'HH:mm:ss a')).subtract(30, 'minutes').format('hh:mm A')
+        getEditFlag();
+    }
+
+    function renderFooterView({ item }) {
+
+        // console.log('renderFooterView', JSON.stringify(item.tokenArr))
+
+        return (
+            ArrayCheck(item.tokenArr) ?
+                <View style={{ flex: 1 }}>
+                    {/* <HHeading
+                        styles={{
+                            "iconname": item.iconname,
+                            "bgcolor": "#f4f4f4",
+                            "iconsize": 16,
+                            "iconcolor": Global.AppTheme.primary_color,
+                            "displaytext": item.tokentype,
+                            "textsize": 14,
+                            "textcolor": Global.AppTheme.primary_color
+                        }}
+                        callBack={val => (val == undefined ? null : getExpand(item))}
+                        Expand={val => (val == undefined ? null : getExpand(item))}>
+                    </HHeading> */}
+                    {ArrayCheck(item.tokenArr) ?
+                        <View>
+                            <View style={{ flexDirection: 'row', width: '100%' }}>
+                                <View style={{ width: '35%' }}>
+                                    <View style={{ borderWidth: 0.5, borderColor: 'grey', backgroundColor: '#f0f0f0', height: normalize(20), justifyContent: 'center', alignItems: 'center' }}>
+                                        <Text adjustsFontSizeToFit style={{ textAlign: 'center', color: 'black', fontSize: normalize(10), paddingHorizontal: normalize(2) }}>{'TOKEN'}</Text>
+                                    </View>
+
+                                    {/* <CTextHeader
+                                        text={'TOKEN'}
+                                        widthArr={'100%'}
+                                        bgColor={"lightgrey"}
+                                        color={Global.AppTheme.primary_color}
+                                        borderColor={'lightgrey'}
+                                        marginHorizontal={normalize(2)}
+                                        borderRadius={5}
+                                        elevation={3}
+                                    /> */}
+                                </View>
+                                <View style={{ width: '20%' }}>
+                                    <View style={{ borderWidth: 0.5, borderColor: 'grey', backgroundColor: '#f0f0f0', height: normalize(20), justifyContent: 'center', alignItems: 'center' }}>
+                                        <Text adjustsFontSizeToFit style={{ textAlign: 'center', color: 'black', fontSize: normalize(10), paddingHorizontal: normalize(2) }}>{'POSTPONED DATE'}</Text>
+                                    </View>
+                                    {/* <CTextHeader
+                                        text={'POSTPONED DATE'}
+                                        widthArr={'100%'}
+                                        bgColor={"lightgrey"}
+                                        color={Global.AppTheme.primary_color}
+                                        borderColor={'lightgrey'}
+                                        marginHorizontal={normalize(2)}
+                                        borderRadius={5}
+                                        elevation={3}
+                                    /> */}
+                                </View>
+                                <View style={{ width: '35%' }}>
+                                    <View style={{ borderWidth: 0.5, borderColor: 'grey', backgroundColor: '#f0f0f0', height: normalize(20), justifyContent: 'center', alignItems: 'center' }}>
+                                        <Text adjustsFontSizeToFit style={{ textAlign: 'center', color: 'black', fontSize: normalize(10), paddingHorizontal: normalize(2) }}>{'POSTPONED TOKEN'}</Text>
+                                    </View>
+                                    {/* <CTextHeader
+                                        text={'POSTPONED TOKEN'}
+                                        widthArr={'100%'}
+                                        bgColor={"lightgrey"}
+                                        color={Global.AppTheme.primary_color}
+                                        borderColor={'lightgrey'}
+                                        marginHorizontal={normalize(2)}
+                                        borderRadius={5}
+                                        elevation={3}
+                                    /> */}
+                                </View>
+                                <View style={{ width: '10%' }}>
+                                    <View style={{ borderWidth: 0.5, borderColor: 'grey', backgroundColor: '#f0f0f0', height: normalize(20), justifyContent: 'center', alignItems: 'center' }}>
+                                        <Text adjustsFontSizeToFit style={{ textAlign: 'center', color: 'black', fontSize: normalize(10), paddingHorizontal: normalize(2) }}>{'ENABLED'}</Text>
+                                    </View>
+                                    {/* <CTextHeader
+                                        text={'ENABLED'}
+                                        widthArr={'100%'}
+                                        bgColor={"lightgrey"}
+                                        color={Global.AppTheme.primary_color}
+                                        borderColor={'lightgrey'}
+                                        marginHorizontal={normalize(2)}
+                                        borderRadius={5}
+                                        elevation={3}
+                                    /> */}
+                                </View>
+                            </View>
+                            <FlatList
+                                data={item.tokenArr}
+                                // data={[{
+                                //     "patientname": "REJUL RAPHAEL",
+                                //     "patientid": "12473567",
+                                //     "mobilenumber": "7994378855",
+                                //     "address": "HOUSE NAME, THRISSUR",
+                                //     "tokenno": "100",
+                                //     "ctokendate": "10-09-2024 08:00 AM",
+                                //     "ctokentype": "C",
+                                //     "postponedate": "12-09-2024",
+                                //     "ptokenno": "200",
+                                //     "ptokendate": "12-09-2024 09:00 PM",
+                                //     "editstatus": true,
+                                //     "remarks": "",
+                                //     "color": 'blue'
+                                // }]}
+                                style={{ backgroundColor: '#fff' }}
+                                initialNumToRender={10}
+                                maxToRenderPerBatch={10}
+                                renderItem={(k) => renderMrngEvngToken(k)}
+                                keyExtractor={(item, index) => 'key' + index}
+                                listKey={(item, index) => 'key' + index}
+                            />
+                        </View>
+                        : null}
+                </View> : null
+        );
+    }
+
+    function reverse(s) {
+        return s != undefined ? s.split('-').reverse().join('-') : '';
+    }
+
+    function callData() {
+
+        let jsonadata = [];
+
+        setIsLoading(true);
+        setTimeout(() => {
+
+            jsonadata = [
+                {
+                    'ptokenno': '201',
+                    'ptokendate': '12-09-2024 09:00 PM',
+                    'color': 'blue',
+                },
+                {
+                    'ptokenno': '202',
+                    'ptokendate': '12-09-2024 09:00 PM',
+                    'color': 'blue',
+                },
+                {
+                    'ptokenno': '203',
+                    'ptokendate': '12-09-2024 09:00 PM',
+                    'color': 'blue',
+                },
+                {
+                    'ptokenno': '204',
+                    'ptokendate': '12-09-2024 09:00 PM',
+                    'color': 'blue',
+                },
+                {
+                    'ptokenno': '205',
+                    'ptokendate': '12-09-2024 09:00 PM',
+                    'color': 'blue',
+                },
+                {
+                    'ptokenno': '206',
+                    'ptokendate': '12-09-2024 09:00 PM',
+                    'color': 'blue',
+                },
+                {
+                    'ptokenno': '207',
+                    'ptokendate': '12-09-2024 09:00 PM',
+                    'color': 'blue',
+                },
+            ];
+            setIsLoading(false);
+        });
+
+        return jsonadata;
+    }
+
+    function fnReturnData() {
+
+        let datajson = callData();
+
+        return (
+            <View>
+                <FlatList
+                    data={[
+                        {
+                            'ptokenno': '201',
+                            'ptokendate': '12-09-2024 09:00 PM',
+                            'color': 'blue',
+                        },
+                        {
+                            'ptokenno': '202',
+                            'ptokendate': '12-09-2024 09:00 PM',
+                            'color': 'blue',
+                        },
+                        {
+                            'ptokenno': '203',
+                            'ptokendate': '12-09-2024 09:00 PM',
+                            'color': 'blue',
+                        },
+                        {
+                            'ptokenno': '204',
+                            'ptokendate': '12-09-2024 09:00 PM',
+                            'color': 'blue',
+                        },
+                        {
+                            'ptokenno': '205',
+                            'ptokendate': '12-09-2024 09:00 PM',
+                            'color': 'blue',
+                        },
+                        {
+                            'ptokenno': '206',
+                            'ptokendate': '12-09-2024 09:00 PM',
+                            'color': 'blue',
+                        },
+                        {
+                            'ptokenno': '207',
+                            'ptokendate': '12-09-2024 09:00 PM',
+                            'color': 'blue',
+                        },
+                    ]}
+                    horizontal={true}
+                    renderItem={(val) => {
+                        return (
+                            <TouchableOpacity style={{ margin: normalize(5), elevation: 5, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderTopWidth: 0.5, borderRightWidth: 0.5, borderLeftWidth: 2, borderBottomWidth: 2, borderRadius: 5, height: normalize(35), borderColor: val.item.color }}>
+                                <View style={{ backgroundColor: val.item.color, borderRadius: 5, padding: 5, width: normalize(25), height: normalize(20), justifyContent: 'center', alignItems: 'center', margin: 5 }} >
+                                    <Text style={{ color: 'white', fontSize: normalize(10), fontWeight: 'bold' }}>{val.item.ptokenno}</Text>
+                                </View>
+                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                    <HOCIcons.FontAwesome5
+                                        name={'calendar-alt'}
+                                        size={normalize(8)}
+                                        color={val.item.color}
+                                        style={{
+                                            paddingHorizontal: normalize(3),
+                                        }}
+                                    />
+                                    <Text style={{ paddingRight: normalize(5), fontSize: normalize(9), color: 'black', fontWeight: 'bold' }}>{val.item.ptokendate}</Text>
+                                </View>
+                            </TouchableOpacity>
+                        );
+                    }}
+                />
+            </View>
+        );
+
+
+
+
+
+    }
+
+    function renderMrngEvngToken({ item }) {
+
+        // console.log('renderMrngEvngToken', moment(item.postponedate).format('YYYY-MM-DD'))
+
+        return (
+            <View style={{
+                alignSelf: 'center',
+                backgroundColor: item.editstatus ? 'white' : '#f0f0f0',
+                width: '100%',
+                flexDirection: 'row',
+                // opacity: item.editstatus ? 1 : 0.6,
+            }}>
+
+                <View style={{ width: '35%', borderWidth: 0.5, borderColor: 'grey', flexDirection: 'column' }}>
+                    <View style={{ flexDirection: 'row' }}>
+                        <View style={{ backgroundColor: item.color, borderRadius: 5, width: normalize(20), height: normalize(20), justifyContent: 'center', alignItems: 'center', margin: normalize(3) }} >
+                            <Text adjustsFontSizeToFit style={{ color: '#fff', fontSize: normalize(10), fontWeight: 'bold' }}>{item.tokenno}</Text>
+                        </View>
+                        <View>
+                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <HOCIcons.FontAwesome5
+                                    name={'user-alt'}
+                                    size={normalize(8)}
+                                    color={item.color}
+                                    style={{
+                                        paddingHorizontal: normalize(3),
+                                    }}
+                                />
+                                <Text adjustsFontSizeToFit style={{ fontSize: normalize(9), color: 'black', fontWeight: 'bold' }}>{item.patientname}</Text>
+                            </View>
+                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <HOCIcons.MaterialCommunityIcons
+                                    name={'card-account-details-outline'}
+                                    size={normalize(8)}
+                                    color={item.color}
+                                    style={{
+                                        paddingHorizontal: normalize(3),
+                                    }}
+                                />
+                                <View>
+                                    <Text adjustsFontSizeToFit style={{ fontSize: normalize(9), color: 'black', fontWeight: 'bold' }}>{item.patientid}</Text>
+                                </View>
+                            </View>
+
+                        </View>
+                    </View>
+                    <View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                            <HOCIcons.FontAwesome5
+                                name={'calendar-alt'}
+                                size={normalize(8)}
+                                color={item.color}
+                                style={{
+                                    paddingHorizontal: normalize(3),
+                                }}
+                            />
+                            <Text adjustsFontSizeToFit style={{ fontSize: normalize(9), color: 'black', fontWeight: 'bold' }}>{isNU(item.bookingdate) ? moment(item.bookingdate).format('DD-MM-YYYY') : null}{' '}{isNU(item.reportingto) ? item.reportingto : null}</Text>
+                        </View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                            <HOCIcons.FontAwesome5
+                                name={'phone-alt'}
+                                size={normalize(8)}
+                                color={item.color}
+                                style={{
+                                    paddingHorizontal: normalize(3),
+                                }}
+                            />
+                            <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), color: 'black', fontWeight: 'bold' }}>{item.mobilenumber}</Text>
+                        </View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                            <HOCIcons.FontAwesome5
+                                name={'house-user'}
+                                size={normalize(8)}
+                                color={item.color}
+                                style={{
+                                    paddingHorizontal: normalize(3),
+                                }}
+                            />
+                            <Text adjustsFontSizeToFit style={{ fontSize: normalize(8), color: 'black', fontWeight: 'bold' }}>{item.patientaddress}</Text>
+                        </View>
+
+                    </View>
+                </View>
+                <View style={{
+                    width: '20%',
+                    borderWidth: 0.5,
+                    borderColor: 'grey',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}>
+                    <SDatePickerNew
+                        icon={{
+                            'icongroup': 5,
+                            'name': 'calendar-alt',
+                            'size': normalize(10),
+                        }}
+                        iconstyle={{
+                            color: item.color,
+                            paddingHorizontal: normalize(3),
+                            textAlign: 'center',
+                        }}
+                        pickerstyle={{
+                            flexDirection: 'row',
+                            // backgroundColor: '#fff',
+                            width: '100%',
+                            borderColor: 'lightgrey',
+                            borderWidth: 0,
+                            borderRadius: 5,
+                            alignItems: 'center',
+                            // height: normalize(25),
+                            elevation: 0,
+                            justifyContent: 'flex-start',
+                        }}
+                        textstyle={{
+                            fontSize: normalize(10), color: 'black', fontWeight: 'bold',
+                        }}
+                        table={false}
+                        data={{ itemwidth: '100%', displaytext: 'Consultation Date' }}
+                        minimumdate={moment().format('YYYY-MM-DD')}
+                        passingDate={isNU(item.postponedate) ? item.postponedate : null}
+                        checkifdatematches={item.bookingdate}
+                        onChangeData={val => val == undefined ? null : (
+                            // console.log('onChangeData', val),
+                            item.postponedate = moment(val).format('YYYY-MM-DD'),
+                            getTokenList(footerData, moment(val).format('YYYY-MM-DD'), item)
+                            // getApiPatientData2(footerData, moment(val).format('YYYY-MM-DD'))
+                        )}
+                        refreshCount={val => val == undefined ? null : setRefresh(refresh + val)}
+                    />
+                </View>
+                <View style={{ width: '35%', borderWidth: 0.5, borderColor: 'grey', justifyContent: 'center', alignItems: 'center' }}>
+                    {item.postponetoken ?
+                        <View style={{ width: '100%' }}>
+                            <Menu>
+                                <MenuTrigger
+                                    // onPress={()=>{
+                                    //     getTokenList2(footerData, moment(item.postponedate).format('YYYY-MM-DD'),item)
+                                    // }}
+                                    customStyles={{
+                                        triggerWrapper: {
+                                            borderWidth: 0,
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'flex-start',
+                                        },
+                                    }}
+                                >
+                                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
+                                        <View style={{ backgroundColor: item.color, borderRadius: 5, width: normalize(20), height: normalize(20), justifyContent: 'center', alignItems: 'center', margin: normalize(3) }} >
+                                            <Text adjustsFontSizeToFit style={{ color: '#fff', fontSize: normalize(10), fontWeight: 'bold' }}>{item.postponetoken}</Text>
+                                        </View>
+                                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                            <HOCIcons.FontAwesome5
+                                                name={'calendar-alt'}
+                                                size={normalize(8)}
+                                                color={item.color}
+                                                style={{
+                                                    paddingHorizontal: normalize(3),
+                                                }}
+                                            />
+                                            <Text style={{ fontSize: normalize(8), color: 'black', fontWeight: 'bold' }}>{isNU(item.postponedate) ? moment(item.postponedate).format('DD-MM-YYYY') : null}{' '}{isNU(item.postponeconsultationtime) ? item.postponeconsultationtime : null}</Text>
+                                        </View>
+                                    </View>
+                                </MenuTrigger>
+                                <MenuOptions
+                                    optionsContainerStyle={{ marginTop: normalize(50), backgroundColor: '#ffffff00' }}
+                                    customStyles={{
+                                        optionsContainer: {
+                                            shadowColor: '#000000d8',
+                                            shadowRadius: 0,
+                                            borderRadius: 5,
+                                            borderWidth: 0.5,
+                                            padding: normalize(5),
+                                            borderColor: 'lightgrey',
+                                            elevation: 3,
+                                            width: Dimensions.get('screen').width,
+                                            backgroundColor: 'white',
+                                        },
+                                        optionText: {},
+                                    }}>
+                                    <CTokenListOverlay
+                                        footerData={footerData}
+                                        postponedate={moment(item.postponedate).format('YYYY-MM-DD')}
+                                        item={item}
+                                        consultant={consultant}
+                                        callback={(val) => {
+                                            item.postponetoken = val.tokenno;
+                                            item.postponeconsultationtime = val.postponeconsultationtime;
+                                            setRefresh(refresh + 1);
+                                        }}
+                                    />
+                                </MenuOptions>
+                            </Menu>
+
+                            <View style={{
+                                width: '100%',
+                                marginTop: normalize(5),
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}>
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        item.remarksoverlay = !item.remarksoverlay;
+                                        setRefresh(refresh + 1);
+                                        console.log('remarksoverlay', item.remarksoverlay);
+                                    }}
+                                    style={{ backgroundColor: 'white', elevation: 0, height: normalize(20), borderWidth: 1, borderRadius: 1, borderColor: 'lightgrey', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '95%' }}>
+                                    <HOCIcons.MaterialCommunityIcons
+                                        name={'comment'}
+                                        size={normalize(10)}
+                                        color={item.color}
+                                        style={{
+                                            paddingHorizontal: normalize(3),
+                                        }}
+                                    />
+                                    <Text adjustsFontSizeToFit numberOfLines={1} style={{ paddingRight: normalize(3), fontSize: normalize(8), color: 'black', fontWeight: 'bold' }}>{isNU(item.remarks) ? item.remarks : null}</Text>
+                                </TouchableOpacity>
+                                {item.remarksoverlay ?
+
+                                    <CCommentOverlay
+                                        disabled={false}
+                                        icon={{
+                                            'name': 'badge-account',
+                                            'icongroup': 3,
+                                            'size': normalize(15),
+                                            'style': {
+                                                marginHorizontal: normalize(10),
+                                            },
+                                        }}
+                                        footericon={{
+                                            'name': 'select1',
+                                            'icongroup': 1,
+                                            'color': Global.AppTheme.primary_color,
+                                            'size': normalize(25),
+                                            'style': {
+                                                marginHorizontal: normalize(10),
+                                            },
+                                        }}
+                                        footerbuttontext={'Select'}
+                                        heading={'REMARKS'}
+                                        overlaystyle={{
+                                            borderRadius: 10,
+                                            height: Dimensions.get('window').height * 0.38,
+                                            borderWidth: 0,
+                                            borderColor: 'darkblue',
+                                            alignSelf: 'center',
+                                            width: Dimensions.get('screen').width * 1,
+                                            alignItems: 'center',
+                                            justifyContent: 'flex-start',
+                                            padding: 0,
+                                            backgroundColor: 'transparent',
+                                            position: 'absolute',
+                                            bottom: 0,
+
+                                            // position: 'absolute',
+                                            // bottom: 0,
+                                            // top: Dimensions.get('screen').height * 0.5,
+                                            // width: Dimensions.get('screen').width,
+                                            // borderRadius: 20,
+                                            // borderWidth: 2,
+                                            // borderColor: '#e0e0e0',
+                                            // paddingHorizontal: normalize(5),
+                                        }}
+                                        data={isNU(item.remarks) ? item.remarks : null}
+                                        callback={val => {
+                                            // console.log('callback from overlay');
+                                        }}
+                                        onsavecallback={val => {
+                                            console.log('onsavecallback', val);
+                                            item.remarks = val;
+                                            item.remarksoverlay = false;
+                                            setRefresh(refresh + 1);
+                                            // setCommentOverlay(false);
+                                        }}
+                                        OverlayClose={val => {
+                                            console.log('callback from OverlayClose');
+                                            item.remarksoverlay = false;
+                                            setRefresh(refresh + 1);
+                                            // setCommentOverlay(false);
+                                        }}
+                                    />
+                                    : null}
+                            </View>
+                        </View>
+                        :
+
+                        <Menu>
+                            <MenuTrigger
+                                // onPress={()=>{
+                                //     getTokenList2(footerData, moment(item.postponedate).format('YYYY-MM-DD'),item)
+                                // }}
+                                customStyles={{
+                                    triggerWrapper: {
+                                        borderWidth: 0,
+                                        justifyContent: 'flex-start',
+                                        alignItems: 'flex-start',
+                                    },
+                                }}
+                            >
+                                <View
+                                    // onPress={() => {
+                                    //     // getApiPatientData2(footerData, item.postponedate)
+                                    // }}
+                                    style={{
+                                        borderRadius: 5,
+                                        borderWidth: 0.5,
+                                        borderColor: 'grey',
+                                        backgroundColor: 'white',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    }}>
+                                    <Text style={{ fontSize: normalize(10), fontWeight: 'bold', fontStyle: 'italic', color: 'black', padding: normalize(10), paddingHorizontal: normalize(15) }}>Select token</Text>
+                                </View>
+                            </MenuTrigger>
+                            <MenuOptions
+                                optionsContainerStyle={{ marginTop: normalize(50), backgroundColor: '#ffffff00' }}
+                                customStyles={{
+                                    optionsContainer: {
+                                        shadowColor: '#000000d8',
+                                        shadowRadius: 0,
+                                        borderRadius: 5,
+                                        borderWidth: 0.5,
+                                        padding: normalize(5),
+                                        borderColor: 'lightgrey',
+                                        elevation: 3,
+                                        width: Dimensions.get('screen').width,
+                                        backgroundColor: 'white',
+                                    },
+                                    optionText: {},
+                                }}>
+
+                                <CTokenListOverlay
+                                    footerData={footerData}
+                                    postponedate={moment(item.postponedate).format('YYYY-MM-DD')}
+                                    item={item}
+                                    consultant={consultant}
+                                    callback={(val) => {
+                                        console.log('CTokenListOverlay ', JSON.stringify(val));
+                                        item.postponetoken = val.tokenno;
+                                        item.postponedate = val.postponedate;
+                                        item.postponeconsultationtime = val.postponeconsultationtime;
+                                        setRefresh(refresh + 1);
+                                    }}
+                                />
+                            </MenuOptions>
+                        </Menu>
+                    }
+                </View>
+                <View style={{ width: '10%', borderWidth: 0.5, borderColor: 'grey', justifyContent: 'center', alignItems: 'center' }}>
+                    <TouchableOpacity
+                        onPress={() => {
+                            if (item.editstatus == 'N') {
+                                item.editstatus = 'Y';
+                                getEditFlag();
+                            }
+                            else if (item.editstatus == 'Y') {
+                                item.editstatus = 'N';
+                            }
+                            // item.editstatus = !item.editstatus;
+                            setRefresh(refresh + 1);
+                        }}
+                        style={{}}>
+
+                        <HOCIcons.Fontisto
+                            name={item.editstatus == 'Y' ? 'toggle-on' : 'toggle-off'}
+                            size={normalize(23)}
+                            color={item.editstatus == 'Y' ? 'green' : '#646464'}
+                            style={{ textAlign: 'center', borderWidth: 0 }}
+                        />
+                    </TouchableOpacity>
+
+
+                </View>
+
+
+
+                {/* <View style={{ flexDirection: 'row', borderWidth: 0, backgroundColor: 'lightgrey', paddingHorizontal: normalize(5), borderTopLeftRadius: 5, borderTopRightRadius: 5, width: '100%' }}>
+
+                    <Icons.FontAwesome5 name="user" color={"black"} size={normalize(12)} style={{ paddingHorizontal: normalize(5) }} />
+                    <Text numberOfLines={1} style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'black' }}>
+                        {item.patientname}{', '}{item.mobilenumber}
+                    </Text>
+                </View> */}
+                {/* <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
+
+
+
+
+                    <View style={{ flexDirection: 'row', width: '50%', borderWidth: 1 }}>
+                        <View style={{ borderWidth: 0, justifyContent: 'flex-start', alignItems: 'center' }}>
+                            <View style={{ width: normalize(30), backgroundColor: item.color, height: normalize(30), borderRadius: normalize(1000), alignItems: 'center', justifyContent: 'center', elevation: 5 }} >
+                                <Text numberOfLines={1} style={{ color: getTimeDiffernece(item) > 30 && getTimeDiffernece(item) > 0 ? "red" : "#fff", fontSize: normalize(17), fontWeight: 'bold' }}>{item.tokenno}</Text>
+                            </View>
+
+                            <View style={{ borderWidth: 0, padding: normalize(4), justifyContent: 'center', alignItems: 'center' }}>
+                                <Text style={{ fontWeight: 'normal', color: 'black', fontSize: normalize(6) }}>Reporting Time</Text>
+                                <Text style={{ fontWeight: 'bold', color: 'black', fontSize: normalize(9) }}>{isNU(item.waitingtime) ? '08:00 AM ' : null}</Text>
+                            </View>
+                        </View>
+
+                        <View style={{ borderWidth: 0, paddingHorizontal: normalize(5) }}>
+
+                            <View style={{ borderWidth: 0 }}>
+                                <SDatePickerNew
+                                    icon={{
+                                        'icongroup': 5,
+                                        'name': 'calendar-alt',
+                                        'size': normalize(15)
+                                    }}
+                                    iconstyle={{
+                                        color: item.color,
+                                        paddingHorizontal: normalize(5),
+                                        textAlign: 'center'
+                                    }}
+                                    textstyle={
+                                        { fontSize: normalize(12), color: "black", fontWeight: 'bold' }
+                                    }
+                                    table={false}
+                                    data={{ itemwidth: Dimensions.get('screen').width * 0.27, displaytext: 'Consultation Date' }}
+                                    passingDate={null}
+                                    onChangeData={val =>
+                                        val == undefined
+                                            ? null
+                                            : (console.log(moment(val).format('YYYY-MM-DD')), console.log(moment().format('LT')))}
+                                    refreshCount={val =>
+                                        val == undefined
+                                            ? null
+                                            : setRefresh(refresh + val)
+                                    }
+                                />
+                            </View>
+                            <View style={{ width: Dimensions.get('screen').width * 0.27, justifyContent: 'center', alignItems: 'center', borderWidth: 0, marginTop: normalize(5) }}>
+                                <STimePicker
+                                    pickerstyle={{
+                                        borderWidth: 1,
+                                        borderColor: 'lightgrey',
+                                        borderRadius: 5,
+                                        alignItems: 'center',
+                                        justifyContent: 'flex-start',
+                                        height: normalize(30),
+                                        flexDirection: 'row',
+                                        elevation: 3,
+                                        backgroundColor: 'white',
+                                        width: Dimensions.get('screen').width * 0.27
+                                    }}
+                                    icon={{
+                                        'icongroup': 3,
+                                        'name': 'clock',
+                                        'size': normalize(15)
+                                    }}
+                                    iconstyle={{
+                                        color: item.color,
+                                        paddingHorizontal: normalize(5),
+                                        textAlign: 'center'
+                                    }}
+                                    textstyle={{
+                                        fontSize: normalize(12),
+                                        fontWeight: 'bold',
+                                        color: '#000000',
+                                        alignItems: 'center',
+                                        textAlign: 'center',
+                                        justifyContent: 'center',
+                                    }}
+                                    bgcolor={'#fff'}
+                                    placeholder={"Consultation Time"}
+                                    height={normalize(23)}
+                                    width={normalize(76)}
+                                    value={item.reportingto}
+                                    callBack={val => (val == undefined ? null : getSingleCT(item, val))}
+                                />
+                            </View>
+                        </View>
+                    </View>
+
+                     <View style={{}}>
+                        <HOCIcons.Icons
+                            icongroup={2}
+                            name={'double-arrow'}
+                            size={normalize(25)}
+                            color={'darkblue'}
+                        />
+                    </View>
+
+                    <TouchableOpacity style={{ width: '50%', borderWidth: 1 }}>
+                        <View style={{ borderWidth: 0, justifyContent: 'flex-start', alignItems: 'center' }}>
+                            <View style={{ width: normalize(30), backgroundColor: item.color, height: normalize(30), borderRadius: normalize(1000), alignItems: 'center', justifyContent: 'center', elevation: 5 }} >
+                                <Text numberOfLines={1} style={{ color: getTimeDiffernece(item) > 30 && getTimeDiffernece(item) > 0 ? "red" : "#fff", fontSize: normalize(17), fontWeight: 'bold' }}>{item.tokenno}</Text>
+                            </View>
+
+                            <View style={{ borderWidth: 0, padding: normalize(4), justifyContent: 'center', alignItems: 'center' }}>
+                                <Text style={{ fontWeight: 'normal', color: 'black', fontSize: normalize(6) }}>Reporting Time</Text>
+                                <Text style={{ fontWeight: 'bold', color: 'black', fontSize: normalize(9) }}>{isNU(item.waitingtime) ? '08:00 AM ' : null}</Text>
+                            </View>
+                        </View>
+
+                        <View style={{ borderWidth: 0, paddingHorizontal: normalize(5) }}>
+
+                            <View style={{ borderWidth: 0 }}>
+                                <SDatePickerNew
+                                    pickerstyle={{
+                                        flexDirection: 'row',
+                                        backgroundColor: '#fff',
+                                        // width: ,
+                                        borderColor: 'lightgrey',
+                                        borderWidth: 1,
+                                        borderRadius: 5,
+                                        alignItems: 'center',
+                                        height: normalize(30),
+                                        elevation: 0,
+                                        justifyContent: 'flex-start'
+                                    }}
+                                    disabled={true}
+                                    icon={{
+                                        'icongroup': 5,
+                                        'name': 'calendar-alt',
+                                        'size': normalize(15)
+                                    }}
+                                    iconstyle={{
+                                        color: item.color,
+                                        paddingHorizontal: normalize(5),
+                                        textAlign: 'center'
+                                    }}
+                                    textstyle={{
+                                        fontSize: normalize(12),
+                                        color: "black",
+                                        fontWeight: 'bold'
+                                    }}
+                                    table={false}
+                                    data={{ itemwidth: Dimensions.get('screen').width * 0.27, displaytext: 'Consultation Date' }}
+                                    passingDate={null}
+                                    onChangeData={val =>
+                                        val == undefined
+                                            ? null
+                                            : (console.log(moment(val).format('YYYY-MM-DD')), console.log(moment().format('LT')))}
+                                    refreshCount={val =>
+                                        val == undefined
+                                            ? null
+                                            : setRefresh(refresh + val)
+                                    }
+                                />
+                            </View>
+                            <View style={{ width: Dimensions.get('screen').width * 0.27, justifyContent: 'center', alignItems: 'center', borderWidth: 0, marginTop: normalize(5) }}>
+                                <STimePicker
+                                    disabled={true}
+                                    pickerstyle={{
+                                        borderWidth: 1,
+                                        borderColor: 'lightgrey',
+                                        borderRadius: 5,
+                                        alignItems: 'center',
+                                        justifyContent: 'flex-start',
+                                        height: normalize(30),
+                                        flexDirection: 'row',
+                                        // elevation: 3,
+                                        backgroundColor: 'white',
+                                        width: Dimensions.get('screen').width * 0.27
+                                    }}
+                                    icon={{
+                                        'icongroup': 3,
+                                        'name': 'clock',
+                                        'size': normalize(15)
+                                    }}
+                                    iconstyle={{
+                                        color: item.color,
+                                        paddingHorizontal: normalize(5),
+                                        textAlign: 'center'
+                                    }}
+                                    textstyle={{
+                                        fontSize: normalize(12),
+                                        fontWeight: 'bold',
+                                        color: '#000000',
+                                        alignItems: 'center',
+                                        textAlign: 'center',
+                                        justifyContent: 'center',
+                                    }}
+                                    bgcolor={'#fff'}
+                                    placeholder={"Consultation Time"}
+                                    height={normalize(23)}
+                                    width={normalize(76)}
+                                    value={item.reportingto}
+                                    callBack={val => (val == undefined ? null : getSingleCT(item, val))}
+                                />
+                            </View>
+                        </View>
+                    </TouchableOpacity>
+
+                </View> */}
+
+
+                {/* <TextInput
+                    style={{
+                        borderWidth: 1,
+                        backgroundColor: 'white',
+                        borderColor: 'lightgrey',
+                        elevation: 3,
+                        borderRadius: 5,
+                        fontWeight: 'bold',
+                        color: 'black',
+                        width: Dimensions.get('screen').width * 0.4,
+                        paddingTop: 5,
+                        paddingBottom: 5,
+                        height: Dimensions.get('screen').height * 0.035,
+                        textAlign: 'center',
+                        marginTop: normalize(5),
+                        marginHorizontal: normalize(2)
+                    }}
+                    keyboardType={'default'}
+                    placeholder='Remarks'
+                    onChangeText={val => { item.remarks = val, item.EditFlag = 2 }}>
+                    {item.remarks}
+                </TextInput> */}
+            </View>
+        );
+    }
+
+    function getDateData(params) {
+
+        setEdit(false);
+        props.editFlag(false);
+        data.forEach((item) => {
+            item.selected = false;
+        });
+        params.selected = true;
+        params.daywisedata = [];
+        // getApiPatientData(params)
+
+        setRefresh(refresh + 1);
+        setFooterData(params);
+        let samplepostponedate = params.date + 'T09:00:00.000Z';
+        let convertedpostponedate = moment(samplepostponedate).add(1, 'days');
+        let samplepostponedateformat = moment(convertedpostponedate).format('YYYY-MM-DD');
+        console.log('samplepostponedateformat', params.date, samplepostponedateformat);
+        setPostponeDate(samplepostponedateformat);
+        // setPostponeDate(params.date)
+    }
+
+    function getEditFlag() {
+        props.editFlag(true);
+        setEdit(true);
+        setRefresh(refresh + 1);
+    }
+
+    function renderItem({ item }) {
+
+        return (
+            <TouchableOpacity style={{
+                width: dividedWidth,
+                alignItems: 'center',
+                paddingTop: 5,
+                borderWidth: 0.5,
+                backgroundColor: item.selected ? '#acbeff' : isBNUL(item.data) ? '#f4fcf7' : '#fff',
+            }}
+                disabled={false}
+                onPress={() => item.data != undefined && item.data.length > 0 ? getDateData(item) : notifyMessage('No data found', 3)}
+            >
+                <View style={{
+                    alignItems: 'center', justifyContent: 'center',
+                }}>
+                    <Text style={{
+                        color: item.data != undefined && item.data.length > 0 ? 'green' : '#b6b5b7', fontSize: normalize(20), fontWeight: 'bold', textShadowColor: '#b6b5b7',
+                        textShadowOffset: { width: -1, height: 1 },
+                        textShadowRadius: 3,
+                    }}>{item.displaytext == 0 ? '' : item.displaytext}</Text>
+                </View>
+
+                <View style={{
+                    flexDirection: 'row',
+                    width: '100%',
+                    flex: 1,
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    flexWrap: 'wrap',
+                    paddingHorizontal: 1,
+                    paddingTop: normalize(2),
+                    paddingBottom: normalize(5),
+                }}>
+                    {item.data != undefined ? item.data.map((subArray, h) => {
+                        return (
+                            <View
+                                key={h}
+                                style={{
+                                    width: normalize(22),
+                                    borderRadius: 5,
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    marginBottom: 1,
+                                    marginTop: normalize(5),
+                                    backgroundColor: '#fff',
+                                    borderWidth: 0.7,
+                                    borderColor: subArray.color,
+                                }}
+                            >
+                                <Text adjustsFontSizeToFit style={{ fontSize: normalize(12), color: subArray.color }}>{subArray.value}</Text>
+                            </View>
+                        );
+                    }) : null}
+                </View>
+
+            </TouchableOpacity>
+        );
+    }
+
+    function getConsultation(consultant, year, month) {
+
+        setConsultant(consultant);
+        var monthReal = month + 1;
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhococonsultationtokendate ' + consultant + ',' + year + ',' + monthReal;
+        console.log('getConsultation', JSON.stringify(buttonapi));
+        // let buttonapi = "http://111.92.109.30:8090/emr/emrcommonget/rnhococonsultationhistoryemr 7,2023,10"
+        setIsLoading(true);
+        setData();
+        setFooterData();
+        setPostponeDate();
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200 && response.data != null && response.data != undefined) {
+                    setIsLoading(false);
+                    setData(response.data.monthdata);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Booking not available,Please try again later', 2);
+                }
+            });
+
+        // getLoading(v => setIsLoading(false))
+    }
+
+    function getApiPatientData2(footerdata, pdate, bookingtype) {
+
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhopaptientbookingpostponedetails ' + consultant + ',' + JSON.stringify(footerdata.date) + ',' + '"' + pdate + '"' + ',' + bookingtype + ',' + '0';
+        console.log('getApiPatientData2', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    footerdata.daywisedata = response.data;
+                    flatlistRef.current.scrollToEnd({ animating: true });
+                    setIsLoading(false);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Day wise data not available.', 4);
+                }
+            });
+        getLoading(v => setIsLoading(false));
+
+    }
+
+    function getTokenList(footerdata, pdate, item) {
+
+        console.log('getTokenList itemmmmm', item);
+        item.postponetoken = null;
+        item.postponeconsultationtime = null;
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhopaptientbookingpostponedetails ' + consultant + ',' + JSON.stringify(footerdata.date) + ',' + '"' + pdate + '"' + ',' + item.bookingtypes + ',' + '1';
+        console.log('getTokenList', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    if (isNU(response.data) && isBNUL(response.data.tokenArr)) {
+                        item.postponetoken = response.data.tokenArr[0].tokenno;
+                        item.postponeconsultationtime = response.data.tokenArr[0].postponeconsultationtime;
+                        console.log('getTokenList', JSON.stringify(response.data.tokenArr[0]));
+                    }
+
+                    setIsLoading(false);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Day wise data not available.', 4);
+                }
+            });
+        getLoading(v => setIsLoading(false));
+
+    }
+
+    function getTokenList2(footerdata, pdate, item) {
+
+        console.log('getTokenList2 itemmmmm', item);
+
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhopaptientbookingpostponedetails ' + consultant + ',' + JSON.stringify(footerdata.date) + ',' + '"' + pdate + '"' + ',' + item.bookingtypes + ',' + '1';
+        console.log('getTokenList2', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    if (isNU(response.data) && isBNUL(response.data.tokenArr)) {
+
+                        console.log('getTokenList2', JSON.stringify(response.data.tokenArr[0]));
+                        console.log('ggggggg');
+                    }
+
+                    // setIsLoading(false);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Day wise data not available.', 4);
+                }
+            });
+        // getLoading(v => setIsLoading(false))
+
+    }
+
+    // function getApiPatientData(data) {
+    //     setIsLoading(true)
+    //     let buttonapi = APIURL + 'emr/emrcommonget/rnhopaptientconsultationtokens ' + consultant + "," + JSON.stringify(data.date)
+    //     console.log("Butttonnnnnnnn apiiiiiiiiiiiiiiiiii CBooking", buttonapi)
+    //     NetworkServiceCall("get", buttonapi, "")
+    //         .then(function (response) {
+    //             // response = {
+    //             //     "success": true,
+    //             //     "httpstatus": 200,
+    //             //     "message": "SUCCESS",
+    //             //     "data": {
+    //             //         "title": "token allocations",
+    //             //         "tokensArray": [
+    //             //             {
+    //             //                 "keyid": 1,
+    //             //                 "tokentype": "Morning",
+    //             //                 "disabletokens": false,
+    //             //                 "iconname": "sun",
+    //             //                 "reportingtime": "10:35 AM",
+    //             //                 "reportingto": "01:00 PM",
+    //             //                 "tokenArr": [
+    //             //                     {
+    //             //                         "tokenno": 1,
+    //             //                         "bookingtypes": "P",
+    //             //                         "mrngorevng": 1,
+    //             //                         "disabledtoken": false,
+    //             //                         "bookedstatus": true,
+    //             //                         "bookingdate": "2023-10-10",
+    //             //                         "reportingto": "10:35 AM",
+    //             //                         "reportingtime": "10:30 AM",
+    //             //                         "duration": 0,
+    //             //                         "bookingtypename": "PHONE",
+    //             //                         "patientname": "Albert Paul",
+    //             //                         "mobilenumber": "7338483582",
+    //             //                         "totalamount": 30,
+    //             //                         "canceltokenno": 0,
+    //             //                         "paidstatus": true,
+    //             //                         "hopapatient": 0,
+    //             //                         "patientid": 0,
+    //             //                         "remarks": ""
+    //             //                     },
+    //             //                     {
+    //             //                         "tokenno": 2,
+    //             //                         "bookingtypes": "P",
+    //             //                         "mrngorevng": 1,
+    //             //                         "disabledtoken": false,
+    //             //                         "bookedstatus": false,
+    //             //                         "bookingdate": "2023-10-10",
+    //             //                         "reportingto": "10:35 AM",
+    //             //                         "reportingtime": "10:30 AM",
+    //             //                         "duration": 0,
+    //             //                         "bookingtypename": "PHONE",
+    //             //                         "patientname": "",
+    //             //                         "mobilenumber": "",
+    //             //                         "totalamount": 30,
+    //             //                         "canceltokenno": 0,
+    //             //                         "paidstatus": true,
+    //             //                         "hopapatient": 0,
+    //             //                         "patientid": 0,
+    //             //                         "remarks": ""
+    //             //                     },
+    //             //                     {
+    //             //                         "tokenno": 3,
+    //             //                         "bookingtypes": "P",
+    //             //                         "mrngorevng": 1,
+    //             //                         "disabledtoken": false,
+    //             //                         "bookedstatus": true,
+    //             //                         "bookingdate": "2023-10-10",
+    //             //                         "reportingto": "10:35 AM",
+    //             //                         "reportingtime": "10:30 AM",
+    //             //                         "duration": 0,
+    //             //                         "bookingtypename": "PHONE",
+    //             //                         "patientname": "Mathew",
+    //             //                         "mobilenumber": "",
+    //             //                         "totalamount": 30,
+    //             //                         "canceltokenno": 0,
+    //             //                         "paidstatus": true,
+    //             //                         "hopapatient": 0,
+    //             //                         "patientid": 0,
+    //             //                         "remarks": ""
+    //             //                     },
+    //             //                     {
+    //             //                         "tokenno": 4,
+    //             //                         "bookingtypes": "P",
+    //             //                         "mrngorevng": 1,
+    //             //                         "disabledtoken": false,
+    //             //                         "bookedstatus": false,
+    //             //                         "bookingdate": "2023-10-10",
+    //             //                         "reportingto": "10:35 AM",
+    //             //                         "reportingtime": "10:30 AM",
+    //             //                         "duration": 0,
+    //             //                         "bookingtypename": "PHONE",
+    //             //                         "patientname": "",
+    //             //                         "mobilenumber": "",
+    //             //                         "totalamount": 30,
+    //             //                         "canceltokenno": 0,
+    //             //                         "paidstatus": true,
+    //             //                         "hopapatient": 0,
+    //             //                         "patientid": 0,
+    //             //                         "remarks": ""
+    //             //                     },
+    //             //                     {
+    //             //                         "tokenno": 6,
+    //             //                         "bookingtypes": "P",
+    //             //                         "mrngorevng": 1,
+    //             //                         "disabledtoken": false,
+    //             //                         "bookedstatus": false,
+    //             //                         "bookingdate": "2023-10-10",
+    //             //                         "reportingto": "10:35 AM",
+    //             //                         "reportingtime": "10:30 AM",
+    //             //                         "duration": 0,
+    //             //                         "bookingtypename": "PHONE",
+    //             //                         "patientname": "",
+    //             //                         "mobilenumber": "",
+    //             //                         "totalamount": 30,
+    //             //                         "canceltokenno": 0,
+    //             //                         "paidstatus": true,
+    //             //                         "hopapatient": 0,
+    //             //                         "patientid": 0,
+    //             //                         "remarks": ""
+    //             //                     }
+    //             //                 ]
+    //             //             },
+    //             //             {
+    //             //                 "keyid": 1,
+    //             //                 "tokentype": "Evening",
+    //             //                 "disabletokens": false,
+    //             //                 "iconname": "moon",
+    //             //                 "reportingtime": "02:30 PM",
+    //             //                 "reportingto": "06:30 PM",
+    //             //                 "tokenArr": [
+    //             //                     {
+    //             //                         "tokenno": 1,
+    //             //                         "bookingtypes": "P",
+    //             //                         "mrngorevng": 0,
+    //             //                         "disabledtoken": true,
+    //             //                         "bookedstatus": false,
+    //             //                         "bookingdate": "2023-10-10",
+    //             //                         "reportingtime": "02:30 PM",
+    //             //                         "reportingto": "06:30 PM",
+    //             //                         "duration": 0,
+    //             //                         "bookingtypename": "PHONE",
+    //             //                         "patientname": "",
+    //             //                         "mobilenumber": "",
+    //             //                         "totalamount": 30,
+    //             //                         "canceltokenno": 0,
+    //             //                         "paidstatus": true,
+    //             //                         "hopapatient": 0,
+    //             //                         "patientid": 0,
+    //             //                         "remarks": ""
+    //             //                     }
+    //             //                 ]
+    //             //             }
+    //             //         ]
+    //             //     }
+    //             // }
+    //             if (response.httpstatus == 200) {
+    //                 data.daywisedata = response.data
+    //                 flatlistRef.current.scrollToEnd({ animating: true });
+    //                 setIsLoading(false)
+    //             }
+    //             else {
+    //                 setIsLoading(false)
+    //                 notifyMessage("Day wise data not available.", 4)
+    //             }
+    //         })
+    //     getLoading(v => setIsLoading(false))
+
+    // }
+
+    function IncrementMonth() {
+
+        setFooterData(null);
+        setPostponeDate();
+        if (monthinno != 11) {
+            // if (monthinno != d.getMonth()) {
+            if (monthinno < 11) {
+                setMonthInNo(monthinno + 1);
+            } else {
+                setYear(year + 1);
+                setMonthInNo(0);
+            }
+            getConsultation(consultant, year, monthinno + 1);
+            // }
+        } else {
+            setMonthInNo(0);
+            setYear(year + 1);
+            getConsultation(consultant, year + 1, 0);
+        }
+    }
+
+    function DecrementMonth() {
+
+        if (monthinno != 0) {
+            if ((monthinno - 1 >= d.getMonth())) {
+                setFooterData(null);
+                setPostponeDate();
+                if (monthinno > 0) {
+                    setMonthInNo(monthinno - 1);
+                } else {
+                    setYear(year - 1);
+                    setMonthInNo(11);
+                }
+                getConsultation(consultant, year, monthinno - 1);
+            }
+        } else {
+            setYear(year - 1);
+            setMonthInNo(11);
+            getConsultation(consultant, year - 1, 11);
+        }
+    }
+
+    return (
+        <View style={{ flex: 1, marginTop: normalize(-2) }}>
+            {/* <HHeading
+                styles={{
+                    "iconname": 'user-md',
+                    "bgcolor": "#f2efef",
+                    "iconsize": 16,
+                    "iconcolor": Global.AppTheme.primary_color,
+                    "displaytext": "BOOKING POSTPONE",
+                    "textsize": 14,
+                    "textcolor": Global.AppTheme.primary_color
+                }}
+                callBack={val => (val == undefined ? null : console.log(val))}>
+            </HHeading> */}
+
+            <View
+                // onPress={() => { }}
+                style={{
+                    backgroundColor: '#f2efef',
+                    paddingVertical: 3,
+                    paddingHorizontal: 6,
+                    marginTop: 3,
+                    marginBottom: 2,
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderTopLeftRadius: 20,
+                    borderTopRightRadius: 20,
+
+                }}>
+                <TouchableOpacity onPress={() => { }}
+                    disabled={true}
+                    style={{
+                        width: normalize(20),
+                        alignItems: 'center',
+                        marginRight: 5,
+                    }}>
+                    <FontAwesome5 name={'user-md'} color={Global.AppTheme.primary_color}
+                        size={normalize(16)}
+                    />
+                </TouchableOpacity>
+                <CText
+                    style={{
+                        textShadowRadius: 2,
+                        fontSize: normalize(14),
+                        fontWeight: 'bold',
+                        color: Global.AppTheme.primary_color,
+                        flex: 1,
+                    }}>
+                    {'BOOKING POSTPONE'}
+                </CText>
+                <TouchableOpacity
+                    onPress={() => {
+                        navigation.navigate('CPostpone');
+                    }}
+                    style={{
+                        borderWidth: 0,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}>
+                    <HOCIcons.MaterialCommunityIcons
+                        name={'grid'}
+                        color={Global.AppTheme.primary_color}
+                        size={normalize(25)}
+                    />
+                    <Text style={{
+                        color: Global.AppTheme.primary_color,
+                        fontSize: normalize(7),
+                        fontWeight: 'bold',
+                        textAlign: 'center',
+                    }}>
+                        {'Postpone Summary'}
+                    </Text>
+                </TouchableOpacity>
+            </View>
+
+            {isLoading ?
+                <Loader displaytext={true} /> : null}
+
+
+            {Global.userData.hosuconsultant == 0 ?
+                <View style={{ paddingHorizontal: normalize(8), marginBottom: normalize(2) }}>
+                    <Text style={{ fontSize: normalize(8), paddingHorizontal: 5 }}>Consultant :</Text>
+                    <SDropDownNew
+                        dropdownapi={'emr/emrcommonget/exec rndddwdropdownselect 1'}
+                        dropdowndata={ValueCheck(Global.userData.hosuconsultant) &&
+                            Global.userData.hosuconsultant > 0 ? Global.userData.username : ''}
+                        onChangeData={val =>
+                            val == undefined ? null : getConsultation(val.datavalue, year, monthinno)}
+                        editable={true}
+                        widthArr={Dimensions.get('screen').width * 0.96}
+                        iconName={'user-md'}
+                        refreshCount={val =>
+                            val == undefined ? null : console.log('Refresh')
+                        }
+                    />
+                </View> : null}
+
+            <View style={{ backgroundColor: 'transparent' }}>
+                <View style={{ flexDirection: 'row', alignSelf: 'center', alignItems: 'center', justifyContent: 'space-between', width: '50%' }}>
+                    <FontAwesome5 name="arrow-left" color="black" size={normalize(15)}
+                        onPress={() => DecrementMonth()}
+                    />
+                    <Text style={{ fontSize: normalize(14), color: 'black', paddingHorizontal: 10 }}>{monthName} {year}</Text>
+                    <FontAwesome5 name="arrow-right" color="black" size={normalize(15)} onPress={() => IncrementMonth()} />
+                </View>
+            </View>
+            <View style={{ flexDirection: 'row', height: normalize(20), alignItems: 'center', justifyContent: 'center' }}>
+                {['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'].map((week, i) => {
+                    return (
+                        <View key={i} style={{ width: dividedWidth, alignItems: 'center', borderWidth: 0.5 }}>
+                            <Text style={{ fontSize: normalize(12), fontWeight: 'bold', color: i == 0 ? 'red' : 'black' }}>{week}</Text>
+                        </View>);
+                })}
+            </View>
+            <FlatList
+                ref={flatlistRef}
+                data={data}
+                style={{ width: '100%' }}
+                renderItem={(k) => renderItem(k)}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={pulltorefresh}
+                        size={'large'}
+                        tintColor={'blue'}
+                        colors={['red', 'green', 'cyan', 'black']}
+                        progressBackgroundColor={'white'}
+                        onRefresh={() => getConsultation(consultant, year, monthinno)} />}
+                keyExtractor={(item) => item.displaytext}
+                numColumns={7}
+                ListFooterComponent={() => footerComponent()}
+                ListFooterComponentStyle={{ width: width }}
+            />
+            <View style={{
+                // position: 'absolute',
+                flexDirection: 'row',
+                borderTopColor: '#c9c7c7',
+                borderTopWidth: 2,
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingHorizontal: 10,
+                bottom: 0,
+                paddingVertical: 5,
+                width: '100%',
+                backgroundColor: '#fff',
+            }}>
+                {[
+                    {
+                        'icongroup':4,
+                        'displaytext': 'Save',
+                        'size': 10,
+                        'iconname': 'save',
+                        'iconcolor': Global.AppTheme.primary_color,
+                        'fontcolor': Global.AppTheme.primary_color,
+                        'shadowcolor': '#fff',
+                        'selected': false,
+                        'visibility': edit ? true : false,
+                        'iconsize': 20,
+                        'functionid': 'CB01',
+                        'iconsize': 20,
+                        'functionid': 'CB01',
+                        'componentname': 'SetUpVitalSign',
+                    },
+                    {
+                        'icongroup':4,
+                        'displaytext': 'Monthly',
+                        'iconname': 'calendar-check-o',
+                        'stage': 1,
+                        'visibility': true,
+                        'functionid': 'CB04',
+                    },
+                    {
+                        'icongroup':4,
+                        'iconname': 'stack-overflow',
+                        'displaytext': 'Tokens',
+                        'stage': 2,
+                        'visibility': true,
+                        'functionid': 'CB03',
+                    },
+                    {
+                        'icongroup':4,
+                        'iconname': 'user-md',
+                        'displaytext': 'Booking',
+                        'stage': 2,
+                        'visibility': true,
+                        'selected': true,
+                        'functionid': 'CB05',
+                    },
+                    {
+                        'icongroup':4,
+                        'iconname': 'exchange',
+                        'displaytext': 'Postpone',
+                        'stage': 5,
+                        'visibility': true,
+                        'selected': true,
+                        'functionid': 'CB06',
+                    },
+                    // {
+                    //     "icongroup":4,
+                    //     "displaytext": "Report", "size": 10, "iconname": "file-pdf-o", "iconcolor": Global.AppTheme.primary_color,
+                    //     "fontcolor": Global.AppTheme.primary_color, "shadowcolor": '#fff', "selected": false, "visibility": true, "iconsize": 20, "functionid": "CB02",
+                    // }
+                ].map((item, i) => {
+                        return (
+                            item.visibility ?
+
+
+                                // <TouchableOpacity key={i} style={{ alignItems: 'center' }}
+                                //     onPress={() => getFooterIconsFunctions(item)}>
+                                //     <Icons.FontAwesome
+                                //         name={item.iconname}
+                                //         color={item.displaytext == "Booking Postpone" ? "#db04ac" : item.displaytext == "Save" ? "red" : "black"}
+                                //         size={normalize(20)}
+                                //     />
+                                //     <Text style={{ color: item.displaytext == "Booking Postpone" ? "#db04ac" : item.displaytext == "Save" ? "red" : "black", fontSize: normalize(10) }}>{item.displaytext}</Text>
+                                // </TouchableOpacity>
+
+                                <View>
+                                    <CAwesomeButton
+                                        key={i}
+                                        data={{
+                                            ...item,
+                                            'width':normalize(45),
+                                            'shadowcolor': '#fff',
+                                            'iconcolor': item.displaytext == 'Postpone' ? '#db04ac' : item.displaytext == 'Save' ? 'red' : Global.AppTheme.primary_color,
+                                            'fontcolor': item.displaytext == 'Postpone' ? '#db04ac' : item.displaytext == 'Save' ? 'red' : Global.AppTheme.primary_color,
+                                        }}
+                                        callBack={val => val == undefined ? null : getFooterIconsFunctions(item)}
+                                    />
+                                </View>
+
+
+                                : null
+                        );
+                    })}
+            </View>
+        </View>
+    );
+
+};
+export default CBookingPostpone;