@jescon-technologies/react-native-ui-kit 0.0.14 → 0.0.16

package/src/CustomComponents/HeaderBlock.tsx

@@ -0,0 +1,775 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  StatusBar,
+  Image,
+  TouchableOpacity,
+  Modal,
+  Dimensions,
+  ScrollView,
+  Platform,
+  DeviceEventEmitter,
+  ActivityIndicator,
+  FlatList,
+  StyleProp,
+  ViewStyle,
+  DimensionValue,
+} from 'react-native';
+import CSliderMenu from '../Custom/CSliderMenu';
+import { normalize } from '../CommonStyle/componentStyle';
+import { useNotifications } from '../Handlers/NotificationsContext';
+import moment from 'moment';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import ABlink from '../Alerts/ABlink';
+import COverlay from '../CustomComponents/COverlay';
+import OUserView from '../Custom/OUserView';
+import CBackHandler from '../CustomComponents/CBackHandler';
+import CNetworkStatus from '../CustomComponents/CNetworkStatus';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+import { useNavigation } from '../Navigation/useNavigation';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import HIcons from '../Hoc/HIcons';
+import ResponseComponentContext from '../Handlers/ResponseComponentContext';
+import { Global } from '../../../../../src/Common/Global';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+
+// import HelpdeskScreenFocus from '../Helpdesk/View/HelpdeskScreenFocus';
+// import CHelpdeskView from '../Helpdesk/View/CHelpdeskView';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface HeaderBlockProps {
+  style?: StyleProp<ViewStyle>;
+  backhandler?: unknown;
+  consultation?: unknown;
+  callback?: (goBack: boolean) => void;
+  webview?: unknown;
+  data?: unknown;
+  navigation?: (route: string, params?: object) => void;
+  APIURL?: string;
+  [key: string]: unknown;
+}
+
+interface NotificationItem {
+  status?: boolean;
+  heading?: string;
+  content?: string;
+  [key: string]: unknown;
+}
+
+interface ResponseContextValue {
+  responseJSON: unknown;
+  setResponseJSON: (value: unknown) => void;
+}
+
+interface NetworkResponse<T = unknown> {
+  httpstatus: number;
+  data: T;
+}
+
+interface NotificationsPayload {
+  data?: NotificationItem[];
+}
+
+interface UserDataLite {
+  suuser?: number;
+  username?: string;
+  department?: string;
+  [key: string]: unknown;
+}
+
+// `COverlay(OUserView)` shape — typed manually
+type OverlayComponent = React.ComponentType<{
+  visibility: (val?: boolean) => void;
+}>;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    // `Platform.OS != 'web' && '7%'` yields `false` on web — invalid
+    // DimensionValue. Applied at usage site via conditional spread.
+    backgroundColor: Global.AppTheme.primary_color,
+    justifyContent: 'center',
+    paddingLeft: normalize(3),
+    marginTop: StatusBar.currentHeight,
+    zIndex: 9999,
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: normalize(6),
+    paddingBottom: normalize(0),
+  },
+  backButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 0,
+  },
+  logoContainer: {
+    width: normalize(100),
+    height: normalize(40),
+  },
+  betaContainer: {
+    position: 'absolute',
+    bottom: normalize(-4),
+    right: normalize(-70),
+  },
+  betaText: {
+    color: '#ffffff',
+    fontSize: normalize(20),
+    letterSpacing: 5,
+    fontWeight: 'bold',
+    textShadowColor: '#000000',
+    textShadowOffset: { width: 0.5, height: 0.5 },
+    textShadowRadius: 0.5,
+  },
+  versionText: {
+    color: 'white',
+    fontSize: normalize(8),
+  },
+  userInfoButton: {
+    flexDirection: 'row',
+    borderWidth: 0,
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  userInfoContainer: {
+    borderWidth: 0,
+  },
+  userNameText: {
+    fontWeight: 'bold',
+    fontSize: normalize(13),
+    marginLeft: 5,
+    color: 'white',
+  },
+  departmentText: {
+    fontFamily: Global.fontNormal,
+    fontSize: normalize(11),
+    marginLeft: 5,
+    color: 'white',
+  },
+  rightIconsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    borderWidth: 0,
+  },
+  notificationButton: {
+    margin: normalize(10),
+  },
+  notificationBadge: {
+    position: 'absolute',
+    right: normalize(-2),
+    top: normalize(-2),
+    backgroundColor: 'white',
+    alignItems: 'center',
+    borderRadius: 20,
+    width: normalize(15),
+  },
+  notificationCount: {
+    fontSize: normalize(7),
+    fontWeight: 'bold',
+  },
+  menuButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loginTimeText: {
+    fontSize: normalize(9),
+    marginLeft: 0,
+    color: 'white',
+  },
+  jsonModalContainer: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    height: Dimensions.get('screen').height * 0.9,
+    alignSelf: 'center',
+    width: Dimensions.get('screen').width * 0.9,
+  },
+  closeButton: {
+    textAlign: 'right',
+    fontWeight: 'bold',
+    color: 'black',
+  },
+  jsonText: {
+    fontSize: normalize(10),
+    color: 'black',
+    fontFamily: 'Courier New',
+  },
+  iconBtn: {
+    width: normalize(32),
+    height: normalize(32),
+    borderRadius: normalize(16),
+    backgroundColor: 'rgba(255,255,255,0.12)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badge: {
+    position: 'absolute',
+    right: normalize(-1),
+    top: normalize(-1),
+    backgroundColor: '#FF5252',
+    borderRadius: normalize(8),
+    minWidth: normalize(15),
+    height: normalize(15),
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+    paddingHorizontal: 3,
+  },
+  badgeText: {
+    color: 'white',
+    fontSize: normalize(8),
+    fontWeight: 'bold',
+  },
+  modalContainer: {
+    width: Platform.OS === 'web' ? 360 : '90%',
+    maxWidth: 400,
+    backgroundColor: '#FFFFFF',
+    borderRadius: normalize(12),
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 10,
+    elevation: 8,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: normalize(14),
+    paddingVertical: normalize(12),
+    borderBottomWidth: 1,
+    borderBottomColor: '#F0F0F0',
+    backgroundColor: '#FAFBFD',
+  },
+  modalTitle: {
+    fontSize: normalize(14),
+    fontWeight: 'bold',
+    color: '#094485',
+  },
+  modalBadge: {
+    backgroundColor: '#FF5252',
+    borderRadius: normalize(10),
+    paddingHorizontal: normalize(6),
+    paddingVertical: normalize(1),
+    marginLeft: normalize(6),
+  },
+  modalBadgeText: {
+    color: '#FFFFFF',
+    fontSize: normalize(10),
+    fontWeight: 'bold',
+  },
+  closeBtn: {
+    padding: normalize(4),
+  },
+  notifCard: {
+    flexDirection: 'row',
+    padding: normalize(12),
+    borderBottomWidth: 1,
+    borderBottomColor: '#F4F5F7',
+    alignItems: 'flex-start',
+  },
+  notifIconCircle: {
+    width: normalize(30),
+    height: normalize(30),
+    borderRadius: normalize(15),
+    backgroundColor: '#EBF3FB',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: normalize(10),
+    marginTop: normalize(2),
+  },
+  notifHeading: {
+    fontSize: normalize(12),
+    fontWeight: 'bold',
+    color: '#1A202C',
+    marginBottom: normalize(2),
+  },
+  notifContent: {
+    fontSize: normalize(11),
+    color: '#4A5568',
+    lineHeight: normalize(15),
+  },
+  notifCodeText: {
+    fontSize: normalize(9),
+    color: '#A0AEC0',
+    marginTop: normalize(3),
+  },
+  modalFooter: {
+    borderTopWidth: 1,
+    borderTopColor: '#F0F0F0',
+    paddingVertical: normalize(10),
+    paddingHorizontal: normalize(14),
+    backgroundColor: '#FAFBFD',
+    alignItems: 'center',
+  },
+  viewAllBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  viewAllText: {
+    fontSize: normalize(12),
+    fontWeight: '600',
+    color: '#094485',
+  },
+});
+
+/** Platform-conditional `height: '7%'` (was the inline-invalid-value bug). */
+const containerPlatformHeight: ViewStyle =
+  Platform.OS !== 'web' ? { height: '7%' as DimensionValue } : {};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const HeaderBlock: React.FC<HeaderBlockProps> = (props) => {
+  const { responseJSON, setResponseJSON } = useContext(
+    ResponseComponentContext
+  ) as ResponseContextValue;
+
+  const [isShowSlidermenu, setIsShowSlidermenu] = useState<boolean>(false);
+  const [backHandler, setBackHandler] = useState<boolean>(false);
+  const [backHandlerLogOut, setBackHandlerLogOut] = useState<boolean>(false);
+  const [refresh] = useState<number>(0);
+  const [overlay, setOverlay] = useState<boolean>(false);
+  const [jsonoverlay, setJsonOverlay] = useState<boolean>(false);
+  const navigation = useNavigation();
+  const [notificationList, setNotificationList] = useState<NotificationItem[]>([]);
+  const [unreadCount, setUnreadCount] = useState<number>(0);
+  const [showNotificationModal, setShowNotificationModal] = useState<boolean>(false);
+  const [isLoadingNotifications, setIsLoadingNotifications] = useState<boolean>(false);
+
+  const OverlayHOCComponent = COverlay(OUserView) as unknown as OverlayComponent;
+
+  const NoticationData = useNotifications() as NotificationItem[] | undefined;
+
+  const result = NoticationData.filter((obj) => obj.status === true);
+
+  const fetchNotifications = (): void => {
+    const userData = Global.userData as UserDataLite | null | undefined;
+    if (userData && userData.suuser) {
+      setIsLoadingNotifications(true);
+      const url =
+        APIURL + 'invget/invcommonget/rnhrsumessageuserretrievaljson ' + userData.suuser;
+      NetworkServiceCall('get', url)
+        .then((response: NetworkResponse<NotificationItem[] | NotificationsPayload>) => {
+          setIsLoadingNotifications(false);
+          if (response && response.httpstatus == 200) {
+            let dataArr: NotificationItem[] = [];
+            const data = response.data as NotificationsPayload | NotificationItem[];
+            if (
+              data &&
+              !Array.isArray(data) &&
+              Array.isArray((data as NotificationsPayload).data)
+            ) {
+              dataArr = (data as NotificationsPayload).data!;
+            } else if (Array.isArray(data)) {
+              dataArr = data;
+            }
+            setNotificationList(dataArr);
+            setUnreadCount(dataArr.length);
+          } else {
+            setNotificationList([]);
+            setUnreadCount(0);
+          }
+        })
+        .catch((err: unknown) => {
+          setIsLoadingNotifications(false);
+          console.log('Error fetching notifications in HeaderBlock:', err);
+        });
+    }
+  };
+
+  useEffect(() => {
+    fetchNotifications();
+    const sub = DeviceEventEmitter.addListener('refresh_notifications', fetchNotifications);
+    return () => {
+      sub?.remove?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const goBack = (): void => {
+    Global.PatientDetails = null;
+    if (ValueCheck(props.backhandler)) {
+      if (ValueCheck(props.consultation) && Global.EditStatus == 1) {
+        setBackHandler(true);
+      } else {
+        console.log('props.backhandler', props.backhandler);
+        navigation.goBack();
+      }
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  const OnPressGoBack = (): void => {
+    Global.PatientDetails = null;
+    if (props.callback) {
+      props.callback(true);
+    } else {
+      goBack();
+    }
+  };
+
+  const renderJsonModal = (): React.ReactElement => (
+    <Modal
+      onRequestClose={() => setJsonOverlay(false)}
+      style={{
+        height: Dimensions.get('screen').height,
+        width: Dimensions.get('screen').width,
+        backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+      transparent={true}
+    >
+      <View style={styles.jsonModalContainer}>
+        <TouchableOpacity onPress={() => setJsonOverlay(false)}>
+          <Text style={styles.closeButton}>Close</Text>
+        </TouchableOpacity>
+        <ScrollView>
+          <Text selectable={true} style={styles.jsonText}>
+            {JSON.stringify(responseJSON, null, 2)}
+          </Text>
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+
+  const renderBetaVersion = (): React.ReactElement => (
+    <View style={styles.betaContainer}>
+      <ABlink duration={500}>
+        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+          <Text style={styles.betaText}>BETA TESTING</Text>
+          <Text style={styles.versionText}>
+            {Global.version ? `V ${Global.version}` : null}
+          </Text>
+        </View>
+      </ABlink>
+    </View>
+  );
+
+  const userData = Global.userData as UserDataLite | null | undefined;
+
+  console.log('userData in HeaderBlock:', JSON.stringify(userData));
+
+  const renderUserInfo = (): React.ReactElement => (
+    <TouchableOpacity
+      onPress={() => (props.webview != undefined ? null : setOverlay(true))}
+      style={styles.userInfoButton}
+    >
+      <View style={styles.userInfoContainer}>
+        <Text adjustsFontSizeToFit numberOfLines={2} style={styles.userNameText}>
+          {props.webview != undefined
+            ? ''
+            : userData && userData.department != undefined && userData.department != ''
+              ? userData.username
+              : ''}
+        </Text>
+        {userData &&
+          userData.department != undefined &&
+          userData.department != '' &&
+          props.webview == undefined ? (
+          <Text adjustsFontSizeToFit style={styles.departmentText}>
+            {userData.department}
+          </Text>
+        ) : null}
+      </View>
+    </TouchableOpacity>
+  );
+
+  const renderRightIcons = (): React.ReactElement => (
+    <View style={styles.rightIconsContainer}>
+      {Platform.OS === 'web' && (
+        <TouchableOpacity
+          onPress={() => DeviceEventEmitter.emit('helpdesk.toggle')}
+          style={[
+            styles.iconBtn,
+            { flexDirection: 'row', width: 'auto', paddingHorizontal: normalize(8) },
+          ]}
+        >
+          <HIcons.FontAwesome5
+            name="question-circle"
+            size={normalize(12)}
+            color="white"
+            style={{ marginRight: normalize(4) }}
+          />
+          <Text
+            style={{ color: 'white', fontSize: normalize(10), fontWeight: 'bold' }}
+          >
+            HELP
+          </Text>
+        </TouchableOpacity>
+      )}
+      <CNetworkStatus />
+      <TouchableOpacity
+        onPress={() => {
+          fetchNotifications();
+          setShowNotificationModal(true);
+        }}
+        style={styles.notificationButton}
+      >
+        <ABlink>
+          <View
+            style={[
+              styles.notificationBadge,
+              { backgroundColor: result.length > 0 ? 'red' : 'white' },
+            ]}
+          >
+            <Text
+              numberOfLines={1}
+              adjustsFontSizeToFit
+              style={[
+                styles.notificationCount,
+                { color: result.length > 0 ? 'white' : 'black' },
+              ]}
+            >
+              {result.length}
+            </Text>
+          </View>
+        </ABlink>
+
+        <HIcons.Ionicons name="notifications-outline" size={normalize(18)} color="white" />
+        {unreadCount > 0 && (
+          <View style={styles.badge}>
+            <Text style={styles.badgeText}>
+              {unreadCount > 99 ? '99+' : unreadCount}
+            </Text>
+          </View>
+        )}
+      </TouchableOpacity>
+      <View style={{ paddingLeft: normalize(2) }}>
+        <TouchableOpacity
+          onPress={() => setIsShowSlidermenu(true)}
+          style={styles.menuButton}
+        >
+          <HIcons.Feather name={'menu'} color="white" size={normalize(25)} />
+          <View>
+            {Global.LoginTime != undefined ? (
+              <Text style={styles.loginTimeText}>
+                {moment.duration(moment().diff(Global.LoginTime)).asMinutes().toFixed(0) +
+                  ' Min.'}
+              </Text>
+            ) : null}
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+
+  const renderNotificationContent = (): React.ReactElement => (
+    <View style={styles.modalContainer}>
+      <View style={styles.modalHeader}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <HIcons.Ionicons
+            name="notifications"
+            size={normalize(18)}
+            color="#094485"
+            style={{ marginRight: normalize(6) }}
+          />
+          <Text style={styles.modalTitle}>Notifications</Text>
+          {unreadCount > 0 && (
+            <View style={styles.modalBadge}>
+              <Text style={styles.modalBadgeText}>{unreadCount}</Text>
+            </View>
+          )}
+        </View>
+        <TouchableOpacity
+          onPress={() => setShowNotificationModal(false)}
+          style={styles.closeBtn}
+        >
+          <HIcons.Ionicons name="close" size={normalize(20)} color="#666" />
+        </TouchableOpacity>
+      </View>
+
+      {isLoadingNotifications ? (
+        <View style={{ padding: normalize(20), alignItems: 'center' }}>
+          <ActivityIndicator size="small" color="#094485" />
+          <Text
+            style={{ marginTop: normalize(8), fontSize: normalize(11), color: '#666' }}
+          >
+            Loading notifications...
+          </Text>
+        </View>
+      ) : notificationList && notificationList.length > 0 ? (
+        <FlatList<NotificationItem>
+          data={notificationList}
+          keyExtractor={(_item, index) => 'notif_' + index}
+          style={{ maxHeight: normalize(320) }}
+          renderItem={({ item }) => (
+            <View style={styles.notifCard}>
+              <View style={styles.notifIconCircle}>
+                <HIcons.Ionicons
+                  name="chatbox-ellipses-outline"
+                  size={normalize(16)}
+                  color="#094485"
+                />
+              </View>
+              <View style={{ flex: 1 }}>
+                <Text style={styles.notifHeading}>
+                  {item.heading || 'PUBLIC MESSAGE'}
+                </Text>
+                <Text style={styles.notifContent}>{item.content || ''}</Text>
+              </View>
+            </View>
+          )}
+        />
+      ) : (
+        <View style={{ padding: normalize(24), alignItems: 'center' }}>
+          <HIcons.Ionicons
+            name="notifications-off-outline"
+            size={normalize(32)}
+            color="#ccc"
+          />
+          <Text
+            style={{ marginTop: normalize(8), fontSize: normalize(12), color: '#888' }}
+          >
+            No new notifications
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+
+  const renderNotificationFooter = (): React.ReactElement => (
+    <View style={styles.modalFooter}>
+      <TouchableOpacity
+        style={styles.viewAllBtn}
+        onPress={() => {
+          setShowNotificationModal(false);
+          navigation.navigate('Notifications');
+        }}
+      >
+        <Text style={styles.viewAllText}>View All Notifications</Text>
+        <HIcons.Ionicons
+          name="arrow-forward"
+          size={normalize(14)}
+          color="#094485"
+          style={{ marginLeft: normalize(4) }}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <View
+      style={[styles.container, containerPlatformHeight, props.style]}
+      key={refresh}
+    >
+      {/* <HelpdeskScreenFocus data={props.data} /> */}
+      <StatusBar
+        translucent
+        backgroundColor={Global.AppTheme.primary_color}
+        barStyle="light-content"
+      />
+
+      {jsonoverlay && renderJsonModal()}
+
+      <View style={styles.headerContent}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={OnPressGoBack}
+          onLongPress={goBack}
+        >
+          <HIcons.Ionicons name={'chevron-back'} color="white" size={normalize(25)} />
+          <View style={styles.logoContainer}>
+            {Global.betaversion ? (
+              <View style={styles.logoContainer} />
+            ) : (
+              <Image
+                style={{
+                  width: normalize(100),
+                  height: normalize(40),
+                  resizeMode: 'contain',
+                  borderRadius: 8,
+                }}
+                source={{
+                  uri:
+                    Global?.HospitalData?.hospitallogo3
+                      ? Global.HospitalData.hospitallogo3
+                      : undefined,
+                }}
+              />
+            )}
+          </View>
+          {Global.betaversion && renderBetaVersion()}
+        </TouchableOpacity>
+
+        {renderUserInfo()}
+
+        {props.webview != undefined ? null : renderRightIcons()}
+      </View>
+
+      {overlay && (
+        <OverlayHOCComponent
+          visibility={(val?: boolean) => (val == undefined ? null : setOverlay(val))}
+        />
+      )}
+
+      <CModalOverlay
+        visible={showNotificationModal}
+        onClose={() => setShowNotificationModal(false)}
+        closeOnTouchOutside={true}
+        containerStyle={{
+          alignItems: 'flex-end',
+          justifyContent: 'flex-start',
+          paddingTop: Platform.OS === 'web' ? 60 : 50,
+          paddingRight: normalize(10),
+        }}
+        childrenWrapperStyle={styles.modalContainer}
+        contentStyle={{ flexGrow: 0 }}
+        footer={renderNotificationFooter()}
+        footerStyle={{ padding: 0 }}
+      >
+        {renderNotificationContent()}
+      </CModalOverlay>
+
+      {isShowSlidermenu && (
+        <CSliderMenu
+          navigation={navigation}
+          isShow={isShowSlidermenu}
+          visibility={(val?: boolean) =>
+            val == undefined ? null : setIsShowSlidermenu(val)
+          }
+        />
+      )}
+
+      {backHandler && (
+        <CBackHandler
+          type={5}
+          callBack={(val?: boolean) =>
+            val == undefined ? null : (setBackHandler(val), navigation.goBack())
+          }
+          close={(val?: boolean) => (val == undefined ? null : setBackHandler(val))}
+        />
+      )}
+
+      {backHandlerLogOut && (
+        <CBackHandler
+          type={6}
+          callBack={(val?: boolean) =>
+            val == undefined
+              ? null
+              : (setBackHandlerLogOut(val), navigation.goBack())
+          }
+          close={(val?: boolean) =>
+            val == undefined ? null : setBackHandlerLogOut(val)
+          }
+        />
+      )}
+      {/* <CHelpdeskView defaultModuleCode={Global.module} floating={false} /> */}
+    </View>
+  );
+};
+
+export default HeaderBlock;