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

package/src/Screens/Dashboard.js

@@ -0,0 +1,778 @@
+import React, { useState, useEffect, useRef, useLayoutEffect, useContext } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Dimensions,
+  FlatList,
+  BackHandler,
+  Image,
+  Platform
+} from 'react-native';
+import moment from 'moment';
+import ComponentStyles, { normalize, width } from '../CommonStyle/componentStyle';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import { APIURL, BASE_URL } from '../../../../../src/Common/apiConstants';
+import Loader from '../Custom/Loader';
+import { Global } from '../../../../../src/Common/Global';
+import HeaderBlock from './HeaderBlock';
+import CContainerView from '../CustomComponents/CContainerView';
+import CDetailView from '../CustomComponents/CDetailView';
+import CFooterView from '../CustomComponents/CFooterView';
+import {
+  CButtonShadow,
+  CShadowDynamic,
+  getLoading,
+  isBNUL,
+  isNU,
+  notifyMessage,
+} from '../CommonStyle/ComponentFunctions';
+import CCard from '../Custom/CCard';
+import SSearch from '../StaticComponents/SSearch';
+import CBackHandler from '../CustomComponents/CBackHandler';
+import HShadowButton from '../HOC/HShadowButton';
+import CProgressCircle from '../CustomComponents/CProgressCircle';
+import SDatePickerLabel from '../StaticComponents/SDatePickerLabel';
+import { useDataContext } from '../Handlers/ContextBio';
+import { useNavigation } from '../Navigation/useNavigation';
+import { useIsFocused } from '../Navigation/useIsFocused';
+
+export default function Dashboard({ route }) {
+  // State declarations
+  const routeData = route?.params;
+  const [searchWord, setSearchWord] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { dashData, setDashData } = useDataContext();
+  const [patientdata, setPatientData] = useState();
+  const [index, setIndex] = useState(0);
+  const [refresh, setRefresh] = useState(0);
+  const [SearchRefresh, setSearchRefresh] = useState(0);
+  const isFocused = useIsFocused();
+  const [backHandlerLogOut, setBackHandlerLogOut] = useState(false);
+  const [totalObj, setTotalObj] = useState();
+  const [filter, setFilter] = useState('Patient ID');
+
+  const today = moment().format('YYYY-MM-DD');
+  const [dateData, setDateData] = useState({
+    fromdate: today,
+    todate: today,
+    dateview: false,
+  });
+
+  const navigation = useNavigation();
+  const scrollRef = useRef();
+
+  // Footer menu configuration
+  const FooterArr = [
+    {
+      keyid: 2,
+      icongroup: 5,
+      displaytext: "SEARCH",
+      size: 10,
+      iconname: 'cogs', // perfect for "more"
+      iconcolor: "#F16767",
+      fontcolor: "#F16767",
+      shadowcolor: "#fce0e0",
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: "D02",
+      componenttype: "screen",
+      component: "MoreOptionsScreen",
+      procedurename: "rnjrintrpurequestdynamicdetailreport",
+      argumentname: "13",
+      optiondetailhelpurl: "hisfiles/help/video/loginhelp.mp4",
+    },
+    {
+      keyid: 1,
+      icongroup: 3,
+      displaytext: "MENU",
+      size: 10,
+      iconname: "dots-horizontal-circle", // perfect for "more"
+      iconcolor: "#F16767",
+      fontcolor: "#F16767",
+      shadowcolor: "#fce0e0",
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: "D01",
+      componenttype: "screen",
+      component: "MoreOptionsScreen",
+      procedurename: "rnjrintrpurequestdynamicdetailreport",
+      argumentname: "13",
+      optiondetailhelpurl: "hisfiles/help/video/loginhelp.mp4",
+      more: true,
+    },
+  ];
+
+  // Effects
+  useEffect(() => {
+    if (routeData?.patientData?.id) {
+      setSearchWord(routeData.patientData.id);
+    }
+  }, [routeData]);
+
+  useEffect(() => {
+    getAllMedicines();
+  }, []);
+
+  useLayoutEffect(() => {
+    FirstGetData();
+  }, []);
+
+  useEffect(() => {
+    if (isFocused) {
+      Global.PatientDetails = null;
+      Global.ChartDataLeft = null;
+      Global.ChartDataAll = null;
+    }
+  }, [isFocused]);
+
+  useEffect(() => {
+    const backAction = () => {
+      if (!navigation.isFocused()) {
+        return false;
+      }
+      else { setBackHandlerLogOut(true) }
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress', backAction);
+    return () => backHandler.remove();
+  }, [navigation]);
+
+
+  // Functions
+  function FirstGetData() {
+    setIsLoading(true);
+    setIndex(0);
+    setPatientData(null);
+    setDashData();
+    Global.PatientDetails = null;
+    const buttonapi = APIURL + Global.userData.insurancedetailapi
+    console.log('insurancedeetailapi', JSON.stringify(buttonapi))
+    NetworkServiceCall(
+      'get',
+      buttonapi,
+      '',
+    ).then(function (response) {
+      if (response.httpstatus === 200) {
+        let objForProgress = response.data.dashboard.find(
+          val => val.dbname === 'TOTAL',
+        );
+        if (objForProgress !== undefined) {
+          setTotalObj(objForProgress.dbvalue);
+        }
+        setDashData(response.data.dashboard);
+        setPatientData(response.data.datalist);
+        setIsLoading(false);
+      } else {
+        setIsLoading(false);
+        notifyMessage('No Dashboard icons', 4);
+      }
+    });
+
+    getLoading(v => setIsLoading(false));
+  }
+
+  function getAllMedicines() {
+    const buttonapi =
+      "insuranceadvanceget/emrcommonget/exec rndddaconsultationaddparameter 20,''";
+
+    NetworkServiceCall('get', APIURL + buttonapi, '').then(function (response) {
+      if (
+        response.httpstatus === 200 &&
+        isNU(response.data) &&
+        isNU(response.data.data)
+      ) {
+        Global.AllMedicinesArr = response.data.data;
+      }
+    });
+  }
+
+  function getTotalPatientList(data, index, fromdate, todate) {
+    setIndex(index);
+    setIsLoading(true);
+    setPatientData(null);
+
+    const buttonapi = `${APIURL}${data?.dbdetailapi},'${fromdate}','${todate}',${Global?.userData?.suuser}`;
+    console.log('GETTOTALPATIENTLISTAPI', JSON.stringify(buttonapi))
+    NetworkServiceCall('get', buttonapi, '').then(function (response) {
+      if (response.httpstatus === 200) {
+        if (
+          response.data.datalist !== undefined &&
+          response.data.datalist.length > 0
+        ) {
+          setPatientData(response.data.datalist);
+          setDashData(response.data.dashboard);
+          setRefresh(refresh + 1);
+          setIsLoading(false);
+        } else {
+          setIsLoading(false);
+          notifyMessage('No Patients', 3);
+        }
+      } else {
+        setIsLoading(false);
+        notifyMessage('Network Error', 4);
+      }
+    });
+
+    getLoading(v => setIsLoading(false));
+  }
+
+  function getNewUser() {
+    setSearchWord('');
+    setIsLoading(true);
+
+    let buttonapi =
+      filter !== 'Patient ID'
+        ? `${APIURL}insuranceadvanceget/emrcommonget/rnlainsure  ${searchWord},0,${Global.userData.suuser}`
+        : `${APIURL}insuranceadvanceget/emrcommonget/rnlainsure 0,${searchWord},${Global.userData.suuser}`;
+
+    console.log('buttonapi------------', buttonapi)
+    NetworkServiceCall('get', buttonapi, '').then(function (response) {
+      if (response.httpstatus === 200) {
+        if (
+          response.data &&
+          response.data !== null &&
+          response.data.datalist !== undefined &&
+          response.data.datalist.length > 0
+        ) {
+          setIsLoading(false);
+          setPatientData(null);
+          setTimeout(() => {
+            setPatientData(response.data.datalist);
+          });
+        } else {
+          setIsLoading(false);
+          notifyMessage('Please enter valid patient id or mobile number', 3);
+        }
+      } else {
+        setIsLoading(false);
+        notifyMessage('Please enter valid patient id or mobile number', 3);
+      }
+    });
+
+    getLoading(v => setIsLoading(false));
+  }
+
+  function onDetectVisionCameraBarcode(params) {
+    setSearchWord(params.data);
+  }
+
+  function FnNavigate() {
+    if (Platform.OS === "web") return;
+    navigation.navigate('CCaptureImageWithoutEdit', {
+      cameramoduletype: 2,
+      hidebuttons: true,
+      cameratype: 'back',
+      onSelect: s => (s && isNU(s) ? onDetectVisionCameraBarcode(s) : null),
+    });
+  }
+
+  function getFunctions(params) {
+    console.log('getfunctiondashboard---', JSON.stringify(params))
+    if (!params.visibility) {
+      notifyMessage('Incorporate Soon', 5);
+      return;
+    }
+    switch (params.functionid) {
+      case 'D01':
+        navigation.navigate('MoreOptionsScreen')
+        break;
+      case 'D02':
+        navigation.navigate('SearchScreen', { searchKey: 1 });
+        break;
+      default:
+        notifyMessage('Incorporate Soon', 5);
+        break;
+    }
+  }
+
+  function renderItemNew(data) {
+    return (
+      <View style={styles.progressCircleContainer}>
+        <CProgressCircle
+          borderWidth={2}
+          radius={normalize(24)}
+          bgColor={
+            index === data.index ? getColorCodeDashboard(data.item) : null
+          }
+          percent={(data.item.dbvalue / totalObj) * 100}
+          iconname={data.item.iconname ? data.item.iconname : 'file-alt'}
+          iconcolor={
+            index === data.index ? null : getColorCodeDashboard(data.item)
+          }
+          iconsize={normalize(15)}
+          displaytext={isNU(data.item.dbvalue) ? data.item.dbvalue : ''}
+          textFontSize={normalize(15)}
+          textColor={
+            index === data.index ? null : getColorCodeDashboard(data.item)
+          }
+          onCallback={s => {
+            getTotalPatientList(
+              data.item,
+              data.index,
+              dateData.fromdate,
+              dateData.todate,
+            );
+          }}
+        />
+        <Text style={[styles.progressCircleText, { color: index === data.index ? getColorCodeDashboard(data.item) : Global.AppTheme.primary_color }]}>{data.item.dbname}</Text>
+      </View>
+    );
+  }
+
+  function getColorCodeDashboard(params) {
+    switch (params.dbname) {
+      case 'ALLOCATED':
+        return '#28a745';
+      case 'DEALLOCATED':
+        return '#dc3545';
+      case 'CANCELED':
+        return '#fd7e14';
+      case 'TOTAL':
+        return Global.AppTheme.secondary_color;
+      default:
+        return Global.AppTheme.primary_color;
+    }
+  }
+
+  function getFilter(params) {
+    let dayBefore = null;
+
+    const updateDateData = (from, to, dateview = false) => {
+      setDateData(prevState => ({
+        ...prevState,
+        fromdate: from,
+        todate: to,
+        dateview,
+      }));
+    };
+
+    const fetchPatients = (from, to) => {
+      getTotalPatientList(dashData[index], index, from, to);
+    };
+
+    switch (params.datavalue) {
+      case 2: // Today
+        updateDateData(today, today, false);
+        fetchPatients(today, today);
+        break;
+
+      case 3: // Yesterday
+        dayBefore = moment().subtract(1, 'days').format('YYYY-MM-DD');
+        updateDateData(dayBefore, today, false);
+        fetchPatients(dayBefore, today);
+        break;
+
+      case 4: // One week before
+        dayBefore = moment().subtract(7, 'days').format('YYYY-MM-DD');
+        updateDateData(dayBefore, today, false);
+        fetchPatients(dayBefore, today);
+        break;
+
+      case 5: // One month before
+        dayBefore = moment().subtract(1, 'month').format('YYYY-MM-DD');
+        updateDateData(dayBefore, today, false);
+        fetchPatients(dayBefore, today);
+        break;
+
+      case 6: // Six months before
+        dayBefore = moment().subtract(6, 'months').format('YYYY-MM-DD');
+        updateDateData(dayBefore, today, false);
+        fetchPatients(dayBefore, today);
+        break;
+
+      case 7: // One year before
+        dayBefore = moment().subtract(1, 'year').format('YYYY-MM-DD');
+        updateDateData(dayBefore, today, false);
+        fetchPatients(dayBefore, today);
+        break;
+
+      case 8: // Five years before
+        dayBefore = moment().subtract(5, 'years').format('YYYY-MM-DD');
+        updateDateData(dayBefore, today, false);
+        fetchPatients(dayBefore, today);
+        break;
+
+      case 9: // Custom date view
+        if (dateData?.dateview) {
+          fetchPatients(dateData.fromdate, dateData.todate);
+        } else {
+          updateDateData(today, today, true);
+        }
+        break;
+      default:
+        console.error('Unknown datavalue:', params.datavalue);
+        break;
+    }
+  }
+
+  // Render
+  return (
+    <CContainerView>
+      {<HeaderBlock
+        navigation={navigation.navigate}
+        callback={() => {
+          setBackHandlerLogOut(true);
+        }}
+      />}
+
+      <CDetailView hideCard={true} >
+        <View style={styles.detailContainer}>
+          {isBNUL(dashData) && (
+            <FlatList
+              data={dashData}
+              renderItem={renderItemNew}
+              numColumns={4}
+              keyExtractor={(item, index) => 'key' + index}
+              columnWrapperStyle={styles.dashboardColumnWrapper}
+            // refreshControl={
+            //   <RefreshControl
+            //     refreshing={refreshing}
+            //     onRefresh={onRefresh}
+            //     colors={[Global.AppTheme.primary_color]}
+            //     tintColor={Global.AppTheme.primary_color}
+            //   />
+            // }
+            />
+          )}
+
+          {/* Date Search Section */}
+          {isBNUL(dashData) && (
+            <View style={styles.dateSearchContainer}>
+              <SSearch
+                disabled={false}
+                editable={true}
+                dropdownapi={`insurance/emrcommonget/rnddhosudatefilter`}
+                disablesearchcomponent={true}
+                onChangeData={val => val && getFilter(val)}
+              />
+            </View>
+          )}
+
+          {dateData?.dateview && (
+            <View style={styles.datePickerRow}>
+              <View style={styles.datePickerContainer}>
+                <SDatePickerLabel
+                  labeltext={'From Date'}
+                  icon={{
+                    icongroup: 5,
+                    name: 'calendar-alt',
+                    color: Global.AppTheme.primary_color,
+                    size: normalize(15),
+                    style: styles.datePickerIcon,
+                  }}
+                  positionviewstyle={styles.datePickerLabel}
+                  positiontextstyle={styles.datePickerLabelText}
+                  pickerstyle={styles.datePicker}
+                  textstyle={styles.datePickerText}
+                  maximumdate={today}
+                  passingDate={moment(dateData?.fromdate).format('YYYY-MM-DD')}
+                  onChangeData={val =>
+                    val &&
+                    (setDateData(prevState => ({
+                      ...prevState,
+                      fromdate: moment(val).format('YYYY-MM-DD'),
+                    })),
+                      fetchPatients(
+                        moment(val).format('YYYY-MM-DD'),
+                        dateData.todate,
+                      ))
+                  }
+                />
+              </View>
+
+              <View style={styles.datePickerContainer}>
+                <SDatePickerLabel
+                  labeltext={'To Date'}
+                  icon={{
+                    icongroup: 5,
+                    name: 'calendar-alt',
+                    color: Global.AppTheme.primary_color,
+                    size: normalize(15),
+                    style: styles.datePickerIcon,
+                  }}
+                  positionviewstyle={styles.datePickerLabel}
+                  positiontextstyle={styles.datePickerLabelText}
+                  pickerstyle={styles.datePicker}
+                  textstyle={styles.datePickerText}
+                  maximumdate={today}
+                  passingDate={moment(dateData?.todate).format('YYYY-MM-DD')}
+                  onChangeData={val =>
+                    val &&
+                    (setDateData(prevState => ({
+                      ...prevState,
+                      todate: moment(val).format('YYYY-MM-DD'),
+                    })),
+                      fetchPatients(
+                        dateData.fromdate,
+                        moment(val).format('YYYY-MM-DD'),
+                      ))
+                  }
+                />
+              </View>
+            </View>
+          )}
+
+
+          <SSearch
+            editable={true}
+            navigation={navigation.navigate}
+            value={searchWord}
+            visibility={val => val && {}}
+            onChangeText={text => setSearchWord(text)}
+            onChangeData={val => val && setFilter(val.searchparam)}
+            onBarCodeScan={val => val && FnNavigate()}
+            onSearch={val => val && getNewUser()}
+            onRefresh={val => val && setSearchRefresh(SearchRefresh + 1)}
+          />
+
+          {!(isBNUL(dashData) || isLoading) && (
+            <View style={styles.refreshContainer}>
+              <HShadowButton
+                useicon={true}
+                usetext={true}
+                buttonstyle={styles.refreshButton}
+                icongroup={4}
+                iconcolor={Global.AppTheme.primary_color}
+                iconname={'refresh'}
+                iconsize={normalize(22)}
+                iconstyle={styles.refreshIcon}
+                displaytext={'Refresh'}
+                buttonCallback={FirstGetData}
+                textstyle={styles.refreshText}
+              />
+            </View>
+          )}
+        </View>
+
+        {patientdata && patientdata !== undefined && (
+          <View ref={scrollRef} style={styles.patientListContainer}>
+            <CCard
+              filter={filter}
+              search={searchWord}
+              navigation={navigation.navigate}
+              data={patientdata}
+              onRefresh={SearchRefresh}
+              disabled={index === 3}
+            />
+          </View>
+        )}
+      </CDetailView>
+
+      <CFooterView style={styles.footerContainer}>
+        {FooterArr &&
+          FooterArr.map((item, i) => {
+            return item.visibility && (
+              <HShadowButton
+                key={item.keyid || i}
+                useicon={true}
+                usetext={true}
+                disabled={false}
+                buttonstyle={[styles.footerButton, CShadowDynamic(-3, 3, 5, 0, Global.AppTheme.primary_color)]}
+                iconcolor={Global.AppTheme.primary_color}
+                icongroup={item.icongroup || 5}
+                iconname={item.iconname}
+                iconsize={normalize(24)}
+                displaytext={item.displaytext}
+                buttonCallback={() => getFunctions(item)}
+                textstyle={styles.optionText}
+              />
+            )
+          })}
+      </CFooterView>
+
+      {backHandlerLogOut ?
+        <CBackHandler
+          type={6} // 2 for exit/logout
+          callBack={val =>
+            val == undefined
+              ? null
+              : (setBackHandlerLogOut(val), navigation.goBack())
+          }
+          close={val => (val == undefined ? null : setBackHandlerLogOut(val))}
+        /> : null}
+      {isLoading && <Loader displaytext={true} />}
+    </CContainerView>
+  );
+}
+
+const styles = StyleSheet.create({
+  detailContainer: {
+    borderWidth: 0,
+  },
+  progressCircleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  progressCircleText: {
+    fontSize: normalize(10),
+    fontWeight: 'bold',
+    paddingVertical: normalize(4),
+  },
+  dashboardColumnWrapper: {
+    justifyContent: 'space-evenly',
+  },
+  dateSearchContainer: {
+    marginTop: normalize(7),
+  },
+  datePickerRow: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-evenly',
+    marginTop: normalize(7),
+  },
+  datePickerContainer: {
+    borderWidth: 0,
+    width: '47%',
+  },
+  datePickerIcon: {
+    marginHorizontal: normalize(5),
+  },
+  datePickerLabel: {
+    position: 'absolute',
+    top: normalize(-5),
+    left: normalize(7),
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  datePickerLabelText: {
+    color: Global.AppTheme.primary_color,
+    fontSize: normalize(10),
+    textAlign: 'left',
+    fontWeight: 'normal',
+  },
+  datePicker: {
+    flexDirection: 'row',
+    backgroundColor: '#fff',
+    width: '100%',
+    borderColor: 'grey',
+    borderWidth: 0.5,
+    borderRadius: 5,
+    alignItems: 'center',
+    height: normalize(30),
+    elevation: 2,
+    justifyContent: 'center',
+    marginVertical: normalize(3),
+  },
+  datePickerText: {
+    fontSize: normalize(12),
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  refreshContainer: {
+    borderWidth: 0,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  refreshButton: {
+    margin: normalize(5),
+    borderLeftWidth: 0,
+    borderBottomWidth: 0,
+    borderRadius: 5,
+    borderWidth: 0,
+    borderColor: Global.AppTheme.primary_color,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    height: normalize(30),
+    width: normalize(60),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  refreshIcon: {
+    textAlign: 'center',
+    borderWidth: 0,
+  },
+  refreshText: {
+    color: '#B8621B',
+    fontSize: normalize(6),
+    textAlign: 'center',
+    fontWeight: 'normal',
+    lineHeight: normalize(6),
+  },
+  patientListContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 2,
+  },
+  footerButton: {
+    borderRadius: 10,
+    borderWidth: 0.5,
+    height: Dimensions.get('screen').height * 0.054,
+    width: Dimensions.get('screen').height * 0.07,
+    backgroundColor: '#fff',
+    paddingHorizontal: 0,
+    paddingBottom: 0,
+    paddingTop: 0,
+    borderColor: Global.AppTheme.primary_color,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: normalize(3),
+    elevation: 4, // raiseLevel equivalent for Android
+    shadowColor: '#ffe5e5', // optional for iOS shadow
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+  },
+  footerButtonText: {
+    fontSize: normalize(9),
+    textAlign: 'center',
+    alignSelf: 'center',
+  },
+  moreButtonContainer: {
+    borderWidth: 0,
+  },
+  menuOptions: {
+    marginTop: normalize(-52),
+  },
+  moreOptionsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap-reverse',
+    justifyContent: 'flex-end',
+    borderWidth: 0,
+  },
+  menuOption: {
+    marginHorizontal: normalize(3),
+  },
+  subFooterButton: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: 'lightblue',
+    borderRadius: 10,
+    height: normalize(40),
+    width: normalize(50),
+    marginVertical: normalize(7),
+    backgroundColor: 'white',
+  },
+  optionText: {
+    fontSize: normalize(8),
+    color: Global.AppTheme.primary_color,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    maxWidth: normalize(60),
+  }
+});