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

package/src/Custom/CReport.js

@@ -0,0 +1,569 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Text, View, FlatList, TouchableOpacity, Dimensions, ActivityIndicator, ScrollView, Switch, TextInput, TouchableHighlight, Platform } 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, isPermitted, 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 STextInput from '../StaticComponents/STextInput';
+import AwesomeButton from 'react-native-really-awesome-button';
+import SDropDownNew from '../Components/SDropDownNew';
+
+import RNFetchBlob from 'rn-fetch-blob';
+import RNHTMLtoPDF from 'react-native-html-to-pdf';
+import RNPrint from 'react-native-print';
+import HReportFormat from '../Html/HReportFormat';
+import HReportHeader from '../Html/HReportHeader';
+import HReportFooter from '../Html/HReportFooter';
+import CFromToDate from '../CustomComponents/CFromToDate';
+import CAwesomeButton from '../CustomComponents/CAwesomeButton';
+// import { PDFDocument, PDFPage } from 'react-native-pdf-lib';
+
+
+const CReport = (props) => {
+    const { width, height } = Dimensions.get('screen');
+    const [data, setData] = useState();
+    const [stage, setStage] = useState(1);
+    const [refresh, setRefresh] = useState(0);
+    const [tokenType, setTokenType] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [date, setDate] = useState({
+        'fromdate': moment().format('YYYY-MM-DD'),
+        'todate': moment().format('YYYY-MM-DD'),
+    });
+    const [consultant, setConsultant] = useState();
+
+    var Report = {
+        'title': 'Token Report',
+        'fromdate': '',
+        'todate': '',
+        'tokentype': '',
+        'tokentypename': '',
+        'hosuconsultant': 0,
+        'consultantname': 'DR.MATHEW K C',
+        'dateWiseArr': [
+            {
+                'date': '14 November 2023',
+                'tokensArr': [
+                    {
+                        'code': 1,
+                        'tokenno': 6,
+                        'morningoreveng': 'Morning',
+                        'consultationtime': '11:30 AM',
+                        'reportingtime': '11:00AM',
+                        'bookingtypename': 'PHONE',
+                        'totalamount': 0,
+                        'paymenttype': 'Pay Later',
+                        'bookedby': 'Harold Louis',
+                        'mobilenumber': '7338483582',
+                        'remarks': 'Remarks',
+                        'color': '#4f4d4d',
+                    },
+                    {
+                        'code': 2,
+                        'tokenno': 7,
+                        'morningoreveng': 'Morning',
+                        'consultationtime': '11:30 AM',
+                        'reportingtime': '11:00AM',
+                        'bookingtypename': 'PHONE',
+                        'totalamount': 0,
+                        'paymenttype': 'Pay Later',
+                        'bookedby': '',
+                        'mobilenumber': '',
+                        'remarks': 'Remarks',
+                        'color': '#4f4d4d',
+                    },
+                ],
+            },
+            {
+                'date': '15 November 2023',
+                'tokensArr': [
+                    {
+                        'code': 1,
+                        'tokenno': 6,
+                        'morningoreveng': 'Morning',
+                        'consultationtime': '11:30 AM',
+                        'reportingtime': '11:00AM',
+                        'bookingtypename': 'PHONE',
+                        'totalamount': 0,
+                        'paymenttype': 'Pay Later',
+                        'bookedby': 'Harold Louis',
+                        'mobilenumber': '7338483582',
+                        'remarks': 'Remarks',
+                        'color': '#4f4d4d',
+                    },
+                    {
+                        'code': 2,
+                        'tokenno': 7,
+                        'morningoreveng': 'Morning',
+                        'consultationtime': '11:30 AM',
+                        'reportingtime': '11:00AM',
+                        'bookingtypename': 'PHONE',
+                        'totalamount': 0,
+                        'paymenttype': 'Pay Later',
+                        'bookedby': '',
+                        'mobilenumber': '',
+                        'remarks': 'Remarks',
+                        'color': '#4f4d4d',
+                    },
+                    {
+                        'code': 1,
+                        'tokenno': 6,
+                        'morningoreveng': 'Morning',
+                        'consultationtime': '11:30 AM',
+                        'reportingtime': '11:00AM',
+                        'bookingtypename': 'PHONE',
+                        'totalamount': 0,
+                        'paymenttype': 'Pay Later',
+                        'bookedby': 'Harold Louis',
+                        'mobilenumber': '7338483582',
+                        'remarks': 'Remarks',
+                        'color': '#4f4d4d',
+                    },
+                    {
+                        'code': 2,
+                        'tokenno': 7,
+                        'morningoreveng': 'Morning',
+                        'consultationtime': '11:30 AM',
+                        'reportingtime': '11:00AM',
+                        'bookingtypename': 'PHONE',
+                        'totalamount': 0,
+                        'paymenttype': 'Pay Later',
+                        'bookedby': '',
+                        'mobilenumber': '',
+                        'remarks': 'Remarks',
+                        'color': '#4f4d4d',
+                    },
+                ],
+            },
+        ],
+    };
+
+    function getReportAPI(fromtodate, tokentype) {
+        var consultantCode = ValueCheck(consultant) ? consultant.datavalue : Global.userData.hosuconsultant;
+        var tokentypevar = ValueCheck(tokentype) ? tokentype : tokenType;
+        setDate(fromtodate);
+        var from = moment(fromtodate.fromdate).format('YYYY-MM-DD');
+        var to = moment(fromtodate.todate).format('YYYY-MM-DD');
+        // let buttonapi = APIURL + 'emr/emrcommonget/rnhococonsultationtokenorderweekday ' + 7
+        var buttonapi = APIURL + 'emr/emrcommonget/rnhosuconsultantbookingreport ' + consultantCode + ',' + "'" + from + "'" + ',' + "'" + to + "'" + ',' + "'" + tokentypevar + "'"
+            + ',' + stage;
+        console.log('Button api.....................CReport.....................', JSON.stringify(buttonapi));
+        setIsLoading(true);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200 && response.data != null
+                    && response.data != undefined) {
+                    setData(response.data);
+                    getReport(response.data);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Data not available,Please try again later', 4);
+                }
+            });
+
+        getLoading(v => setIsLoading(false));
+    }
+
+    function contentdata(data) {
+        return (`
+    <style type="text/css">
+       .studentInfo {
+           width: 100%;
+           border-collapse: collapse;
+           border: 0px solid grey;
+
+       }
+ 
+           .studentInfo td {
+
+               border: 0.5px solid lightgrey;
+           }
+        
+        .headerTable td {
+            background: aliceblue;font-size:8px;
+            border: 0.5px solid lightgrey;
+        }
+        .DetailData td {
+          font-size:14px;text-align: center;
+          border: 0.5px solid lightgrey;
+        }
+       .header {
+           text-align: left;
+           font-wight:'bold';
+           font-size:14px;
+       }
+       #rcorners1{
+        text-align:center;
+        align-items:center;
+        justify-content: center;
+        border-radius: 1500px;
+        background: red;
+        padding: 2px; 
+        width: 25px; 
+       }
+       
+   </style>
+
+        <div>
+            ${`<div style="border: 1px solid #000000; margin-top: 0px;padding:0px;">
+                    <span style="
+                        display: inline;
+                        background: #fff;
+                        margin-left:0px;
+                        padding: 0px 2px;
+                        position: relative;
+                        top: -0.6em;
+                        font-size:10px;
+                        font-weight:normal;"
+                    >
+                        Consultant Details
+                    </span>
+
+                    <div style="display:flex;flex-direction:column;margin:5px;margin-top:0px;">
+                        
+                    <div style="display:flex;flex-direction:row;">
+                        <div style="display:flex;flex-direction:row;align-items:flex-end;width:50%;">
+                            <div style="width:30%;font-size:8px;">
+                                Consultant :
+                            </div>
+                            <div style="width:50%;font-weight:bold;font-size:10px;">
+                                :&nbsp;${ValueCheck(consultant) ? consultant.displayvalue : Global.userData.username}
+                            </div>
+                        </div>
+                        <div style="display:flex;flex-direction:row;align-items:flex-end;width:50%;">
+                            <div style="width:30%;font-size:8px;">
+                                Token Type :
+                            </div>
+                            <div style="width:50%;font-weight:bold;font-size:10px;">
+                                :&nbsp;${ValueCheck(data) ? data.tokentypename : ''}
+                            </div>
+                        </div>
+                    </div>
+            ${stage != 1 ?
+                `<div style="display:flex;flex-direction:row;">
+                    <div style="display:flex;flex-direction:row;align-items:flex-end;width:60%;">
+                        <div style="width:30%;font-size:8px;">
+                            From Date :
+                        </div>
+                        <div style="width:50%;font-weight:bold;font-size:10px;">
+                            :&nbsp;${ValueCheck(data) ? data.fromdate : ''}
+                        </div>
+                    </div>
+                    <div style="display:flex;flex-direction:row;align-items:flex-end;width:60%;">
+                        <div style="width:30%;font-size:8px;">
+                            To Date :
+                        </div>
+                        <div style="width:50%;font-weight:bold;font-size:10px;">
+                            :&nbsp;${ValueCheck(data) ? data.todate : ''}
+                        </div>
+                    </div>
+                </div>` : ''}
+
+                    </div>
+                </div>
+                </div>
+              `}
+
+        <div>
+            <div style="font-size:10px;text-align: center;padding-top:5px">
+                Tokens Chart
+        </div>
+
+    ${ValueCheck(data) && ArrayCheck(data.dateWiseArr) ? data.dateWiseArr.map((subArr, i) => {
+                    return (
+                        `<div style="margin-top:0px">
+            <table class="studentInfo">
+               <tbody>
+
+               ${ValueCheck(subArr.tokensArr) && ArrayCheck(subArr.tokensArr) ?
+                            `<tr>
+                     <td class="header" colspan="9"> ${subArr.date} </td>
+                  </tr>` : ''}
+
+                  ${i == 0 ?
+                            `<tr class="headerTable">
+                     <td>Token No</td>
+                     <td>Type</td>
+                     <td>Reporting Time</td>
+                     <td>Consultation Time</td>
+                     <td>Nature</td>
+                     <td>Disabled</td>
+                     <td>Mrng/Evng</td>
+                     ${stage != 1 ?
+                                `<td>Patient Name</td>
+                     <td>Mobile No</td>` : ''}
+                  </tr>` : ''}
+                  ${ValueCheck(subArr.tokensArr) && ArrayCheck(subArr.tokensArr) ? subArr.tokensArr.map((subArray) => {
+                                    return (
+                                        `<tr class="DetailData">
+                          <td style="width:5%;font-size:16px;font-weight:bold;color: ${ValueCheck(subArray.disabledtoken) ? 'red' : ValueCheck(subArray.bookedstatus) ? 'green' : 'black'};">${subArray.tokenno}</td>
+                          <td style="width:7%;">${subArray.bookingtypename}</td>
+                          <td style="width:8%;">${subArray.reportingtime}</td>
+                          <td style="width:8%;">${subArray.consultationtime}</td>
+                          <td style="width:8%;">${ValueCheck(subArray.onlinetoken) ? subArray.onlinetoken : ''}</td>
+                          <td style="width:8%;">${ValueCheck(subArray.disabledtoken) ? 'YES' : 'NO'}</td>
+                          <td style="width:8%;">${ValueCheck(subArray.morningoreveng) ? subArray.morningoreveng : ''}</td>
+                          ${stage != 1 ?
+                                            `<td style="width:8%;">${subArray.bookedby}</td>
+                          <td style="width:8%;">${subArray.mobilenumber}</td>` : ''}
+                       </tr>`
+                                    );
+                                }).join('') : ''}
+                  
+               </tbody>
+            </table>
+        </div>`
+                    );
+                }).join('') : ''}
+
+
+
+        </div>
+    </div>
+    `);
+    }
+
+    const getReport = async (data) => {
+        if (Platform.OS === 'web') {
+            window.electronAPI.savePDF(data);
+            return;
+        }
+        if (await isPermitted()) {
+            const htmlresult = await RNHTMLtoPDF.convert({
+                html: HReportFormat(contentdata(data), HReportHeader(), HReportFooter(), '110px', '80px'),
+                fileName: 'pdf',
+                base64: true,
+            });
+            setIsLoading(false);
+            RNPrint.print({ filePath: htmlresult.filePath });
+
+            // var x = []
+            // for (let i = 0; i < 30; i++) {
+            //     var y = PDFPage
+            //         .modify(0)
+            //         .drawText(`Page ${i + 1}`, {
+            //             x: 400,
+            //             color: '#F62727',
+            //         })
+            //     y.page.pageIndex = i
+            //     x.push(y)
+            // }
+            // var z = x.map((item) => { return JSON.stringify(item) }).toString(',')
+            // // console.log("..............................", z)
+            // PDFDocument
+            //     .modify(htmlresult.filePath)
+            //     .modifyPages({"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 1"}],"pageIndex":0}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 2"}],"pageIndex":1}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 3"}],"pageIndex":2}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 4"}],"pageIndex":3}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 5"}],"pageIndex":4}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 6"}],"pageIndex":5}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 7"}],"pageIndex":6}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 8"}],"pageIndex":7}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 9"}],"pageIndex":8}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 10"}],"pageIndex":9}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 11"}],"pageIndex":10}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 12"}],"pageIndex":11}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 13"}],"pageIndex":12}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 14"}],"pageIndex":13}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 15"}],"pageIndex":14}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 16"}],"pageIndex":15}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 17"}],"pageIndex":16}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 18"}],"pageIndex":17}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 19"}],"pageIndex":18}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 20"}],"pageIndex":19}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 21"}],"pageIndex":20}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 22"}],"pageIndex":21}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 23"}],"pageIndex":22}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 24"}],"pageIndex":23}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 25"}],"pageIndex":24}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 26"}],"pageIndex":25}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 27"}],"pageIndex":26}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 28"}],"pageIndex":27}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 29"}],"pageIndex":28}},{"page":{"actions":[{"x":400,"y":0,"color":"#F62727","fontSize":12,"fontName":"Times New Roman","type":"text","value":"Page 30"}],"pageIndex":29}})
+            //     .write()
+            //     .then(path => {
+            //         RNPrint.print({ filePath: path });
+            //     });
+        }
+    };
+
+    function getObj(params) {
+        params.map((item) => { return item; });
+    }
+
+    return (
+        <View style={{ flex: 1, marginTop: normalize(-2) }}>
+
+            <HHeading
+                styles={{
+                    'iconname': 'file-pdf',
+                    'bgcolor': '#f2efef',
+                    'iconsize': 16,
+                    'iconcolor': Global.AppTheme.primary_color,
+                    'displaytext': 'REPORTS',
+                    'textsize': 14,
+                    'textcolor': Global.AppTheme.primary_color,
+                }}
+                callBack={val => (val == undefined ? null : console.log(val))} />
+
+
+
+            {isLoading ?
+                <Loader displaytext={true} /> : null}
+
+            <View style={{ flex: 1 }}>
+                <View style={{ flexDirection: 'row', backgroundColor: '#fff', height: normalize(35), justifyContent: 'space-evenly', alignItems: 'center' }}>
+                    {[{
+                        stage: 1,
+                        iconname: 'stack-overflow',
+                        display: 'WEEKDAY',
+                    },
+                    {
+                        stage: 2,
+                        iconname: 'user-md',
+                        display: 'BOOKING',
+                    }].map((subItem, i) => {
+                        return (
+                            <TouchableOpacity key={i} style={{
+                                height: '100%', borderBottomWidth: stage == subItem.stage ? 4 : 0, borderBottomColor: Global.AppTheme.primary_color,
+                                backgroundColor: stage == subItem.stage ? '#eaedf9' : '#fff',
+                                alignItems: 'center', justifyContent: 'center', width: Dimensions.get('screen').width * 0.5, marginBottom: normalize(5),
+                            }}
+                                onPress={() => setStage(subItem.stage)}>
+                                <Icons.FontAwesome name={subItem.iconname} color={stage == subItem.stage ? Global.AppTheme.primary_color : 'black'} size={normalize(15)} />
+                                <View style={{ alignItems: 'center' }}>
+                                    <Text style={{ color: stage == subItem.stage ? Global.AppTheme.primary_color : 'black', fontSize: normalize(10) }}>{subItem.display}</Text>
+                                </View>
+                            </TouchableOpacity>
+                        );
+                    })}
+
+                </View>
+
+                {Global.userData.hosuconsultant == 0 ?
+                    <View style={{ paddingHorizontal: normalize(8), marginBottom: normalize(4) }}>
+                        <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 : setConsultant(val)}
+                            editable={true}
+                            widthArr={Dimensions.get('screen').width * 0.96}
+                            iconName={'user-md'}
+                            refreshCount={val =>
+                                val == undefined ? null : console.log('Refresh')
+                            }
+                        />
+                    </View> : null}
+
+                <View style={{ paddingHorizontal: normalize(8) }}>
+                    <Text style={{ fontSize: normalize(8), paddingHorizontal: 5 }}>Token Type :</Text>
+                    <SDropDownNew
+                        dropdownapi={'emr/emrcommonget/rnladropdowntokentype'}
+                        dropdowndata={'ALL'}
+                        onChangeData={val =>
+                            val == undefined ? null : setTokenType(val.datavalue)}
+                        editable={true}
+                        widthArr={Dimensions.get('screen').width * 0.96}
+                        iconName={'coins'}
+                        refreshCount={val =>
+                            val == undefined ? null : console.log()
+                        }
+                    />
+                </View>
+
+                {stage == 2 ?
+                    <CFromToDate
+                        callBack={val =>
+                            val == undefined
+                                ? null
+                                : setDate(val)
+                        } /> : null}
+            </View>
+
+            <View style={{
+                position: 'absolute', flexDirection: 'row', borderTopColor: '#c9c7c7', borderTopWidth: 2,
+                alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 0,
+                bottom: 0, paddingVertical: 5, width: '100%', backgroundColor: '#fff',
+            }}>
+                {[
+                    {
+                        'icongroup': 4,
+                        'displaytext': 'Print', 'size': 10, 'iconname': 'print', 'iconcolor': Global.AppTheme.primary_color, 'fontcolor': Global.AppTheme.primary_color,
+                        'shadowcolor': '#fff', 'selected': false, 'visibility': true, '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,
+                        'key': 3,
+                        'iconname': 'stack-overflow',
+                        'displaytext': 'Tokens',
+                        'visibility': true,
+                        'functionid': 'CB05',
+                    },
+                    {
+                        'icongroup': 4,
+                        'iconname': 'user-md',
+                        'displaytext': 'Booking',
+                        'stage': 1,
+                        'visibility': true,
+                        'functionid': 'CB03',
+                    },
+                    {
+                        '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', justifyContent: 'center' }}
+                            //     onPress={() => getFooterIconsFunctions(item)}>
+                            //     <Icons.FontAwesome name={item.iconname} color={item.displaytext == "Report" ? "#db04ac" : item.displaytext == "Save" ? "red" : "black"} size={normalize(20)} />
+                            //     <Text style={{ color: item.displaytext == "Report" ? "#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 == 'Report' ? '#db04ac' : item.displaytext == 'Save' ? 'red' : Global.AppTheme.primary_color,
+                                        'fontcolor': item.displaytext == 'Report' ? '#db04ac' : item.displaytext == 'Save' ? 'red' : Global.AppTheme.primary_color,
+                                    }}
+                                    callBack={val => val == undefined ? null : getFooterIconsFunctions(item)}
+                                />
+                            </View>
+
+                            : null
+                    );
+                })}
+            </View>
+        </View>
+    );
+
+    function getFooterIconsFunctions(val) {
+        switch (val.functionid) {
+            case 'CB01': ValueCheck(date) ? getReportAPI(date, tokenType) : notifyMessage('Data Not Found', 3);
+                break;
+            case 'CB02': props.callBack(4);
+                break;
+            case 'CB03': props.callBack(1);
+                break;
+            case 'CB04': props.callBack(0);
+                break;
+            case 'CB05': props.callBack(2);
+                break;
+            case 'CB06': props.callBack(5);
+                break;
+            default: console.log('Deault');
+                break;
+        }
+    }
+};
+export default CReport;

package/src/Custom/CScrollView.js

@@ -0,0 +1,73 @@
+import React, { useRef, useState } from 'react';
+import { Animated, Dimensions, View, ScrollView, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import { videoURL } from '../../../../../src/Common/apiConstants';
+const { width } = Dimensions.get('window');
+const itemWidth = (width / 3) * 2;
+const padding = (width - itemWidth) / 2;
+const offset = itemWidth;
+export default function CScrollView(props) {
+    const [data, setData] = useState(props.data);
+    const scrollX = useRef(new Animated.Value(0)).current;
+    return (
+        <ScrollView
+            horizontal
+            pagingEnabled
+            decelerationRate="fast"
+            contentContainerStyle={styles.scrollView}
+            showsHorizontalScrollIndicator={false}
+            snapToInterval={offset}
+            onScroll={Animated.event(
+                [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+                { useNativeDriver: false }
+            )}
+        >
+
+            {data.map((item, i) => (
+                <Item key={i} i={i} scrollX={scrollX} item={item} />
+            ))}
+
+        </ScrollView>
+    );
+}
+function Item({ i, scrollX, item }) {
+    const navigation = useNavigation();
+    const scale = scrollX.interpolate({
+        inputRange: [-offset + i * offset, i * offset, offset + i * offset],
+        outputRange: [0.75, 1, 0.75],
+    });
+    return (
+        <TouchableOpacity onPress={() => navigation.navigate('CVideoPlay',
+            { video: item.videolink })}>
+            <Animated.View style={[styles.item, { transform: [{ scale }] }]}>
+                <Image
+                    source={{ uri: item.thumbnail }}
+                    style={{
+                        flex: 1, borderRadius: 10,
+                    }}
+                    resizeMode={'cover'}
+                />
+                <View style={{ position: 'absolute', bottom: '40%', left: '37%' }}>
+                    <FontAwesome name={'play-circle-o'} size={normalize(60)} color={'#4f4e4e'} />
+                </View>
+                <View style={{ position: 'absolute', paddingHorizontal: 10, bottom: normalize(10), left: normalize(10), backgroundColor: 'black', borderRadius: 5 }}>
+                    <Text style={{ fontSize: normalize(10), fontWeight: 'bold', color: '#fff' }}>{item.displaytext}</Text>
+                </View>
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+const styles = StyleSheet.create({
+    scrollView: { paddingHorizontal: padding, alignItems: 'flex-start', paddingTop: normalize(40) },
+    item: {
+        height: itemWidth,
+        width: itemWidth,
+        backgroundColor: 'darkblue',
+        borderRadius: 10,
+        elevation: 5,
+    },
+});