@jescon-technologies/react-native-ui-kit 0.0.21 → 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';
@@ -29,5 +31,5 @@ export * from './src/Navigation/useNavigation';
 export * from './src/Navigation/useIsFocused';
 export * from './src/Navigation/useFocusEffect';
 export * from './src/CommonStyle/ComponentFunctions';
-export * from '../../../src/Common/apiConstants'
+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';
@@ -29,5 +31,5 @@ export * from './src/Navigation/useNavigation';
 export * from './src/Navigation/useIsFocused';
 export * from './src/Navigation/useFocusEffect';
 export * from './src/CommonStyle/ComponentFunctions';
-export * from '../../../src/Common/apiConstants'
+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.21",
+  "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/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 { notifyURL } 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';

package/src/Hoc/HDashboard.tsx

@@ -30,7 +30,7 @@ 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';
 
@@ -117,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;
 }
@@ -493,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];
@@ -507,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,
@@ -884,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',
@@ -908,6 +908,7 @@ const styles = StyleSheet.create({
     padding: 7,
     borderWidth: 1,
     borderRadius: 14,
+    width: '50%',
   },
   dateRangeIconWrap: {
     width: 32,
@@ -919,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' },
@@ -935,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',
   },
@@ -950,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',
@@ -964,7 +965,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderWidth: 1,
     borderRadius: 12,
-    paddingHorizontal: 10,
+    paddingHorizontal: 8,
     marginTop: 1,
   },
   detailsButtonText: { fontSize: 10, fontWeight: '700' },
@@ -973,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: {
@@ -1000,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

@@ -2,27 +2,20 @@ import React from 'react';
 import HView from '../Hoc/HView';
 import Navigation from '../Navigation/PageNavigation';
 import ErrorBoundary from '../Common/ErrorBoundary';
-import { GlobalProvider } from '../Common/GlobalContext';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 interface HProviderProps {
     components: Record<string, React.ComponentType<any>>;
     screens: any;
-    Global?: object;
-    global?: object;
 }
 export default function HProvider(props: HProviderProps) {
-    const global = props.Global ?? props.global;
-
     return (
-        <GlobalProvider global={global}>
-            <SafeAreaView style={{ flex: 1 }}>
+            <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
                 <ErrorBoundary>
                     <HView components={props.components}>
                         <Navigation screens={props.screens} />
                     </HView>
                 </ErrorBoundary>
             </SafeAreaView>
-        </GlobalProvider>
     );
 }

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;