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

package/src/CustomComponents/WorkOrderDetailsPage.js

@@ -0,0 +1,1213 @@
+import {
+  View,
+  Text,
+  BackHandler,
+  Dimensions,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+import React, { useContext, useEffect, useState } from 'react';
+import CDetailView from '../CustomComponents/CDetailView';
+import HeaderBlock from '../Screens/HeaderBlock';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import ContextBio from '../ContextAPI/ContextBio';
+import ConfirmOverlay from '../HOC/ConfirmOverlay';
+import { CButtonShadow, getLoading, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import Loader from '../Custom/Loader';
+import { normalize } from '../CommonStyle/componentStyle';
+import CFooterView from '../CustomComponents/CFooterView';
+import CustomButton from '../Components/CustomButton';
+import { Global } from '../../../../../src/Common/Global';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import CContainerView from '../CustomComponents/CContainerView';
+import CTextHeader from '../Custom/TableComponent/CTextHeader';
+import STextInput from '../StaticComponents/STextInput';
+import SDropDownIcon from '../StaticComponents/SDropDownIcon';
+import SDropDownNew from '../Components/SDropDownNew';
+
+import HOverlay from '../HOC/HOverlay';
+import STextInputNew from '../Components/STextInputNew';
+import HHeading from '../HOC/HHeading';
+import HShadowCountButton from '../HOC/HShadowCountButton';
+
+export default function WorkOrderDetailsPage({ route }) {
+  const { orderIndex } = route.params || {};
+  const { invoiceData, setInvoiceData } = useContext(ContextBio);
+  const navigation = useNavigation();
+  const [backHandler, setBackHandler] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [overlay, setOverlay] = useState(false);
+  const [overlayComponent, setOverlayComponent] = useState('');
+
+  const workOrder = invoiceData.workOrder[orderIndex];
+
+  const FooterArr = [
+    {
+      keyid: 1,
+      displaytext: 'Save',
+      size: 10,
+      iconname: 'save',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D01',
+      count: false,
+      countValue: 0,
+    },
+    {
+      keyid: 2,
+      displaytext: 'Preview',
+      size: 10,
+      iconname: 'file-invoice',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: false,
+      iconsize: 20,
+      functionid: 'D01',
+      count: false,
+      countValue: 0,
+    },
+  ];
+
+  const ButtonsArray = [
+    {
+      keyid: 3,
+      displaytext: 'Raw Material',
+      size: 10,
+      iconname: 'box-open',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D01',
+      count: false,
+      countValue: 0,
+    },
+    {
+      keyid: 4,
+      displaytext: 'Equipment',
+      size: 10,
+      iconname: 'toolbox',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D01',
+      count: false,
+      countValue: 0,
+    },
+    {
+      keyid: 5,
+      displaytext: 'By-product',
+      size: 10,
+      iconname: 'boxes',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D01',
+      count: false,
+      countValue: 0,
+    },
+    {
+      keyid: 6,
+      displaytext: 'Stage By-product',
+      size: 10,
+      iconname: 'file-alt',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D01',
+      count: false,
+      countValue: 0,
+    },
+  ];
+
+  // UseEffect for backhandler
+  useEffect(() => {
+    const backAction = () => {
+      if (invoiceData?.EditStatus) {
+        setBackHandler(true);
+        return true; // Block default back action
+      }
+      return false; // Allow default back action
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction
+    );
+
+    // Cleanup on unmount
+    return () => backHandler.remove();
+  }, [invoiceData]);
+
+  // useEffect for API call
+  useEffect(() => {
+    getData();
+  }, []);
+
+  // Function for fetch data from API
+  function getData() {
+    setIsLoading(true);
+    let buttonapi = `${APIURL}invget/invcommonget/rnintrworkorderdetail ${workOrder.insuworkorder}`;
+    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', buttonapi);
+    NetworkServiceCall('get', buttonapi).then(function (response) {
+      if (response.httpstatus == 200) {
+        setInvoiceData(prevData => {
+          const updatedWorkOrder = prevData.workOrder.map((item, index) => {
+            if (index === orderIndex) {
+              return { ...item, details: response.data.data };
+            }
+            return item;
+          });
+
+          return {
+            ...prevData,
+            workOrder: updatedWorkOrder,
+            EditStatus: false,
+          };
+        });
+        setIsLoading(false);
+        // console.log(
+        //   'RESPONSEEEEEEEEEEE FROM CONSULTATTION22222222',
+        //   JSON.stringify(response.data.data),
+        // );
+      } else {
+        notifyMessage('Data Not Found.....');
+        setIsLoading(false);
+      }
+    });
+    // getLoading(v => setIsLoading(false));
+  }
+
+  // Function for handle data change
+  function hanldeDataChange(workOrderIndex, value, field) {
+    // Clone the workOrder data to ensure immutability
+    const updatedWorkOrders = [...invoiceData.workOrder];
+
+    // Update the object at the specified index
+    updatedWorkOrders[workOrderIndex] = {
+      ...updatedWorkOrders[workOrderIndex],
+      [field]: value, // Dynamically update the specific field with the new value
+    };
+
+    // Update the state with the modified workOrder data
+    setInvoiceData(prevState => ({
+      ...prevState,
+      workOrder: updatedWorkOrders,
+      EditStatus: true, // Mark edit status as true indicating a change has occurred
+    }));
+  }
+
+  // Function for handle work order details data change
+  function handleWorkOrderDetailDataChange(
+    workOrderIndex,
+    detailIndex,
+    value,
+    field,
+  ) {
+    // 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];
+
+    // Update the specific detail at detailIndex in the details array
+    updatedDetails[detailIndex] = {
+      ...updatedDetails[detailIndex],
+      [field]: value,
+    };
+
+    // 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,
+    }));
+  }
+
+  // Function for handle dropdown data change
+  function hanldeWorkOrderDropdownDataChange(
+    workOrderIndex,
+    value,
+    datavalue,
+    displayvalue,
+  ) {
+    // Clone the workOrder data to ensure immutability
+    const updatedWorkOrders = [...invoiceData.workOrder];
+
+    // Update the object at the specified index
+    updatedWorkOrders[workOrderIndex] = {
+      ...updatedWorkOrders[workOrderIndex],
+      [datavalue]: value.datavalue,
+      [displayvalue]: value.displayvalue,
+    };
+
+    // Update the state with the modified workOrder data
+    setInvoiceData(prevState => ({
+      ...prevState,
+      workOrder: updatedWorkOrders,
+      EditStatus: true, // Mark edit status as true indicating a change has occurred
+    }));
+  }
+
+  // Function for handle work order details dropdown data change
+  function handleWorkOrderDetailDropdownDataChange(
+    workOrderIndex,
+    detailIndex,
+    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];
+
+    // Update the specific detail based on detailIndex
+    updatedDetails[detailIndex] = {
+      ...updatedDetails[detailIndex],
+      [datavalue]: value.datavalue,
+      [displayvalue]: value.displayvalue,
+    };
+
+    // 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,
+    }));
+  }
+
+  // Save function
+  function getFooterFunctions(params) {
+    // Prepare data for saving
+    var groups = {
+      option: 'rnintrworkorder1',
+      userdata: Global.userData,
+      workOrder: invoiceData.workOrder[orderIndex],
+    };
+    var dataset = { groups };
+
+    console.log(
+      '------------------SAVE----------------------------',
+      JSON.stringify(dataset),
+    );
+
+    if (groups.workOrder != undefined) {
+      let buttonapi = `${APIURL}invsave/FlCommonSave`;
+      setLoading(true);
+      NetworkServiceCall('post', buttonapi, dataset).then(function (response) {
+        if (response.httpstatus == 200) {
+          notifyMessage('Data Saved!!!!!');
+          setInvoiceData(prevData => ({
+            workOrder: [],
+            EditStatus: false,
+            EquipmentUpdate: false,
+          }));
+          setLoading(false);
+          setTimeout(() => {
+            navigation.goBack();
+          }, 100);
+        } else {
+          notifyMessage('Data Not Saved!!!!! Network Error');
+          setLoading(false);
+        }
+      });
+    } else {
+      notifyMessage('No data to save');
+    }
+    getLoading(v => setLoading(false));
+  }
+
+  function handleToggleExpand(index) {
+    // Clone the data and update the specific index
+    const updatedData = [...invoiceData.verification];
+
+    // Toggle the 'expand' property of the specific section (index)
+    updatedData[index] = {
+      ...updatedData[index],
+      expand: !updatedData[index].expand,
+    };
+
+    // Update the state with the modified data
+    setInvoiceData(prevState => ({
+      ...prevState,
+      verification: updatedData,
+    }));
+  }
+
+  // Json for pdf unsaved viewr
+  function getDataForPreview(invoiceData) {
+    let jsondata = {
+      groups: {
+        userdata: Global.userData,
+        verification: invoiceData?.verification?.map(item => ({
+          ...item,
+          currentreportbuttonapi: '',
+        })),
+      },
+    };
+
+    return jsondata;
+  }
+
+  // Function for get arguments HOverlay
+  function getArguments(overlayComponent, rawMaterial, detailIndex) {
+    if (overlayComponent == 'RawMaterial') {
+      return {
+        argument: rawMaterial,
+        workOrderIndex: orderIndex,
+        detailIndex: detailIndex,
+      };
+    } else if (overlayComponent == 'EquipmentPage') {
+      return {
+        argument: workOrder.insuworkorder,
+        workOrderIndex: orderIndex,
+        detailIndex: detailIndex,
+      };
+    } else if (overlayComponent == 'ByProductPage') {
+      return {
+        argument: workOrder.insuworkorder,
+        workOrderIndex: orderIndex,
+        detailIndex: detailIndex,
+      };
+    } else if (overlayComponent == 'StageByProduct') {
+      return {
+        argument: workOrder.insuworkorder,
+        workOrderIndex: orderIndex,
+        detailIndex: detailIndex,
+      };
+    }
+  }
+
+  return (
+    <CContainerView>
+      <HeaderBlock
+        navigation={navigation}
+        callback={val => {
+          invoiceData.EditStatus ? setBackHandler(true) : navigation.goBack();
+        }}
+      />
+      <CDetailView>
+        {isLoading ? (
+          <View
+            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Loader />
+          </View>
+        ) : (
+          <ScrollView
+            style={
+              {
+                // flex: 1,
+                // marginVertical: normalize(9),
+                // marginTop: normalize(10),
+                // paddingHorizontal: normalize(8),
+                // alignSelf: 'center',
+                // width: Dimensions.get('screen').width * 0.99,
+              }
+            }>
+            {/* Container for the page title */}
+            <View style={{ marginBottom: normalize(5) }}>
+              <HHeading
+                styles={{
+                  iconname: 'file-invoice',
+                  bgcolor: '#f2efef',
+                  iconsize: 14,
+                  iconcolor: Global.AppTheme.primary_color,
+                  displaytext: workOrder.workordername,
+                  textsize: 13,
+                  textcolor: Global.AppTheme.primary_color,
+                }}
+                callBack={val =>
+                  val == undefined ? null : console.log(val)
+                } />
+            </View>
+            {invoiceData?.workOrder != undefined &&
+              invoiceData?.workOrder?.length != 0 ? (
+              <View
+                style={{
+                  flex: 1,
+                  paddingHorizontal: normalize(8),
+                  alignSelf: 'center',
+                  width: Dimensions.get('screen').width * 0.99,
+                }}>
+                {/* 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(17),
+                        fontWeight: 'bold',
+                        color: '#094485',
+                      }}>
+                      {workOrder.workordername}
+                    </Text>
+
+                    <View>
+                      <Text>{workOrder.productname}</Text>
+                    </View>
+                  </View> */}
+
+                <View>
+                  <Text style={{ fontSize: normalize(12) }}>
+                    {workOrder.productname}
+                  </Text>
+                </View>
+
+                {/* Product details section */}
+                <View>
+                  {/* <Text
+                    style={{
+                      fontSize:normalize(11)
+                    }}>Request #${workOrder.requestno} | Ref #
+                          ${workOrder.intrworkorderrequest} | Entered By:
+                          ${workOrder.username} | On:${workOrder.entrydate}</Text> */}
+                  {/* <CTextHeader
+                      text={workOrder.productname}
+                      widthArr={Dimensions.get('screen').width * 99}
+                      bgColor={'rgba(184, 184, 191,0.3)'}
+                      color={'#094485'}
+                      borderColor={'white'}
+                      marginHorizontal={normalize(2)}
+                      borderRadius={5}
+                      elevation={0}
+                    /> */}
+
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                    }}>
+                    {/* Quantity */}
+                    <View>
+                      <CTextHeader
+                        text={'Quantity'}
+                        widthArr={Dimensions.get('screen').width * 0.2}
+                        bgColor={'rgba(184, 184, 191,0.3)'}
+                        color={'#094485'}
+                        borderColor={'#f5f5f5'}
+                        marginHorizontal={normalize(2)}
+                        borderRadius={5}
+                        elevation={0}
+                      />
+                      <STextInputNew
+                        data={{
+                          borderWidth: 1,
+                          value: workOrder.requestedquantity || '',
+                          // backgroundColor: 'rgba(161, 188, 196,0.2)',
+                          borderColor: 'lightgrey',
+                          elevation: 0,
+                          borderRadius: 5,
+                          fontWeight: 'normal',
+                          color: 'black',
+                          itemwidth: Dimensions.get('screen').width * 0.2,
+                          paddingTop: 5,
+                          paddingBottom: 5,
+                          height: Dimensions.get('screen').height * 0.05,
+                          textAlign: 'start',
+                          marginTop: normalize(2),
+                          marginHorizontal: normalize(2),
+                          fontSize: normalize(12),
+                        }}
+                        keyboardType={'numeric'}
+                        callBack={val => {
+                          hanldeDataChange(
+                            orderIndex,
+                            val,
+                            'requestedquantity',
+                          );
+                        }}
+                      />
+                    </View>
+
+                    {/* Unit */}
+                    <View>
+                      <CTextHeader
+                        text={'Unit'}
+                        widthArr={Dimensions.get('screen').width * 0.2}
+                        bgColor={'rgba(184, 184, 191,0.3)'}
+                        color={'#094485'}
+                        borderColor={'#f5f5f5'}
+                        marginHorizontal={normalize(2)}
+                        borderRadius={5}
+                        elevation={0}
+                      />
+                      <SDropDownNew
+                        widthArr={Dimensions.get('screen').width * 0.2}
+                        heightArr={Dimensions.get('screen').height * 0.051}
+                        dropdowndata={workOrder.unitname}
+                        fontSize={normalize(12)}
+                        fontWeight={'normal'}
+                        onChangeData={val => {
+                          hanldeWorkOrderDropdownDataChange(
+                            orderIndex,
+                            val,
+                            'insuunit',
+                            'unitname',
+                          );
+                        }}
+                        editable={false}
+                        dropdownarray={workOrder.dropdowndata}
+                        refreshCount={val =>
+                          // val == undefined ? setRefresh(refresh + 1) : null
+                          console.log(val)
+                        }
+                      />
+                    </View>
+
+                    {/* Amount */}
+                    <View>
+                      <CTextHeader
+                        text={'Amount'}
+                        widthArr={Dimensions.get('screen').width * 0.2}
+                        bgColor={'rgba(184, 184, 191,0.3)'}
+                        color={'#094485'}
+                        borderColor={'#f5f5f5'}
+                        marginHorizontal={normalize(2)}
+                        borderRadius={5}
+                        elevation={0}
+                      />
+                      <STextInputNew
+                        data={{
+                          borderWidth: 1,
+                          value: workOrder.totalamount || '',
+                          // backgroundColor: 'rgba(161, 188, 196,0.2)',
+                          borderColor: 'lightgrey',
+                          elevation: 0,
+                          borderRadius: 5,
+                          fontWeight: 'normal',
+                          color: 'black',
+                          itemwidth: Dimensions.get('screen').width * 0.2,
+                          paddingTop: 5,
+                          paddingBottom: 5,
+                          height: Dimensions.get('screen').height * 0.05,
+                          textAlign: 'start',
+                          marginTop: normalize(2),
+                          marginHorizontal: normalize(2),
+                          fontSize: normalize(12),
+                        }}
+                        keyboardType={'numeric'}
+                        callBack={val => {
+                          hanldeDataChange(orderIndex, val, 'totalamount');
+                        }}
+                      />
+                    </View>
+                  </View>
+                </View>
+                {/* <View
+                    style={{
+                      borderBottomColor: '#094485',
+                      borderBottomWidth: 0.5,
+                      marginVertical: normalize(6),
+                    }}
+                  /> */}
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    paddingHorizontal: 5,
+                    marginVertical: normalize(10),
+                  }}>
+                  {ButtonsArray != undefined
+                    ? ButtonsArray.map((item, i) => {
+                      return item.visibility ? (
+                        <View key={i} style={{ marginLeft: 5 }}>
+                          {/* <CustomButton
+                              data={{
+                                ...item,
+                                shadowcolor: '#fff',
+                                iconcolor: '#094485',
+                                fontcolor: '#094485',
+                              }}
+                              callBack={val => {
+                                if (val.keyid === 3) {
+                                  setOverlayComponent('RawMaterial');
+                                  setTimeout(() => {
+                                    setOverlay(true);
+                                  }, 0);
+                                } else if (val.keyid === 4) {
+                                  setOverlayComponent('EquipmentPage');
+                                  setTimeout(() => {
+                                    setOverlay(true);
+                                  }, 0);
+                                } else if (val.keyid === 5) {
+                                  setOverlayComponent('ByProductPage');
+                                  setTimeout(() => {
+                                    setOverlay(true);
+                                  }, 0);
+                                } else if (val.keyid === 6) {
+                                  setOverlayComponent('StageByProduct');
+                                  setTimeout(() => {
+                                    setOverlay(true);
+                                  }, 0);
+                                }
+                              }}
+                            /> */}
+                          <HShadowCountButton
+                            useicon={true}
+                            usetext={true}
+                            disabled={false}
+                            buttonstyle={{
+                              ...CButtonShadow(),
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              borderWidth: 1,
+                              borderColor: 'lightblue',
+                              borderRadius: 10,
+                              height: Dimensions.get('screen').height * 0.055,
+                              width: Dimensions.get('screen').height * 0.065,
+                              marginVertical: normalize(0),
+                              marginHorizontal: normalize(5),
+                            }}
+                            iconcolor={Global.AppTheme.primary_color}
+                            icongroup={item.icongroup ? item.icongroup : 5}
+                            iconname={item.iconname}
+                            iconsize={normalize(24)}
+                            displaytext={item.displaytext}
+                            count={item.count}
+                            countValue={item.countValue}
+                            buttonCallback={() => {
+                              if (item.keyid === 3) {
+                                setOverlayComponent('RawMaterial');
+                                setTimeout(() => {
+                                  setOverlay(true);
+                                }, 0);
+                              } else if (item.keyid === 4) {
+                                setOverlayComponent('EquipmentPage');
+                                setTimeout(() => {
+                                  setOverlay(true);
+                                }, 0);
+                              } else if (item.keyid === 5) {
+                                setOverlayComponent('ByProductPage');
+                                setTimeout(() => {
+                                  setOverlay(true);
+                                }, 0);
+                              } else if (item.keyid === 6) {
+                                setOverlayComponent('StageByProduct');
+                                setTimeout(() => {
+                                  setOverlay(true);
+                                }, 0);
+                              }
+                            }}
+                            textstyle={{
+                              color: Global.AppTheme.primary_color,
+                              fontSize: normalize(9),
+                              textAlign: 'center',
+                              alignSelf: 'center',
+                            }}
+                          />
+                        </View>
+                      ) : null;
+                    })
+                    : null}
+                </View>
+                {/* <View
+                    style={{
+                      borderBottomColor: '#094485',
+                      borderBottomWidth: 0.5,
+                      marginVertical: normalize(6),
+                    }}
+                  /> */}
+
+                {/* Preperation section */}
+                {workOrder.details != undefined
+                  ? workOrder.details.map((wodetail, index) => (
+                    <View key={index}>
+                      {/* Stage */}
+                      <View
+                        style={{
+                          borderWidth: 0,
+                          justifyContent: 'center',
+                          alignItems: 'flex-start',
+                          marginTop: normalize(5),
+                          marginVertical: normalize(5),
+                          alignSelf: 'flex-start',
+                        }}>
+                        {/* <Text
+                            style={{
+                              fontSize: normalize(15),
+                              fontWeight: 'bold',
+                              color: '#094485',
+                            }}>
+                            {wodetail.stagename}
+                          </Text> */}
+                        <View style={{ marginBottom: normalize(5) }}>
+                          <HHeading
+                            styles={{
+                              iconname: 'file-invoice',
+                              bgcolor: '#f2efef',
+                              iconsize: 14,
+                              iconcolor: Global.AppTheme.primary_color,
+                              displaytext: wodetail.stagename,
+                              textsize: 13,
+                              textcolor: Global.AppTheme.primary_color,
+                            }}
+                            callBack={val =>
+                              val == undefined ? null : console.log(val)
+                            } />
+                        </View>
+
+                        <View>
+                          <Text style={{ fontSize: normalize(12) }}>
+                            {wodetail.productname}
+                          </Text>
+                        </View>
+                      </View>
+                      <ScrollView
+                        horizontal={true}
+                        style={{
+                          marginVertical: normalize(3),
+                        }}>
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                          }}>
+                          {/* Status */}
+                          <View>
+                            <CTextHeader
+                              text={'Status'}
+                              widthArr={Dimensions.get('screen').width * 0.25}
+                              bgColor={'rgba(184, 184, 191,0.3)'}
+                              color={'#094485'}
+                              borderColor={'#f5f5f5'}
+                              marginHorizontal={normalize(2)}
+                              borderRadius={5}
+                              elevation={0}
+                            />
+                            <SDropDownNew
+                              widthArr={Dimensions.get('screen').width * 0.25}
+                              heightArr={
+                                Dimensions.get('screen').height * 0.051
+                              }
+                              fontSize={normalize(12)}
+                              fontWeight={'normal'}
+                              dropdowndata={wodetail.statusname}
+                              onChangeData={val => {
+                                handleWorkOrderDetailDropdownDataChange(
+                                  orderIndex,
+                                  index,
+                                  val,
+                                  'hrsustatus',
+                                  'statusname',
+                                );
+                              }}
+                              editable={false}
+                              dropdownarray={wodetail.dropdownstatusdata}
+                              refreshCount={val =>
+                                // val == undefined ? setRefresh(refresh + 1) : null
+                                console.log(val)
+                              }
+                            />
+                          </View>
+
+                          {/* Priority */}
+                          <View>
+                            <CTextHeader
+                              text={'Priority'}
+                              widthArr={Dimensions.get('screen').width * 0.2}
+                              bgColor={'rgba(184, 184, 191,0.3)'}
+                              color={'#094485'}
+                              borderColor={'#f5f5f5'}
+                              marginHorizontal={normalize(2)}
+                              borderRadius={5}
+                              elevation={0}
+                            />
+                            <STextInputNew
+                              data={{
+                                borderWidth: 1,
+                                value: wodetail.orderofprecedence || 0,
+                                // backgroundColor: 'rgba(161, 188, 196,0.2)',
+                                borderColor: 'lightgrey',
+                                elevation: 0,
+                                borderRadius: 5,
+                                fontWeight: 'normal',
+                                color: 'black',
+                                itemwidth:
+                                  Dimensions.get('screen').width * 0.2,
+                                paddingTop: 5,
+                                paddingBottom: 5,
+                                height:
+                                  Dimensions.get('screen').height * 0.05,
+                                textAlign: 'start',
+                                marginTop: normalize(2),
+                                marginHorizontal: normalize(2),
+                                fontSize: normalize(12),
+                              }}
+                              keyboardType={'numeric'}
+                              callBack={val => {
+                                handleWorkOrderDetailDataChange(
+                                  orderIndex,
+                                  index,
+                                  val,
+                                  'orderofprecedence',
+                                );
+                              }}
+                            />
+                          </View>
+
+                          {/* Location */}
+                          <View>
+                            <CTextHeader
+                              text={'Location'}
+                              widthArr={Dimensions.get('screen').width * 0.25}
+                              bgColor={'rgba(184, 184, 191,0.3)'}
+                              color={'#094485'}
+                              borderColor={'#f5f5f5'}
+                              marginHorizontal={normalize(2)}
+                              borderRadius={5}
+                              elevation={0}
+                            />
+                            {console.log(
+                              'location',
+                              wodetail.locationdropdowndata,
+                            )}
+                            <SDropDownNew
+                              widthArr={Dimensions.get('screen').width * 0.25}
+                              heightArr={
+                                Dimensions.get('screen').height * 0.051
+                              }
+                              fontSize={normalize(12)}
+                              fontWeight={'normal'}
+                              dropdowndata={wodetail.locationname}
+                              onChangeData={val => {
+                                console.log(val);
+                                handleWorkOrderDetailDropdownDataChange(
+                                  orderIndex,
+                                  index,
+                                  val,
+                                  'sulocation',
+                                  'locationname',
+                                );
+                              }}
+                              editable={false}
+                              dropdownarray={wodetail.locationdropdowndata}
+                              refreshCount={val =>
+                                // val == undefined ? setRefresh(refresh + 1) : null
+                                console.log(val)
+                              }
+                            />
+                          </View>
+
+                          {/* Quantity */}
+                          <View>
+                            <CTextHeader
+                              text={'Quantity'}
+                              widthArr={Dimensions.get('screen').width * 0.2}
+                              bgColor={'rgba(184, 184, 191,0.3)'}
+                              color={'#094485'}
+                              borderColor={'#f5f5f5'}
+                              marginHorizontal={normalize(2)}
+                              borderRadius={5}
+                              elevation={0}
+                            />
+                            <STextInputNew
+                              data={{
+                                borderWidth: 1,
+                                value: wodetail.quantity || '',
+                                // backgroundColor: 'rgba(161, 188, 196,0.2)',
+                                borderColor: 'lightgrey',
+                                elevation: 0,
+                                borderRadius: 5,
+                                fontWeight: 'normal',
+                                color: 'black',
+                                itemwidth:
+                                  Dimensions.get('screen').width * 0.2,
+                                paddingTop: 5,
+                                paddingBottom: 5,
+                                height:
+                                  Dimensions.get('screen').height * 0.05,
+                                textAlign: 'start',
+                                marginTop: normalize(2),
+                                marginHorizontal: normalize(2),
+                                fontSize: normalize(12),
+                              }}
+                              keyboardType={'numeric'}
+                              callBack={val => {
+                                handleWorkOrderDetailDataChange(
+                                  orderIndex,
+                                  index,
+                                  val,
+                                  'quantity',
+                                );
+                              }}
+                            />
+                          </View>
+
+                          {/* Unit */}
+                          <View>
+                            <CTextHeader
+                              text={'Unit'}
+                              widthArr={Dimensions.get('screen').width * 0.2}
+                              bgColor={'rgba(184, 184, 191,0.3)'}
+                              color={'#094485'}
+                              borderColor={'#f5f5f5'}
+                              marginHorizontal={normalize(2)}
+                              borderRadius={5}
+                              elevation={0}
+                            />
+                            <SDropDownNew
+                              widthArr={Dimensions.get('screen').width * 0.2}
+                              heightArr={
+                                Dimensions.get('screen').height * 0.051
+                              }
+                              fontSize={normalize(12)}
+                              fontWeight={'normal'}
+                              dropdowndata={wodetail.unitname}
+                              onChangeData={val => {
+                                handleWorkOrderDetailDropdownDataChange(
+                                  orderIndex,
+                                  index,
+                                  val,
+                                  'insuunit',
+                                  'unitname',
+                                );
+                              }}
+                              editable={false}
+                              dropdownarray={wodetail.dropdowndata}
+                              refreshCount={val =>
+                                // val == undefined ? setRefresh(refresh + 1) : null
+                                console.log(val)
+                              }
+                            />
+                          </View>
+
+                          {/* Amount */}
+                          <View>
+                            <CTextHeader
+                              text={'Amount'}
+                              widthArr={Dimensions.get('screen').width * 0.2}
+                              bgColor={'rgba(184, 184, 191,0.3)'}
+                              color={'#094485'}
+                              borderColor={'#f5f5f5'}
+                              marginHorizontal={normalize(2)}
+                              borderRadius={5}
+                              elevation={0}
+                            />
+                            <STextInputNew
+                              data={{
+                                borderWidth: 1,
+                                value:
+                                  wodetail.amountperqty * wodetail.quantity ||
+                                  0,
+                                // backgroundColor: 'rgba(161, 188, 196,0.2)',
+                                borderColor: 'lightgrey',
+                                elevation: 0,
+                                borderRadius: 5,
+                                fontWeight: 'normal',
+                                color: 'black',
+                                itemwidth:
+                                  Dimensions.get('screen').width * 0.2,
+                                paddingTop: 5,
+                                paddingBottom: 5,
+                                height:
+                                  Dimensions.get('screen').height * 0.05,
+                                textAlign: 'start',
+                                marginTop: normalize(2),
+                                marginHorizontal: normalize(2),
+                                fontSize: normalize(12),
+                              }}
+                              editable={false}
+                              keyboardType={'numeric'}
+                              callBack={val => {
+                                console.log(val);
+                                // hanldeDataChange(
+                                //   orderIndex,
+                                //   val,
+                                //   'totalamount',
+                                // );
+                              }}
+                            />
+                          </View>
+                        </View>
+                      </ScrollView>
+                      {overlay ? (
+                        <HOverlay
+                          component={overlayComponent}
+                          visibility={val =>
+                            val == undefined ? null : setOverlay(val)
+                          }
+                          argument={getArguments(
+                            overlayComponent,
+                            wodetail.insuworkorderdetail,
+                            index,
+                          )}
+                        />
+                      ) : null}
+                    </View>
+                  ))
+                  : null}
+              </View>
+            ) : null}
+          </ScrollView>
+        )}
+
+        {backHandler ? (
+          <ConfirmOverlay
+            confirmtext={'Are your sure you want to exit without save ?'}
+            navigation={navigation}
+            saveHandler={val => (val == undefined ? null : setBackHandler(val))}
+            callback={val => {
+              if (val === true) {
+                // setEditStatus(false);
+                setInvoiceData(prevData => ({
+                  ...prevData,
+                  EditStatus: false,
+                  EquipmentUpdate: false,
+                }));
+                setTimeout(() => {
+                  navigation.goBack();
+                }, 0);
+              }
+            }}
+          />
+        ) : null}
+      </CDetailView>
+      <CFooterView style={{ backgroundColor: '#fff' }}>
+        {/* Bottom buttons section */}
+        {FooterArr != undefined
+          ? FooterArr.map((item, i) => {
+            return item.visibility ? (
+              // <View key={i} style={{marginLeft: 5}}>
+              //   <CustomButton
+              //     data={{
+              //       ...item,
+              //       shadowcolor: '#fff',
+              //       iconcolor: '#094485',
+              //       fontcolor: '#094485',
+              //     }}
+              //     callBack={val => {
+              //       if (val.keyid === 1) {
+              //         val == undefined ? null : getFooterFunctions(val);
+              //       } else if (val.keyid === 2) {
+              //         navigation.navigate('PdfUnSavedViewer', {
+              //           headerblockstyle: {marginBottom: normalize(35)},
+              //           data: getDataForPreview(invoiceData),
+              //           link:
+              //             APIURL +
+              //             'jremr/jrcommonjreport/' +
+              //             'rnintrverificationpreview/0/IndentPreview',
+              //         });
+              //       }
+              //     }}
+              //   />
+              // </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'flex-start',
+                  paddingHorizontal: 2,
+                }}>
+                {FooterArr != undefined
+                  ? FooterArr.map((item, i) => {
+                    return item.visibility ? (
+                      <HShadowCountButton
+                        useicon={true}
+                        usetext={true}
+                        disabled={false}
+                        buttonstyle={{
+                          ...CButtonShadow(),
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          borderWidth: 1,
+                          borderColor: 'lightblue',
+                          borderRadius: 10,
+                          height: Dimensions.get('screen').height * 0.055,
+                          width: Dimensions.get('screen').height * 0.065,
+                          marginVertical: normalize(5),
+                          marginHorizontal: normalize(5),
+                        }}
+                        iconcolor={Global.AppTheme.primary_color}
+                        icongroup={item.icongroup ? item.icongroup : 5}
+                        iconname={item.iconname}
+                        iconsize={normalize(24)}
+                        displaytext={item.displaytext}
+                        count={item.count}
+                        countValue={item.countValue}
+                        buttonCallback={() => {
+                          if (item.keyid === 1) {
+                            val == undefined ? null : getFooterFunctions(val);
+                          } else if (item.keyid === 2) {
+                            navigation.navigate('PdfUnSavedViewer', {
+                              headerblockstyle: { marginBottom: normalize(35) },
+                              data: getDataForPreview(invoiceData),
+                              link:
+                                APIURL +
+                                'jremr/jrcommonjreport/' +
+                                'rnintrverificationpreview/0/IndentPreview',
+                            });
+                          }
+                          // if (item.keyid === 1) {
+                          //   item == undefined
+                          //     ? null
+                          //     : getFooterFunctions(item);
+                          // } else if (item.keyid === 2) {
+                          //   navigation.navigate('PdfUnSavedViewer', {
+                          //     headerblockstyle: {
+                          //       marginBottom: normalize(35),
+                          //     },
+                          //     data: getDataForPreview(invoiceData),
+                          //     link:
+                          //       APIURL +
+                          //       'jremr/jrcommonjreport/' +
+                          //       'rnintrverificationpreview/0/Procurement',
+                          //   });
+                          // }
+                        }}
+                        textstyle={{
+                          color: Global.AppTheme.primary_color,
+                          fontSize: normalize(9),
+                          textAlign: 'center',
+                          alignSelf: 'center',
+                        }}
+                      />
+                    ) : null;
+                  })
+                  : null}
+              </View>
+            ) : null;
+          })
+          : null}
+      </CFooterView>
+    </CContainerView>
+  );
+}