@jescon-technologies/react-native-ui-kit 0.0.20 → 0.0.22

package/index.d.ts

@@ -5,6 +5,8 @@ export { default as ABlink } from './src/Alerts/ABlink';
 export { default as HIcons } from './src/Hoc/HIcons';
 export { default as HView } from './src/Hoc/HView';
 export { default as HProvider } from './src/Hoc/HProvider';
+export { default as HWrappedComponent } from './src/Hoc/HWrappedComponent';
+export { default as HHeading } from './src/Hoc/HHeading';
 export { default as HShadowButton } from './src/Hoc/HShadowButton';
 export { default as Navigation } from './src/Navigation/PageNavigation';
 export { default as SSearchBar } from './src/StaticComponents/SSearchBar';
@@ -23,10 +25,11 @@ export { default as HeaderBlock } from './src/CustomComponents/HeaderBlock';
 export { default as HDashboard } from './src/Hoc/HDashboard';
 export { default as NetworkServiceCall } from './src/Common/NetworkServiceCall';
 export { default as useNotifications } from './src/Handlers/NotificationsContext';
-export { default as ResponseComponentContext, ResponseComponentProvider } from './src/Handlers/ResponseComponentContext';
-export type { ResponseComponentProviderProps, ResponseContextValue, ResponseJSON } from './src/Handlers/ResponseComponentContext';
+export { default as CBackHandler } from './src/CustomComponents/CBackHandler';
+export * from './src/Handlers/ResponseComponentContext';
 export * from './src/Navigation/useNavigation';
 export * from './src/Navigation/useIsFocused';
 export * from './src/Navigation/useFocusEffect';
-export { default as CBackHandler } from './src/CustomComponents/CBackHandler';
 export * from './src/CommonStyle/ComponentFunctions';
+export * from '../../../src/Common/ApiConstants'
+export * from '../../../src/Common/Global';

package/index.js

@@ -5,6 +5,8 @@ export { default as ABlink } from './src/Alerts/ABlink';
 export { default as HIcons } from './src/Hoc/HIcons';
 export { default as HView } from './src/Hoc/HView';
 export { default as HProvider } from './src/Hoc/HProvider';
+export { default as HWrappedComponent } from './src/Hoc/HWrappedComponent';
+export { default as HHeading } from './src/Hoc/HHeading';
 export { default as HShadowButton } from './src/Hoc/HShadowButton';
 export { default as Navigation } from './src/Navigation/PageNavigation';
 export { default as SSearchBar } from './src/StaticComponents/SSearchBar';
@@ -23,9 +25,11 @@ export { default as HeaderBlock } from './src/CustomComponents/HeaderBlock';
 export { default as HDashboard } from './src/Hoc/HDashboard';
 export { default as NetworkServiceCall } from './src/Common/NetworkServiceCall';
 export { default as useNotifications } from './src/Handlers/NotificationsContext';
-export { default as ResponseComponentContext, ResponseComponentProvider } from './src/Handlers/ResponseComponentContext';
+export { default as CBackHandler } from './src/CustomComponents/CBackHandler';
+export * from './src/Handlers/ResponseComponentContext';
 export * from './src/Navigation/useNavigation';
 export * from './src/Navigation/useIsFocused';
 export * from './src/Navigation/useFocusEffect';
-export { default as CBackHandler } from './src/CustomComponents/CBackHandler';
 export * from './src/CommonStyle/ComponentFunctions';
+export * from '../../../src/Common/ApiConstants'
+export * from '../../../src/Common/Global';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jescon-technologies/react-native-ui-kit",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "A React Native module for Jescon Technologies that provides react-native-ui-kit",
   "main": "index.js",
   "types": "index.d.ts",

package/src/Common/GlobalContext.tsx

@@ -0,0 +1,78 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useSyncExternalStore,
+} from 'react';
+import type { ReactNode } from 'react';
+
+export type GlobalConfig = Record<string, unknown>;
+
+interface GlobalStore {
+  getSnapshot: () => object;
+  subscribe: (listener: () => void) => () => void;
+}
+
+let globalConfig: object = {};
+const listeners = new Set<() => void>();
+
+const notifyListeners = (): void => {
+  listeners.forEach(listener => listener());
+};
+
+const globalStore: GlobalStore = {
+  getSnapshot: () => globalConfig,
+  subscribe: listener => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+};
+
+export const GlobalContext = createContext<GlobalStore>(globalStore);
+
+export const setGlobal = <T extends object>(config: T): void => {
+  globalConfig = config;
+  notifyListeners();
+};
+
+export const getGlobal = <
+  T extends object = GlobalConfig,
+>(): T => globalConfig as T;
+
+export const updateGlobal = <T extends object = GlobalConfig>(
+  config: Partial<T>,
+): void => {
+  Object.assign(globalConfig, config);
+  notifyListeners();
+};
+
+export const useGlobal = <T extends object = GlobalConfig>(): T => {
+  const store = useContext(GlobalContext);
+  return useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getSnapshot,
+  ) as T;
+};
+
+interface GlobalProviderProps {
+  global?: object;
+  children?: ReactNode;
+}
+
+export const GlobalProvider: React.FC<GlobalProviderProps> = ({
+  global,
+  children,
+}) => {
+  useEffect(() => {
+    if (global !== undefined) {
+      setGlobal(global);
+    }
+  }, [global]);
+
+  return (
+    <GlobalContext.Provider value={globalStore}>
+      {children}
+    </GlobalContext.Provider>
+  );
+};

package/src/Components/SDropDown.tsx

@@ -14,7 +14,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { APIURL } from '../../../../../src/Common/apiConstants';
+import { APIURL } from '@jescon-technologies/react-native-ui-kit';
 import Loader from '../Custom/Loader';
 import { isBNU, isBNUL, isNU, normalize } from '../CommonStyle/ComponentFunctions';
 import NetworkServiceCall from '../Common/NetworkServiceCall';

package/src/Custom/CSliderMenu.tsx

@@ -11,7 +11,7 @@ import {
 import { normalize} from '../CommonStyle/ComponentFunctions';
 import RNExitApp from 'react-native-exit-app';
 import { Global, GlobalUserData } from '../../../../../src/Common/Global';
-import { imageURL } from '../../../../../src/Common/apiConstants';
+import { imageURL } from '@jescon-technologies/react-native-ui-kit';
 import { useNavigation } from '../Navigation/useNavigation';
 import CModalOverlay from '../CustomComponents/CModalOverlay';
 import HIcons from '../Hoc/HIcons';

package/src/Custom/Loader.tsx

@@ -13,7 +13,7 @@ import {
   TextStyle,
 } from 'react-native';
 import { normalize} from '../CommonStyle/ComponentFunctions';
-import { APIURL } from '../../../../../src/Common/apiConstants';
+import { imageURL } from '@jescon-technologies/react-native-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -45,7 +45,7 @@ export default function Loader({
   overlayColor = 'rgba(0,0,0,0.4)',
   loaderColor = 'lightblue',
   size = Platform.OS !== 'web' ? 30 : 50,
-  gifSource = { uri: `${APIURL}file/getCommonFile/image/heartpulse.gif` },
+  gifSource = { uri: `${imageURL}heartpulse.gif` },
   message = '',
   messageStyle = {},
   animationType = 'fade',

package/src/CustomComponents/CHeaderView.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Platform,
+  View,
+  ScrollView,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CHeaderViewProps {
+  /** Extra style merged onto the outer container. */
+  style?: StyleProp<ViewStyle>;
+  /** Header rail content (usually a column/row of buttons). */
+  children?: React.ReactNode;
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  base: {
+    backgroundColor: 'white',
+  },
+  content: {
+    alignItems: 'center',
+  },
+  webContent: {
+    flexDirection: 'column',
+    paddingVertical: '1%',
+  },
+  mobileContent: {
+    flexDirection: 'row',
+    paddingHorizontal: '1%',
+    paddingRight: '10%',
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const CHeaderView: React.FC<CHeaderViewProps> = ({ style, children }) => {
+  const isWeb = Platform.OS === 'web';
+
+  const containerStyle: ViewStyle = isWeb
+    ? {
+        position: 'absolute',
+        left: 0,
+        bottom: 0,
+        width: 80,
+        borderRightWidth: 1,
+        borderRightColor: 'lightgrey',
+        zIndex: 10,
+        elevation: 10,
+        maxHeight: '90%',
+      }
+    : {
+        borderTopWidth: 1,
+        borderTopColor: 'lightgrey',
+      };
+
+  return (
+    <View style={[styles.base, containerStyle, style]}>
+      <ScrollView
+        horizontal={!isWeb}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        bounces={false}
+        contentContainerStyle={[
+          styles.content,
+          isWeb ? styles.webContent : styles.mobileContent,
+        ]}
+      >
+        {children}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default CHeaderView;

package/src/CustomComponents/HeaderBlock.tsx

@@ -33,7 +33,7 @@ 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 { notifyURL } from '@jescon-technologies/react-native-ui-kit';
 
 // import HelpdeskScreenFocus from '../Helpdesk/View/HelpdeskScreenFocus';
 // import CHelpdeskView from '../Helpdesk/View/CHelpdeskView';
@@ -50,7 +50,6 @@ interface HeaderBlockProps {
   webview?: unknown;
   data?: unknown;
   navigation?: (route: string, params?: object) => void;
-  APIURL?: string;
   [key: string]: unknown;
 }
 
@@ -358,9 +357,7 @@ const HeaderBlock: React.FC<HeaderBlockProps> = (props) => {
     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)
+      NetworkServiceCall('get',`${notifyURL} ${userData.suuser}`)
         .then((response: NetworkResponse<NotificationItem[] | NotificationsPayload>) => {
           setIsLoadingNotifications(false);
           if (response && response.httpstatus == 200) {

package/src/Hoc/HDashboard.tsx

@@ -30,9 +30,8 @@ import NetworkServiceCall from '../Common/NetworkServiceCall';
 import { notifyMessage } from '../CommonStyle/ComponentFunctions';
 import HShadowButton from './HShadowButton';
 import HIcons from './HIcons';
-import { normalize} from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/ComponentFunctions';
 import { Global } from '../../../../../src/Common/Global';
-;
 import SDateTimePicker from '../StaticComponents/SDateTimePicker';
 
 // ---------------------------------------------------------------------------
@@ -118,7 +117,7 @@ interface ContentConfig {
 interface ChartStyleConfig {
   bar?: Record<string, unknown>;
   line?: Record<string, unknown>;
-  pie?: { centerCaption?: string; [key: string]: unknown };
+  pie?: { centerCaption?: string;[key: string]: unknown };
   axisTextStyle?: TextStyle;
   [key: string]: unknown;
 }
@@ -494,7 +493,7 @@ const WIDGET_RENDERERS: Record<string, React.ComponentType<WidgetRendererProps>>
 // Widget shell
 // ---------------------------------------------------------------------------
 
-interface WidgetBodyProps extends WidgetRendererProps {}
+interface WidgetBodyProps extends WidgetRendererProps { }
 
 const WidgetBody: React.FC<WidgetBodyProps> = ({ widget, theme, content, chartStyle }) => {
   const Renderer = WIDGET_RENDERERS[widget.type];
@@ -508,7 +507,7 @@ const WidgetBody: React.FC<WidgetBodyProps> = ({ widget, theme, content, chartSt
   );
 };
 
-interface DashboardWidgetProps extends WidgetRendererProps {}
+interface DashboardWidgetProps extends WidgetRendererProps { }
 
 const DashboardWidget: React.FC<DashboardWidgetProps> = ({
   widget,
@@ -885,21 +884,21 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 24,
   },
-  centerStateText: { marginTop: 12, fontSize: 14, textAlign: 'center' },
+  centerStateText: { marginTop: 8, fontSize: 14, textAlign: 'center' },
   header: {
-    paddingTop: 12,
-    paddingBottom: 10,
+    paddingVertical: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    marginBottom: 10,
+    marginBottom: 8,
   },
   headerTop: {
     flexDirection: 'row',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
+    width: '100%',
   },
   headerIdentity: { flexDirection: 'row', alignItems: 'center', flex: 1 },
   headerCopy: { flex: 1 },
-  dashboardTitle: { fontSize: 24, fontWeight: '800', letterSpacing: -0.2 },
+  dashboardTitle: { fontSize: 24, fontWeight: '800', letterSpacing: -0.2, width: '50%' },
   dateRangeBadge: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -909,6 +908,7 @@ const styles = StyleSheet.create({
     padding: 7,
     borderWidth: 1,
     borderRadius: 14,
+    width: '50%',
   },
   dateRangeIconWrap: {
     width: 32,
@@ -920,15 +920,15 @@ const styles = StyleSheet.create({
   dateRangeCopy: { flexShrink: 1, marginLeft: 9 },
   dateRangeLabel: { fontSize: 9, fontWeight: '800', letterSpacing: 0.7 },
   dateRange: { fontSize: 12, fontWeight: '700', marginTop: 2 },
-  departmentSelector: { flexDirection: 'row', paddingVertical: 14 },
+  departmentSelector: { flexDirection: 'row', paddingVertical: 8 },
   departmentButton: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 7,
+    gap: 6,
     borderWidth: 1,
     borderRadius: 12,
-    paddingHorizontal: 14,
-    paddingVertical: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
     marginRight: 8,
   },
   departmentButtonText: { fontSize: 12, fontWeight: '700' },
@@ -936,8 +936,8 @@ const styles = StyleSheet.create({
     width: '50%',
     borderWidth: 1,
     borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
+    padding: 12,
+    marginBottom: 8,
     minHeight: 88,
     overflow: 'hidden',
   },
@@ -951,13 +951,13 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     justifyContent: 'space-between',
     borderBottomWidth: StyleSheet.hairlineWidth,
-    paddingBottom: 10,
-    marginBottom: 12,
+    paddingBottom: 8,
+    marginBottom: 8,
   },
-  widgetHeaderCopy: { flex: 1, paddingRight: 12 },
-  widgetIcon: { marginRight: 8, marginTop: 1 },
+  widgetHeaderCopy: { flex: 1, paddingRight: 8 },
+  widgetIcon: { marginRight: 6, marginTop: 1 },
   widgetTitle: { fontSize: 16, fontWeight: '800', letterSpacing: -0.2 },
-  widgetSubtitle: { fontSize: 12, marginTop: 3, lineHeight: 17, fontWeight: '500' },
+  widgetSubtitle: { fontSize: 12, marginTop: 2, lineHeight: 17, fontWeight: '500' },
   detailsButton: {
     height: 24,
     flexDirection: 'row',
@@ -965,7 +965,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderWidth: 1,
     borderRadius: 12,
-    paddingHorizontal: 10,
+    paddingHorizontal: 8,
     marginTop: 1,
   },
   detailsButtonText: { fontSize: 10, fontWeight: '700' },
@@ -974,24 +974,24 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'flex-start',
-    marginTop: 14,
+    marginTop: 8,
     borderTopWidth: StyleSheet.hairlineWidth,
-    paddingTop: 10,
+    paddingTop: 8,
   },
   chartLegendItem: {
     width: '50%',
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 5,
-    paddingRight: 10,
+    paddingVertical: 4,
+    paddingRight: 8,
   },
-  chartLegendDot: { width: 8, height: 8, borderRadius: 4, marginRight: 7 },
+  chartLegendDot: { width: 8, height: 8, borderRadius: 4, marginRight: 6 },
   chartLegendLabel: { flex: 1, fontSize: 10, fontWeight: '600' },
   chartLegendValue: { fontSize: 10, fontWeight: '800' },
-  emptyText: { fontSize: 13, textAlign: 'center', paddingVertical: 26 },
+  emptyText: { fontSize: 13, textAlign: 'center', paddingVertical: 16 },
   itemTitle: { fontSize: 13, fontWeight: '700' },
-  itemSubtitle: { fontSize: 11, marginTop: 3 },
-  progressTrack: { height: 10, borderRadius: 8, overflow: 'hidden', marginVertical: 6 },
+  itemSubtitle: { fontSize: 11, marginTop: 2 },
+  progressTrack: { height: 10, borderRadius: 8, overflow: 'hidden', marginVertical: 4 },
   progressFill: { height: '100%', borderRadius: 8 },
   heatmap: { flexDirection: 'row', flexWrap: 'wrap' },
   heatCell: {
@@ -1001,21 +1001,22 @@ const styles = StyleSheet.create({
     minHeight: 58,
     alignItems: 'center',
     justifyContent: 'center',
-    margin: 3,
+    margin: 2,
     borderRadius: 8,
   },
   heatLabel: { fontSize: 11, fontWeight: '600' },
-  heatValue: { fontSize: 14, fontWeight: '700', marginTop: 3 },
-  rankRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6 },
+  heatValue: { fontSize: 14, fontWeight: '700', marginTop: 2 },
+  rankRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 4 },
   rankNumber: { width: 24, fontSize: 13, fontWeight: '700' },
   rankBody: { flex: 1 },
-  rankLabels: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
+  rankLabels: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 2 },
   datePickerRow: {
     justifyContent: 'space-between',
-    flexDirection: 'row',
+    width: '50%',
   },
   datePickerWrapper: {
     marginHorizontal: '2%',
+    marginTop: '2%',
   },
   datePickerLabel: {
     position: 'absolute',

package/src/Hoc/HHeading.tsx

@@ -0,0 +1,121 @@
+import React, { memo } from 'react';
+import { View, TouchableOpacity, Text, StyleProp, TextStyle } from 'react-native';
+import { normalize } from '../CommonStyle/ComponentFunctions';
+import HIcons from './HIcons';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface HHeadingStyles {
+  iconname?: string;
+  icongroup?: number;
+  bgcolor?: string;
+  iconsize?: number;
+  iconcolor?: string;
+  displaytext?: string;
+  textsize?: number;
+  textcolor?: string;
+}
+
+export interface HHeadingProps {
+  /** Style bag — all keys optional; defaults are applied for missing keys. */
+  styles?: HHeadingStyles;
+  /** Optional expand handler; receives `1` when tapped. */
+  Expand?: (value: number) => void;
+  /** Right-side content (icons, buttons, etc.). */
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULT_STYLES: Required<
+  Pick<
+    HHeadingStyles,
+    | 'iconname'
+    | 'bgcolor'
+    | 'iconsize'
+    | 'iconcolor'
+    | 'displaytext'
+    | 'textsize'
+    | 'textcolor'
+  >
+> = {
+  iconname: 'file',
+  bgcolor: '#f2efef',
+  iconsize: 18,
+  iconcolor: 'black',
+  displaytext: 'Testing',
+  textsize: 15,
+  textcolor: 'darkblue',
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function HHeading(props: HHeadingProps): React.ReactElement {
+  const styles: HHeadingStyles =
+    props.styles !== undefined ? props.styles : DEFAULT_STYLES;
+
+  return (
+    <TouchableOpacity
+      style={{
+        backgroundColor: styles.bgcolor ?? '#f2efef',
+        paddingVertical: 3,
+        paddingHorizontal: 6,
+        marginTop: 3,
+        marginBottom: 2,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        elevation: 5,
+        borderWidth: 0.5,
+        borderColor: 'lightgrey',
+        width: '99%',
+        alignSelf: 'center',
+      }}
+    >
+      <TouchableOpacity
+        onPress={() => (props.Expand !== undefined ? props.Expand(1) : null)}
+        disabled={props.Expand === undefined}
+        style={{ width: normalize(30), alignItems: 'center', marginRight: 5 }}
+      >
+        <HIcons.Icons
+          icongroup={styles.icongroup ?? 5}
+          name={styles.iconname}
+          color={styles.iconcolor}
+          size={normalize(styles.iconsize ?? DEFAULT_STYLES.iconsize)}
+        />
+      </TouchableOpacity>
+
+      <Text
+        style={{
+          textShadowRadius: 2,
+          fontSize: normalize(styles.textsize ?? DEFAULT_STYLES.textsize),
+          fontWeight: 'bold',
+          color: styles.textcolor,
+          flex: 1,
+        }}
+      >
+        {styles.displaytext}
+      </Text>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          width: normalize(60),
+          justifyContent: 'space-around',
+        }}
+      >
+        {props.children}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default memo(HHeading);

package/src/Hoc/HProvider.tsx

@@ -10,12 +10,12 @@ interface HProviderProps {
 }
 export default function HProvider(props: HProviderProps) {
     return (
-        <SafeAreaView style={{ flex: 1 }}>
-            <ErrorBoundary>
-                <HView components={props.components}>
-                    <Navigation screens={props.screens} />
-                </HView>
-            </ErrorBoundary>
-        </SafeAreaView>
+            <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
+                <ErrorBoundary>
+                    <HView components={props.components}>
+                        <Navigation screens={props.screens} />
+                    </HView>
+                </ErrorBoundary>
+            </SafeAreaView>
     );
 }

package/src/Hoc/HWrappedComponent.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useCallback } from 'react';
+import {
+    View,
+    StyleSheet,
+    Dimensions,
+    Platform,
+    StyleProp,
+    ViewStyle,
+    TextStyle,
+    DimensionValue,
+} from 'react-native';
+
+import HeaderBlock from '../CustomComponents/HeaderBlock';
+import HView from './HView';
+import { Global, GlobalOptionDetail } from '../../../../../src/Common/Global';
+import CHeaderView from '../CustomComponents/CHeaderView';
+import HShadowCountButton from './HShadowButton';
+import { normalize, CButtonShadow } from '../CommonStyle/ComponentFunctions';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** Extended shape — `Global.optiondetail` items need these extra fields. */
+interface OptionDetailItem extends GlobalOptionDetail {
+    keyid?: string | number;
+    icongroup?: number;
+    icon?: string;
+    display?: string;
+    color?: string;
+    visibility?: boolean;
+    component?: string;
+}
+
+interface HWrappedComponentParams {
+    component: string;
+    data: OptionDetailItem;
+    [key: string]: unknown;
+}
+
+export interface HWrappedComponentProps {
+    route: {
+        params: HWrappedComponentParams;
+        key?: string;
+        name?: string;
+    };
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const BUTTON_SIZE =
+    Platform.OS === 'web'
+        ? Dimensions.get('screen').height * 0.1
+        : Dimensions.get('screen').height * 0.05;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const HWrappedComponent: React.FC<HWrappedComponentProps> = ({ route }) => {
+    const { component, data, ...restParams } = route.params;
+
+    const [callback, setCallback] = useState<boolean>(false);
+    const [selectedComponent, setSelectedComponent] = useState<string>(component);
+    const [selectedData, setSelectedData] = useState<OptionDetailItem>(data);
+
+    const handleHeaderBack = useCallback(() => {
+        setCallback((prev) => !prev);
+    }, []);
+
+    const handleCirclePress = (item: OptionDetailItem): void => {
+        setSelectedData(item);
+        setSelectedComponent(item.component ?? '');
+        console.log('ViewHOCComponent', JSON.stringify(item));
+    };
+
+    const optionDetail = Global.optiondetail as OptionDetailItem[] | null | undefined;
+
+    return (
+        <View style={styles.container}>
+            <HeaderBlock callback={handleHeaderBack} data={data} />
+            <CHeaderView>
+                {optionDetail?.map(
+                    (item) =>
+                        item.visibility && (
+                            <HShadowCountButton
+                                key={item.keyid}
+                                useicon
+                                usetext
+                                disabled={false}
+                                buttonstyle={[
+                                    styles.button,
+                                    {
+                                        ...CButtonShadow(),
+                                        width: BUTTON_SIZE,
+                                        height: BUTTON_SIZE,
+                                        borderColor: item.color,
+                                        backgroundColor:
+                                            item === selectedData
+                                                ? Global.AppTheme.selected_color
+                                                : Global.AppTheme.bg_button,
+                                    },
+                                ]}
+                                iconcolor={item.color}
+                                icongroup={item.icongroup || 5}
+                                iconname={item.icon}
+                                iconsize={
+                                    Platform.OS === 'web' ? normalize(25) : normalize(15)
+                                }
+                                displaytext={item.display}
+                                buttonCallback={() => handleCirclePress(item)}
+                                textstyle={[
+                                    styles.buttonText,
+                                    {
+                                        color: item.color,
+                                    },
+                                ]}
+                            />
+                        )
+                )}
+            </CHeaderView>
+            {selectedComponent && selectedData ? (
+                <HView
+                    headerCallback={callback}
+                    component={selectedComponent}
+                    optiondata={selectedData}
+                    {...restParams}
+                />
+            ) : null}
+        </View>
+    );
+};
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    } as ViewStyle,
+
+    button: {
+        borderRadius: 10,
+        borderWidth: 0.5,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // ⚠️ Original: `marginVertical: Platform.OS === 'web' && '5%'` and
+        // `marginHorizontal: Platform.OS !== 'web' && '.5%'` — when the condition
+        // is false, the value is `false`, which is an INVALID `DimensionValue`.
+        // RN silently ignores `false`; TS rejects it. Fix via conditional spread
+        // so behavior is identical (no margin) and the type is valid.
+        ...(Platform.OS === 'web' ? { marginVertical: '5%' as DimensionValue } : {}),
+        ...(Platform.OS !== 'web' ? { marginHorizontal: '.5%' as DimensionValue } : {}),
+    } as ViewStyle,
+
+    buttonText: {
+        fontSize: normalize(7),
+        fontWeight: 'bold',
+        textAlign: 'center',
+    } as TextStyle,
+
+    contentContainer: {
+        flex: 1,
+        padding: 10,
+    } as ViewStyle,
+
+    gridContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 10,
+    } as ViewStyle,
+
+    scrollContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+    } as ViewStyle,
+});
+
+export default HWrappedComponent;