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

package/src/Components/CustomButton.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { TouchableOpacity, View, Text } from 'react-native';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+
+export default function CustomButton({ data, callBack }) {
+    return (
+        <TouchableOpacity
+            style={{
+                borderRadius: data.borderRadius != undefined ? data.borderRadius : 10,
+                borderWidth: data.borderWidth != undefined ? data.borderWidth : 1,
+                height: normalize(data.height != undefined ? data.height : 40),
+                width: normalize(data.width != undefined ? data.width : 58),
+                backgroundColor: data.shadowcolor != undefined ? data.shadowcolor : '#f7efef',
+                borderColor: data.bordercolor != undefined ? data.bordercolor : 'lightblue',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: data.padding != undefined ? data.padding : 5,
+                shadowColor: '#000',
+                shadowOpacity: 0.2,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 2 },
+            }}
+            onPress={() =>
+                data.functionid != undefined ? callBack(data) : notifyMessage('Incorporate soon')
+            }
+            disabled={data.disabled != undefined ? data.disabled : false}
+        >
+            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                {data.count ? <View style={{
+                    position: 'absolute', right: normalize(10), top: normalize(-5), backgroundColor: 'white',
+                    alignItems: 'center', borderRadius: 20, width: normalize(15), borderWidth: 0.5, zIndex: 10,
+                }}>
+
+                    <Text style={{ color: 'black', fontSize: normalize(11), fontWeight: 'bold' }}>{data.countValue || 0}</Text>
+                </View> : null}
+                {data.iconname ? (
+                    <Icons.FontAwesome5
+                        name={data.iconname != undefined ? data.iconname : 'file'}
+                        color={data.iconcolor != undefined ? data.iconcolor : 'white'}
+                        size={data.iconsize != undefined ? normalize(data.iconsize) : normalize(20)}
+                    />
+                ) : (
+                    <Icons.MaterialIcons
+                        name={data.icon != undefined ? data.icon : 'file'}
+                        color={data.iconcolor != undefined ? data.iconcolor : 'white'}
+                        size={data.iconsize != undefined ? normalize(data.iconsize) : normalize(20)}
+                    />
+                )}
+                <Text
+                    numberOfLines={1}
+                    style={{
+                        width: normalize(50),
+                        color: data.fontcolor != undefined ? data.fontcolor : '#fff',
+                        textAlign: data.textAlign != undefined ? data.textAlign : 'center',
+                        fontSize: data.size != undefined ? normalize(data.size) : normalize(10),
+                        fontWeight: data.fontWeight != undefined ? data.fontWeight : 'normal',
+                        marginTop: 5,
+                    }}
+                >
+                    {data.displaytext != undefined ? data.displaytext : ''}
+                </Text>
+            </View>
+        </TouchableOpacity>
+    );
+}

package/src/Components/CustomCard.js

@@ -0,0 +1,127 @@
+import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
+import React from 'react';
+import { useState } from 'react';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { APIURL } from '../../../../../src/Common/apiConstants';
+
+const CustomCard = ({ item, onCardPress }) => {
+    // console.log('////////////////////////////////////////#############', item)
+    const [expanded, setExpanded] = useState(false);
+    return (
+        // <View style={{ backgroundColor: item?.backgroundColor != undefined ? item.backgroundColor : '#e1e3e1', borderRadius: 12, position: 'relative', padding: 10 }}>
+        <View>
+            {/* <TouchableOpacity style={{ backgroundColor: '#e1e3e1', borderRadius: 12, position: 'relative', padding: 10 }} onPress={() => { */}
+            <TouchableOpacity style={{ backgroundColor: item?.backgroundColor != undefined ? item.backgroundColor : '#e1e3e1', borderRadius: 12, position: 'relative', padding: 10 }} onPress={() => {
+                onCardPress(item);
+            }}>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingBottom: 3 }}>
+                    <View style={{ flexDirection: 'row' }}>
+                        {/* Image container */}
+                        <View style={styles.imageContainer}>
+                            <Image
+                                source={
+                                    item.imageUrl
+                                        ? { uri: item.imageUrl }
+                                        : item.description === 'M'
+                                            ? {uri: `${APIURL}file/getCommonFile/image/Male(2).png`} : {uri: `${APIURL}file/getCommonFile/image/FemaleI(1).png`}
+                                }
+                                style={styles.image}
+                            />
+
+                        </View>
+                        <View>
+                            <Text style={{ color: item?.fontcolor != undefined ? item.fontcolor : '#094485', fontWeight: item?.fonttype != undefined ? item.fonttype : 'bold', fontSize: 15 }}>{item.name}</Text>
+                            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: 90 }}>
+                                <Text style={{ fontWeight: '500', fontSize: 13, color: '#000' }}>{item.description}</Text>
+                                <Text style={{ fontWeight: '500', fontSize: 13, color: '#000' }}>{item.detail}</Text>
+                            </View>
+                        </View>
+                    </View>
+                    <View>
+                        <Text style={{ color: item?.fontcolor != undefined ? item.fontcolor : '#094485', fontWeight: item?.fonttype != undefined ? item.fonttype : 'bold', fontSize: 15 }}>{item.id}</Text>
+                        <View style={{ position: 'absolute', bottom: 5, right: 5 }}>
+                            <TouchableOpacity
+                                style={{
+                                    height: 30, width: 30, justifyContent: 'center', alignItems: 'center',
+                                    borderRadius: 15, backgroundColor: 'lightgrey',
+                                }}
+                                onPress={() => setExpanded(!expanded)}
+                            >
+                                <Icons.FontAwesome5
+                                    name={expanded ? 'chevron-up' : 'chevron-down'}
+                                    size={14}
+                                    color="darkblue"
+                                />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+            </TouchableOpacity>
+            {
+                expanded && <View style={{ height: 180 }}>
+                    <ScrollView style={{ paddingHorizontal: 10 }} nestedScrollEnabled={true}>
+                        {
+                            item.expandedcontent.map((exp, i) => (
+                                // <View key={i + 1} style={{ flexDirection: 'row', padding: 5 }}>
+                                //     <Text style={{ color: 'gray' }}>{exp.expandlabel} : </Text>
+                                //     <Text style={{ fontWeight: '500', fontSize: 15, color: '#000' }}>{exp.expanddata}</Text>
+                                // </View>
+                                <View
+                                    key={i + 1}
+                                    style={{
+                                        backgroundColor: '#ffffff',
+                                        borderRadius: 5,
+                                        paddingVertical: 5,
+                                        paddingHorizontal: 12,
+                                        marginVertical: 2,
+                                        borderWidth: 1,
+                                        borderColor: '#ddd',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                    }}
+                                >
+                                    <Text
+                                        style={{
+                                            color: 'gray',
+                                            fontSize: 14,
+                                            marginRight: 5,
+                                        }}
+                                    >
+                                        {exp.expandlabel} :
+                                    </Text>
+                                    <Text
+                                        style={{
+                                            fontWeight: '500',
+                                            fontSize: 15,
+                                            color: '#000',
+                                        }}
+                                    >
+                                        {exp.expanddata}
+                                    </Text>
+                                </View>
+                            ))
+                        }
+                    </ScrollView>
+                </View>
+            }
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    imageContainer: {
+        marginRight: 10,
+        borderRadius: 50,
+        overflow: 'hidden',
+    },
+    image: {
+        width: 60,
+        height: 60,
+        borderRadius: 50,
+        borderWidth: 1,
+        resizeMode: 'contain',
+    },
+});
+
+export default CustomCard;

package/src/Components/CustomTextInput.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { TextInput, StyleSheet } from 'react-native';
+
+const CustomTextInput = ({
+    inputRef,
+    style,
+    placeholder,
+    placeholderTextColor = 'gray',
+    value,
+    onChangeText,
+    onSubmitEditing,
+    keyboardType = 'default',
+}) => {
+    const [localValue, setLocalValue] = useState(value);
+
+    const handleChangeText = (text) => {
+        setLocalValue(text);
+        if (onChangeText) {
+          onChangeText(text);
+        }
+      };
+
+    return (
+        <TextInput
+            ref={inputRef}
+            style={[styles.input, style]}
+            placeholder={placeholder}
+            placeholderTextColor={placeholderTextColor || 'gray'}
+            value={localValue}
+            onChangeText={handleChangeText}
+            onSubmitEditing={onSubmitEditing}
+            keyboardType={keyboardType}
+        />
+    );
+};
+
+const styles = StyleSheet.create({
+    input: {
+        padding: 10,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 5,
+        color: 'black',
+    },
+});
+
+export default CustomTextInput;

package/src/Components/EquipmentPage.js

@@ -0,0 +1,313 @@
+import {View, Text, Dimensions, ScrollView} from 'react-native';
+import React, {useContext, useEffect, useState} from 'react';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import {notifyMessage} from '../CommonStyle/ComponentFunctions';
+import ContextBio from '../ContextAPI/ContextBio';
+import {normalize} from '../CommonStyle/componentStyle';
+import Loader from '../Custom/Loader';
+import SDropDownNew from '../Components/SDropDownNew';
+
+import CTextHeader from '../Custom/TableComponent/CTextHeader';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+
+const EquipmentPage = props => {
+  const {argument} = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const {invoiceData, setInvoiceData} = useContext(ContextBio);
+
+  // const data =
+  //   invoiceData.workOrder[argument.workOrderIndex].details[
+  //     argument.detailIndex
+  //   ];
+
+  const data = invoiceData?.workOrder[argument.workOrderIndex]?.details[argument.detailIndex]?.workorderequipment;
+
+  console.log('dataaaaaaaaaaaaaa',data);
+
+  // useEffect for API call
+  // useEffect(() => {
+  //   getData();
+  // }, []);
+
+  // Function for fetch data from API
+  function getData() {
+    setIsLoading(true);
+    let buttonapi = `${APIURL}invget/invcommonget/rnintrworkorderequipment ${argument.argument}`;
+    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', buttonapi);
+    NetworkServiceCall('get', buttonapi).then(function (response) {
+      if (response.httpstatus == 200) {
+        // setData(response.data.data);
+        if (invoiceData.EquipmentUpdate != true) {
+          setInvoiceData(prevData => {
+            const updatedWorkOrder = prevData.workOrder.map((item, index) => {
+              if (index === argument.workOrderIndex) {
+                const updatedDetails = item.details.map(
+                  (detail, detailIndex) => {
+                    if (detailIndex === argument.detailIndex) {
+                      return {...detail, equipment: response.data.data};
+                    }
+                    return detail;
+                  },
+                );
+
+                return {...item, details: updatedDetails};
+              }
+              return item;
+            });
+
+            return {
+              ...prevData,
+              workOrder: updatedWorkOrder,
+              EditStatus: true,
+              EquipmentUpdate: true,
+            };
+          });
+        }
+        setIsLoading(false);
+        console.log(
+          'RESPONSEEEEEEEEEEE FROM CONSULTATTION22222222',
+          JSON.stringify(response.data.data),
+        );
+      } else {
+        notifyMessage('Data Not Found.....');
+        setIsLoading(false);
+      }
+    });
+    // getLoading(v => setIsLoading(false));
+  }
+
+  function handleEquipmentDropdownChange(
+    workOrderIndex,
+    detailIndex,
+    equipmentIndex,
+    value,
+    datavalue,
+    displayvalue,
+  ) {
+    // Clone the workOrder data to ensure immutability
+    const updatedWorkOrders = [...invoiceData.workOrder];
+
+    // Clone the details array for the specific workOrder at workOrderIndex
+    const updatedDetails = [...updatedWorkOrders[workOrderIndex].details];
+
+    // Clone the equipment array inside the specific detail at detailIndex
+    const updatedEquipment = [...updatedDetails[detailIndex].workorderequipment];
+
+    // Update the specific equipment inside the equipment array at equipmentIndex
+    updatedEquipment[equipmentIndex] = {
+      ...updatedEquipment[equipmentIndex],
+      [datavalue]: value.datavalue,
+      [displayvalue]: value.displayvalue,
+    };
+
+    // Update the details with the modified equipment array
+    updatedDetails[detailIndex] = {
+      ...updatedDetails[detailIndex],
+      workorderequipment: updatedEquipment,
+    };
+
+    // Update the workOrder with the modified details array
+    updatedWorkOrders[workOrderIndex] = {
+      ...updatedWorkOrders[workOrderIndex],
+      details: updatedDetails,
+    };
+
+    // Update the state with the modified workOrder data
+    setInvoiceData(prevState => ({
+      ...prevState,
+      workOrder: updatedWorkOrders,
+      EditStatus: true,
+    }));
+  }
+
+  useEffect(() => {
+    console.log('invoicedata', JSON.stringify(invoiceData));
+  }, [invoiceData]);
+
+  return (
+    <View style={{width: Dimensions.get('screen').width * 0.95}}>
+      {/* Container for the page title */}
+      <View
+        style={{
+          borderWidth: 0,
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: normalize(5),
+          marginVertical: normalize(5),
+          alignSelf: 'center',
+        }}>
+        <Text
+          style={{
+            fontSize: normalize(14),
+            fontWeight: 'bold',
+            color: '#094485',
+          }}>
+          Equipment
+        </Text>
+      </View>
+      {
+        isLoading ? (
+          <View
+            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+            <Loader />
+          </View>
+        ) : (
+          <ScrollView horizontal={true} style={{marginVertical: normalize(3)}}>
+            <View>
+              {
+                // Table header section
+                data != undefined && data != null ? (
+                  <View style={{flexDirection: 'row'}}>
+                    <CTextHeader
+                      text={'Classification Nature'}
+                      fontSize={10}
+                      widthArr={Dimensions.get('screen').width * 0.45}
+                      bgColor={'rgba(184, 184, 191,0.3)'}
+                      color={'#094485'}
+                      borderColor={'lightgrey'}
+                      marginHorizontal={normalize(2)}
+                      borderRadius={5}
+                      elevation={0}
+                    />
+                    <CTextHeader
+                      text={'Product'}
+                      fontSize={10}
+                      widthArr={Dimensions.get('screen').width * 0.49}
+                      bgColor={'rgba(184, 184, 191,0.3)'}
+                      color={'#094485'}
+                      borderColor={'lightgrey'}
+                      marginHorizontal={normalize(2)}
+                      borderRadius={5}
+                      elevation={0}
+                    />
+                  </View>
+                ) : null
+              }
+              {data != undefined && data != null
+                ? data.map((item, i) => (
+                    <View
+                      key={i}
+                      style={{
+                        flexDirection: 'row',
+                      }}>
+                      {/* Classification nature */}
+                      <View
+                        style={{
+                          borderWidth: 1,
+                          borderColor: 'lightgrey',
+                          elevation: 0,
+                          borderRadius: 5,
+                          width: Dimensions.get('screen').width * 0.455,
+                          paddingTop: 5,
+                          paddingBottom: 5,
+                          height: Dimensions.get('screen').height * 0.056,
+                          alignItems: 'flex-start',
+                          justifyContent: 'center',
+                          paddingHorizontal: normalize(10),
+                        }}>
+                        <Text
+                          style={{
+                            fontWeight: 'bold',
+                            color: 'black',
+                            fontSize: normalize(10),
+                          }}>
+                          {item.classificationnaturename}
+                        </Text>
+                      </View>
+                      {/* Dropdown */}
+                      <SDropDownNew
+                        // iconName={"boxes"}
+                        widthArr={Dimensions.get('screen').width * 0.49}
+                        heightArr={Dimensions.get('screen').height * 0.056}
+                        fontSize={normalize(10)}
+                        fontWeight={'bold'}
+                        dropdowndata={item.productname || ''}
+                        dropdownapi={`invget/invcommonget/rnddinsuproductarg ${item.insuclassificationnature}`}
+                        dropdownPort={false}
+                        // multiselect={true}
+                        onChangeData={val => {
+                          handleEquipmentDropdownChange(
+                            argument.workOrderIndex,
+                            argument.detailIndex,
+                            i,
+                            val,
+                            'insuproduct',
+                            'productname',
+                          );
+                        }}
+                        editable={true}
+                        // dropdownarray={Dropdown.packing}
+                        refreshCount={
+                          val => console.log(val)
+                          // val == undefined ? setRefresh(refresh + 1) : null
+                        }
+                      />
+                    </View>
+                  ))
+                : null}
+            </View>
+          </ScrollView>
+        )
+        // data.equipment != undefined && data.equipment != null ? (
+        //   data.equipment.map((item, i) => (
+        //     <View
+        //       key={i}
+        //       style={{
+        //         backgroundColor: '#fff',
+        //         padding: 15,
+        //         marginBottom: 10,
+        //         borderRadius: 8,
+        //         borderWidth: 1,
+        //         borderColor: '#ddd',
+        //         shadowColor: '#000',
+        //         shadowOffset: {width: 0, height: 2},
+        //         shadowOpacity: 0.1,
+        //         shadowRadius: 5,
+        //         elevation: 3,
+        //         flexDirection: 'row',
+        //         justifyContent: 'space-between',
+        //         alignItems: 'center',
+        //         width: Dimensions.get('screen').width * 0.89,
+        //       }}>
+        //       <Text style={{fontSize: 14, color: '#333', marginBottom: 5}}>
+        //         {/* <Text style={{fontWeight: 'bold'}}>Classification Nature: </Text> */}
+        //         {item.classificationnaturename}
+        //       </Text>
+        //       <SDropDownNew
+        //         // iconName={"boxes"}
+        //         widthArr={Dimensions.get('screen').width * 0.4}
+        //         heightArr={Dimensions.get('screen').height * 0.05}
+        //         dropdowndata={''}
+        //         dropdownapi={`invget/invcommonget/rnddinsuproductarg ${item.insuclassificationnature}`}
+        //         dropdownPort={true}
+        //         // multiselect={true}
+        //         onChangeData={val => {
+        //           handleEquipmentDropdownChange(
+        //             argument.workOrderIndex,
+        //             argument.detailIndex,
+        //             i,
+        //             val,
+        //             'insuproduct',
+        //             'productname',
+        //           )
+        //         }}
+        //         editable={true}
+        //         // dropdownarray={Dropdown.packing}
+        //         refreshCount={
+        //           val => console.log(val)
+        //           // val == undefined ? setRefresh(refresh + 1) : null
+        //         }
+        //       />
+        //       {/* <Text style={{fontSize: 14, color: '#333', marginBottom: 5}}>
+        //             <Text style={{fontWeight: 'bold'}}>Product: </Text>
+        //             {item.productname || 'Product name'}
+        //           </Text> */}
+        //     </View>
+        //   ))
+        // ) : null
+      }
+    </View>
+  );
+};
+
+export default EquipmentPage;