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

package/src/Components/ProductCard.js

@@ -0,0 +1,1336 @@
+import { View, Text, Dimensions, TouchableOpacity, FlatList } from 'react-native';
+import React, { useCallback, useContext, useEffect, useState, useMemo } from 'react';
+import ContextBio from '../ContextAPI/ContextBio';
+import { normalize } from '../CommonStyle/componentStyle';
+import { useNavigation } from '../Navigation/useNavigation';
+
+//gggggggggggggggggggggggggggggggggggg
+import CTextHeader from '../Custom/TableComponent/CTextHeader';
+import { ScrollView, TouchableWithoutFeedback } from 'react-native';
+import SDropDownNew from '../Components/SDropDownNew';
+
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import {
+  CButtonShadow,
+  isNUQ,
+  notifyMessage,
+} from '../CommonStyle/ComponentFunctions';
+import SCheckBox from '../StaticComponents/SCheckBox';
+import SOverlay from '../StaticComponents/SOverlay';
+import { Global } from '../../../../../src/Common/Global';
+import STextInputNew from './STextInputNew';
+import { SwipeRow } from 'react-native-swipe-list-view';
+import HOCIcons from '../HOC/HOCIcons';
+
+const BatchRow = ({
+  batchdata,
+  idx,
+  sectionIndex,
+  productIndex,
+  orderIndex,
+  verifyData,
+  updateData,
+  supplierdata,
+  productdata,
+  item,
+  onBatchUpdate,
+  onBatchDelete,
+  onNavigation,
+  onMediaUpdate,
+  onBatchVerify,
+  onFreeQuantityUpdate,
+}) => {
+  const { setSearchSelect } = useContext(ContextBio);
+  const navigation = useNavigation();
+  const [recievedQuantity, setRecievedQuantity] = useState(batchdata.quantity || 0);
+  const [FilesData, setFilesData] = useState({
+    savedaudio: [],
+    saveddoc: [],
+    savedimages: [],
+    savedvideo: [],
+    savedpdf: [],
+  });
+
+  // Update local state when batchdata changes
+  useEffect(() => {
+    setRecievedQuantity(batchdata.quantity || 0);
+  }, [batchdata.quantity]);
+
+  const handleQuantityChange = (val) => {
+    const numVal = Number(val);
+    setRecievedQuantity(numVal);
+    onBatchUpdate('quantity', sectionIndex, productIndex, orderIndex, idx, numVal);
+  };
+
+  const handleFreeQuantityChange = (val) => {
+    onFreeQuantityUpdate(sectionIndex, productIndex, orderIndex, idx, val);
+  };
+
+  const handleBatchNameChange = (val) => {
+    onBatchUpdate('batchname', sectionIndex, productIndex, orderIndex, idx, val.replace(/\s/g, ''));
+  };
+
+  const handlePackingChange = (val) => {
+    onBatchUpdate('packing', sectionIndex, productIndex, orderIndex, idx, val);
+  };
+
+  const handleVerifyChange = (val) => {
+    onBatchVerify(sectionIndex, productIndex, orderIndex, idx, val);
+  };
+
+  const handleMediaChange = (val) => {
+    setFilesData(val);
+    onMediaUpdate(sectionIndex, productIndex, orderIndex, idx, val);
+  };
+
+  const handleDelete = () => {
+    onBatchDelete(sectionIndex, productIndex, orderIndex, idx);
+  };
+
+  const handleNavigation = () => {
+    if (!(updateData === true && batchdata.flag === 3)) {
+      onNavigation(false, batchdata.batchname, batchdata.batchcode, item.productname, orderIndex, idx);
+    }
+  };
+
+  const getLength = (params) => {
+    if (!Array.isArray(params) || params.length === 0) {
+      return 0;
+    }
+
+    const lastItem = params[params.length - 1];
+    if (lastItem?.insuproductfree === 0 || lastItem?.insuproductfree === '') {
+      return params.length - 1;
+    }
+
+    return params.length;
+  };
+
+  const isEditable = !(verifyData === true || (updateData === true && batchdata.flag === 3));
+
+  const freeProductsCount = getLength(batchdata.productquantityentry);
+  const totalQuantity = Number(batchdata?.totalquantity) || 0;
+
+  const packingQuantity = batchdata.packingquantity != undefined &&
+    batchdata.packingquantity != null &&
+    batchdata.packingquantity != '' &&
+    !isNaN(batchdata.packingquantity)
+    ? Number(batchdata.packingquantity).toFixed(0)
+    : '';
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        marginTop: normalize(1.5),
+        backgroundColor: 'white',
+      }}>
+      {verifyData !== true && updateData === true && batchdata.flag === 3 && (
+        <View
+          style={{
+            height: 1,
+            backgroundColor: 'red',
+            width: '100%',
+            marginVertical: 10,
+            position: 'absolute',
+            zIndex: 999,
+            top: 12,
+          }}
+        />
+      )}
+
+      {/* Delete Column */}
+      <View>
+        {verifyData !== true && (
+          <CTextHeader
+            text={''}
+            widthArr={Dimensions.get('screen').width * 0.036}
+            bgColor={'rgba(184, 184, 191,0.3)'}
+            color={'#094485'}
+            borderColor={'white'}
+            marginHorizontal={normalize(2)}
+            borderRadius={5}
+            elevation={0}
+          />
+        )}
+        {verifyData !== true && (
+          <TouchableOpacity
+            style={{
+              elevation: 0,
+              borderRadius: 5,
+              fontWeight: 'bold',
+              color: 'black',
+              width: Dimensions.get('screen').width * 0.036,
+              paddingTop: 5,
+              paddingBottom: 5,
+              height: Dimensions.get('screen').height * 0.055,
+              textAlign: 'center',
+              marginTop: normalize(2),
+              marginHorizontal: normalize(3),
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+            onPress={handleDelete}>
+            <Icons.FontAwesome5
+              name="trash"
+              color="#094485"
+              size={normalize(13)}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Batch Name */}
+      <View>
+        <CTextHeader
+          text={'BATCH'}
+          fontSize={10}
+          text2={verifyData !== true ? '*' : ''}
+          color2={verifyData !== true ? 'red' : ''}
+          fontSize2={11}
+          widthArr={Dimensions.get('screen').width * 0.26}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'lightgrey'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <STextInputNew
+          data={{
+            borderWidth: 1,
+            value: batchdata.batchname,
+            borderColor: 'lightgrey',
+            elevation: 0,
+            borderRadius: 5,
+            fontWeight: 'bold',
+            color: 'black',
+            itemwidth: Dimensions.get('screen').width * 0.26,
+            paddingTop: 5,
+            paddingBottom: 5,
+            height: Dimensions.get('screen').height * 0.054,
+            textAlign: 'center',
+            marginTop: normalize(2),
+            marginHorizontal: normalize(2),
+            editable: verifyData === true ? false : isEditable,
+          }}
+          callBack={handleBatchNameChange}
+        />
+      </View>
+
+      {/* Packing */}
+      <View>
+        <CTextHeader
+          text={'PACKING'}
+          fontSize={10}
+          text2={verifyData !== true ? '*' : ''}
+          color2={verifyData !== true ? 'red' : ''}
+          fontSize2={11}
+          widthArr={Dimensions.get('screen').width * 0.26}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'lightgrey'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <TouchableWithoutFeedback
+          onPress={() => {
+            if (verifyData !== true) {
+              setSearchSelect(3);
+            }
+          }}>
+          <SDropDownNew
+            fontSize={normalize(11)}
+            fontWeight={'bold'}
+            widthArr={Dimensions.get('screen').width * 0.26}
+            heightArr={Dimensions.get('screen').height * 0.056}
+            dropdowndata={
+              updateData === true
+                ? batchdata.packing
+                : batchdata.dropdowndata?.[0]?.displayvalue || batchdata.packing
+            }
+            dropdownapi={
+              'invget/invcommonget/rndddwdropdownselect 1,' +
+              22401 +
+              ',' +
+              Global.userData.susectiondetail +
+              ',' +
+              Global.userData.suuser +
+              ',' +
+              supplierdata.insusupplier +
+              ',' +
+              productdata.insuproduct +
+              ',1'
+            }
+            onChangeData={handlePackingChange}
+            editable={true}
+            disabled={!isEditable}
+            refreshCount={val =>
+              val == undefined
+                ? setRefresh(refresh + 1)
+                : null
+            }
+          />
+        </TouchableWithoutFeedback>
+      </View>
+
+      {/* Packing Quantity */}
+      <View>
+        <CTextHeader
+          text={'PACKING QUANTITY'}
+          fontSize={10}
+          widthArr={Dimensions.get('screen').width * 0.26}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'lightgrey'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <STextInputNew
+          data={{
+            borderWidth: 1,
+            borderColor: 'lightgrey',
+            elevation: 0,
+            borderRadius: 5,
+            fontWeight: 'bold',
+            color: 'black',
+            itemwidth: Dimensions.get('screen').width * 0.26,
+            paddingTop: 5,
+            paddingBottom: 5,
+            height: Dimensions.get('screen').height * 0.054,
+            textAlign: 'center',
+            marginTop: normalize(2),
+            marginHorizontal: normalize(2),
+            value: packingQuantity,
+            editable: false,
+          }}
+          fontWeight={'bold'}
+          fontSize={normalize(11)}
+        />
+      </View>
+
+      {/* Quantity */}
+      <View>
+        <CTextHeader
+          text={'QUANTITY'}
+          fontSize={10}
+          text2={verifyData !== true ? '*' : ''}
+          color2={verifyData !== true ? 'red' : ''}
+          fontSize2={11}
+          widthArr={Dimensions.get('screen').width * 0.26}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'lightgrey'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <STextInputNew
+          data={{
+            borderWidth: 1,
+            borderColor: 'lightgrey',
+            elevation: 0,
+            borderRadius: 5,
+            fontWeight: 'bold',
+            color: recievedQuantity > batchdata.orderquantity ? 'red' : 'black',
+            itemwidth: Dimensions.get('screen').width * 0.26,
+            paddingTop: 5,
+            paddingBottom: 5,
+            height: Dimensions.get('screen').height * 0.054,
+            textAlign: 'center',
+            marginTop: normalize(2),
+            marginHorizontal: normalize(2),
+            value: batchdata.quantity,
+            editable: isEditable,
+          }}
+          callBack={handleQuantityChange}
+          keyboardType={'numeric'}
+        />
+      </View>
+
+      {/* Total Quantity */}
+      <View>
+        <CTextHeader
+          text={'TOTAL QUANTITY'}
+          fontSize={10}
+          widthArr={Dimensions.get('screen').width * 0.26}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'lightgrey'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: 'lightgrey',
+            elevation: 0,
+            borderRadius: 5,
+            width: Dimensions.get('screen').width * 0.26,
+            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(11),
+            }}>
+            {totalQuantity}
+          </Text>
+        </View>
+      </View>
+
+      {/* Free Quantity */}
+      <View>
+        <CTextHeader
+          text={'FREE QUANTITY'}
+          fontSize={10}
+          widthArr={Dimensions.get('screen').width * 0.26}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'lightgrey'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <STextInputNew
+          data={{
+            borderWidth: 1,
+            borderColor: 'lightgrey',
+            elevation: 0,
+            borderRadius: 5,
+            fontWeight: 'bold',
+            color: 'black',
+            itemwidth: Dimensions.get('screen').width * 0.26,
+            paddingTop: 5,
+            paddingBottom: 5,
+            height: Dimensions.get('screen').height * 0.054,
+            textAlign: 'center',
+            marginTop: normalize(2),
+            marginHorizontal: normalize(2),
+            value: batchdata.freequantity,
+            editable: isEditable,
+          }}
+          callBack={handleFreeQuantityChange}
+          keyboardType={'numeric'}
+        />
+      </View>
+
+      {/* Media */}
+      <View>
+        <CTextHeader
+          text={'MEDIA'}
+          fontSize={10}
+          widthArr={Dimensions.get('screen').width * 0.26}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'lightgrey'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <View
+          style={{
+            width: Dimensions.get('screen').width * 0.26,
+            height: Dimensions.get('screen').height * 0.056,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderWidth: 1,
+            borderRadius: 5,
+            borderColor: 'lightgrey',
+          }}>
+          <TouchableOpacity
+            style={{ marginHorizontal: normalize(5) }}
+            onPress={() => {
+              navigation.navigate('FileExplorer', {
+                visibility: 0,
+                data: batchdata.media?.map(item => ({
+                  ...item,
+                  savedimages: item.savedimages ? item.savedimages.split(',') : [],
+                  savedvideo: item.savedvideo ? item.savedvideo.split(',') : [],
+                  savedaudio: item.savedaudio ? item.savedaudio.split(',') : [],
+                  savedpdf: item.savedpdf ? item.saveddoc.split(',') : [],
+                })) || [],
+                callBack: handleMediaChange,
+              });
+            }}>
+            <Icons.FontAwesome5
+              name="play"
+              color="#094485"
+              size={normalize(15)}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* Verify Checkbox */}
+      {verifyData === true && (
+        <View>
+          <CTextHeader
+            text={'VERIFY'}
+            widthArr={Dimensions.get('screen').width * 0.26}
+            bgColor={'rgba(184, 184, 191,0.3)'}
+            color={'#094485'}
+            borderColor={'lightgrey'}
+            marginHorizontal={normalize(2)}
+            borderRadius={5}
+            elevation={0}
+          />
+          <View
+            style={{
+              width: Dimensions.get('screen').width * 0.26,
+              height: Dimensions.get('screen').height * 0.056,
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderWidth: 1,
+              borderRadius: 5,
+              borderColor: 'lightgrey',
+            }}>
+            <SCheckBox
+              data={{
+                value: batchdata.batchverify,
+                size: 20,
+              }}
+              callBack={handleVerifyChange}
+            />
+          </View>
+        </View>
+      )}
+
+      {/* Free Products */}
+      <View>
+        <CTextHeader
+          text={''}
+          widthArr={Dimensions.get('screen').width * 0.3}
+          bgColor={'rgba(184, 184, 191,0.3)'}
+          color={'#094485'}
+          borderColor={'white'}
+          marginHorizontal={normalize(2)}
+          borderRadius={5}
+          elevation={0}
+        />
+        <View
+          style={{
+            borderWidth: 0,
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            height: Dimensions.get('screen').height * 0.056,
+          }}>
+          <TouchableOpacity
+            style={{ marginHorizontal: normalize(5) }}
+            onPress={handleNavigation}>
+            <View
+              style={{
+                position: 'absolute',
+                right: normalize(-5),
+                top: normalize(-10),
+                backgroundColor: 'white',
+                alignItems: 'center',
+                borderRadius: 20,
+                width: normalize(15),
+                borderWidth: 0.5,
+              }}>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: normalize(11),
+                  fontWeight: 'bold',
+                }}>
+                {freeProductsCount}
+              </Text>
+            </View>
+            <Icons.FontAwesome5
+              name="cart-arrow-down"
+              color="#094485"
+              size={normalize(15)}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const OrderSection = ({
+  productdata,
+  i,
+  sectionIndex,
+  productIndex,
+  verifyData,
+  updateData,
+  supplierdata,
+  item,
+  onProductNoteUpdate,
+  onOrderDelete,
+  onAddRow,
+  onBatchUpdate,
+  onBatchDelete,
+  onNavigation,
+  onMediaUpdate,
+  onBatchVerify,
+  onFreeQuantityUpdate,
+}) => {
+  const renderBatchItem = ({ item: batchdata, index }) => (
+    <BatchRow
+      batchdata={batchdata}
+      idx={index}
+      sectionIndex={sectionIndex}
+      productIndex={productIndex}
+      orderIndex={i}
+      verifyData={verifyData}
+      updateData={updateData}
+      supplierdata={supplierdata}
+      productdata={productdata}
+      item={item}
+      onBatchUpdate={onBatchUpdate}
+      onBatchDelete={onBatchDelete}
+      onNavigation={onNavigation}
+      onMediaUpdate={onMediaUpdate}
+      onBatchVerify={onBatchVerify}
+      onFreeQuantityUpdate={onFreeQuantityUpdate}
+    />
+  );
+
+  const batchKeyExtractor = (batch, index) =>
+    `${sectionIndex}-${productIndex}-${i}-${index}-${batch.batchcode || index}`;
+
+  return (
+    <View
+      key={i}
+      style={{
+        paddingHorizontal: normalize(5),
+        marginHorizontal: normalize(10),
+        marginBottom: normalize(10),
+      }}>
+      <View
+        style={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexDirection: 'row',
+        }}>
+        <Text
+          style={{
+            fontWeight: '500',
+            fontSize: normalize(10),
+            color: '#094485',
+            width: '70%',
+          }}>
+          ORDER DETAILS : {productdata.purchaseorderno}
+        </Text>
+
+        {verifyData !== true && (
+          <TouchableOpacity style={{ marginHorizontal: normalize(5) }}>
+            <SOverlay
+              size={16}
+              iconcolor={'#094485'}
+              value={''}
+              onChangeText={val => {
+                onProductNoteUpdate(sectionIndex, productIndex, i, val);
+              }}
+            />
+          </TouchableOpacity>
+        )}
+        {verifyData !== true && (
+          <TouchableOpacity
+            style={{
+              elevation: 0,
+              borderRadius: 5,
+              fontWeight: 'bold',
+              color: 'black',
+              width: Dimensions.get('screen').width * 0.036,
+              paddingTop: 5,
+              paddingBottom: 5,
+              height: Dimensions.get('screen').height * 0.055,
+              textAlign: 'center',
+              marginTop: normalize(2),
+              marginHorizontal: normalize(3),
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+            onPress={() => onOrderDelete(sectionIndex, productIndex, i, productdata.intrpuorderdetail)}>
+            <Icons.FontAwesome5
+              name="trash"
+              color="#094485"
+              size={normalize(13)}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <ScrollView
+        horizontal={true}
+        showsHorizontalScrollIndicator={true}
+        keyboardShouldPersistTaps="handled"
+        style={{ marginVertical: normalize(3) }}>
+        <View
+          style={{
+            flex: 1,
+            marginTop: 0,
+            marginVertical: normalize(3),
+            alignSelf: 'center',
+          }}>
+          <FlatList
+            nestedScrollEnabled
+            data={productdata?.batchdetails}
+            renderItem={renderBatchItem}
+            keyExtractor={batchKeyExtractor}
+            initialNumToRender={6}
+            maxToRenderPerBatch={10}
+            windowSize={7}
+            removeClippedSubviews={true}
+            updateCellsBatchingPeriod={50}
+          />
+        </View>
+      </ScrollView>
+
+      {/* Add new batch */}
+      {verifyData !== true && (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}>
+          <TouchableOpacity
+            onPress={() => {
+              if (productdata.flag != 3) {
+                const lastBatch = productdata.batchdetails[productdata.batchdetails.length - 1];
+                if (lastBatch?.batchname && lastBatch.batchname !== '') {
+                  onAddRow(sectionIndex, productIndex, i);
+                } else if (productdata.batchdetails.length === 0) {
+                  onAddRow(sectionIndex, productIndex, i);
+                } else {
+                  notifyMessage('Please fill out last row data');
+                }
+              } else {
+                notifyMessage('Order deleted');
+              }
+            }}>
+            <Icons.MaterialIcons
+              name={'playlist-add'}
+              color="#094485"
+              size={normalize(20)}
+            />
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const ProductCard = ({
+  sectionIndex,
+  productIndex,
+  supplierdata,
+  props,
+  selectall,
+  setSelectAll,
+}) => {
+  const {
+    responseJSON,
+    setResponseJSON,
+    updateData,
+    verifyData,
+    setSearchSelect,
+    invoiceData,
+    setInvoiceData,
+  } = useContext(ContextBio);
+
+  const navigation = useNavigation();
+  const [refresh, setRefresh] = useState(0);
+
+  const item = invoiceData.data[sectionIndex]?.productdetail[productIndex];
+
+  useEffect(() => {
+    if (selectall !== undefined && selectall != null) {
+      console.log('Applying select all: true to index', productIndex);
+      handleProductVerify(sectionIndex, productIndex, selectall);
+    }
+  }, [selectall]);
+
+  // Update local state when invoiceData changes
+  useEffect(() => {
+    setRefresh(prev => prev + 1);
+  }, [invoiceData]);
+
+  // Optimized data update functions
+  const updateInvoiceData = (updater) => {
+    setInvoiceData(prevState => ({
+      ...prevState,
+      data: updater(prevState.data),
+      EditStatus: true,
+    }));
+  };
+
+  // Navigation function
+  const navigationTo = (flag, batchname, batchcode, productname, purchaseIndex, batchIndex) => {
+    const freeproductdetails = {
+      componentname: 'CFreeProductTable',
+      productname: productname,
+      batchname: batchname,
+      batchcode: batchcode,
+      suoptiondetail: props.suoptiondetail,
+      flag: flag,
+      verification: verifyData,
+      productIndex: productIndex,
+      purchaseIndex: purchaseIndex,
+      batchIndex: batchIndex,
+    };
+
+    setResponseJSON({
+      ...responseJSON,
+      freeproductdetails: freeproductdetails,
+    });
+
+    navigation.navigate('BiodataEdit', {
+      data: freeproductdetails,
+    });
+  };
+
+  // Batch operations
+  const handleBatchUpdate = (field, sectionIndex, productIndex, orderIndex, batchIndex, val) => {
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      const batch = updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails[batchIndex];
+
+      let updates = {};
+      switch (field) {
+        case 'batchname':
+          updates = {
+            batchname: val,
+            batchcode: batchIndex,
+            flag: updateData === true && batch.flag !== 3 ? 2 : batch.flag !== 3 ? 1 : batch.flag,
+          };
+          break;
+        case 'quantity':
+          updates = {
+            quantity: Number(val),
+            totalquantity: batch.totalquantity !== undefined ? Number(val) * batch.packingquantity : batch.orderquantity,
+            flag: updateData && batch.flag !== 3 ? 2 : batch.flag !== 3 ? 1 : batch.flag,
+          };
+          break;
+        case 'packing':
+          updates = {
+            dropdowndata: [val],
+            packingquantity: val.packingqty,
+            insupacking: val.datavalue,
+            totalquantity: batch.totalquantity !== undefined ? (batch.quantity || 1) * val.packingqty : batch.orderquantity,
+            flag: updateData && batch.flag !== 3 ? 2 : batch.flag !== 3 ? 1 : batch.flag,
+          };
+          break;
+        default:
+          return prevData;
+      }
+
+      updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails[batchIndex] = {
+        ...batch,
+        ...updates,
+      };
+
+      return updatedData;
+    });
+  };
+
+  const handleFreeQuantityUpdate = (sectionIndex, productIndex, orderIndex, batchIndex, val) => {
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      const batch = updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails[batchIndex];
+
+      updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails[batchIndex] = {
+        ...batch,
+        freequantity: Number(val),
+        flag: updateData && batch.flag !== 3 ? 2 : batch.flag !== 3 ? 1 : batch.flag,
+      };
+
+      return updatedData;
+    });
+  };
+
+  const handleBatchVerify = (sectionIndex, productIndex, orderIndex, batchIndex, val) => {
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails[batchIndex].batchverify = val;
+      return updatedData;
+    });
+  };
+
+  const handleMediaUpdate = (sectionIndex, productIndex, orderIndex, batchIndex, val) => {
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails[batchIndex].media = [val];
+      return updatedData;
+    });
+  };
+
+  const handleBatchDelete = (sectionIndex, productIndex, orderIndex, batchIndex) => {
+    if (updateData === true) {
+      updateInvoiceData(prevData => {
+        const updatedData = [...prevData];
+        updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails[batchIndex].flag = 3;
+        return updatedData;
+      });
+    } else {
+      updateInvoiceData(prevData => {
+        const updatedData = [...prevData];
+        updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails.splice(batchIndex, 1);
+        return updatedData;
+      });
+    }
+  };
+
+  // Product operations
+  const handleProductVerify = (sectionIndex, productIndex, val) => {
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      const product = updatedData[sectionIndex].productdetail[productIndex];
+
+      const updatedPurchaseOrders = product.purchaseorderdetail?.map(po => ({
+        ...po,
+        batchdetails: po.batchdetails?.map(batch => ({
+          ...batch,
+          batchverify: val,
+        })) || [],
+      })) || [];
+
+      updatedData[sectionIndex].productdetail[productIndex] = {
+        ...product,
+        productverify: val,
+        purchaseorderdetail: updatedPurchaseOrders,
+      };
+
+      return updatedData;
+    });
+  };
+
+  const groupExpand = (sectionIndex, productIndex) => {
+    if (item.flag === 3) {return;}
+
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      updatedData[sectionIndex].productdetail[productIndex].groupexpand =
+        !updatedData[sectionIndex].productdetail[productIndex].groupexpand;
+      return updatedData;
+    });
+  };
+
+  const handleDeleteProduct = (sectionIndex, productIndex) => {
+    if (updateData === true) {
+      updateInvoiceData(prevData => {
+        const updatedData = [...prevData];
+        updatedData[sectionIndex].productdetail[productIndex] = {
+          ...updatedData[sectionIndex].productdetail[productIndex],
+          flag: 3,
+          groupexpand: false,
+        };
+        return updatedData;
+      });
+    } else {
+      updateInvoiceData(prevData => {
+        const updatedData = [...prevData];
+        updatedData[sectionIndex].productdetail.splice(productIndex, 1);
+        return updatedData;
+      });
+    }
+  };
+
+  // Order operations
+  const handleProductNoteUpdate = (sectionIndex, productIndex, orderIndex, val) => {
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].productnote = val;
+      return updatedData;
+    });
+  };
+
+  const handleOrderDelete = (sectionIndex, productIndex, orderIndex, productIdToRemove) => {
+    if (updateData !== true) {
+      updateInvoiceData(prevData => {
+        const updatedData = [...prevData];
+        updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail =
+          updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail.filter(
+            product => product.intrpuorderdetail !== productIdToRemove
+          );
+        return updatedData;
+      });
+    } else {
+      updateInvoiceData(prevData => {
+        const updatedData = [...prevData];
+        const purchaseOrder = updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex];
+
+        updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex] = {
+          ...purchaseOrder,
+          flag: 3,
+          batchdetails: purchaseOrder.batchdetails.map(batch => ({
+            ...batch,
+            flag: 3,
+          })),
+        };
+        return updatedData;
+      });
+    }
+  };
+
+  const addRow = (sectionIndex, productIndex, orderIndex) => {
+    updateInvoiceData(prevData => {
+      const updatedData = [...prevData];
+      const purchaseOrder = updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex];
+
+      const getQuantity = (data) => {
+        const totalQuantity = data.reduce((sum, item) => sum + (item.quantity || 0), 0);
+        const invoicePackingNo = data[0]?.invoicepackingno || 0;
+        return invoicePackingNo - totalQuantity;
+      };
+
+      const newBatchDetail = {
+        batchname: null,
+        insuproduct: null,
+        invoicepackingno: getQuantity(purchaseOrder.batchdetails),
+        insupacking: null,
+        intrpudetail: null,
+        freeproductquantity: null,
+        ddinsupacking: null,
+        packingquantity: null,
+        quantity: 0,
+        totalquantity: null,
+        orderquantity: getQuantity(purchaseOrder.batchdetails),
+        imageurl: null,
+        productnotes: null,
+        productinstruction: null,
+        dropdowndata: {
+          datavalue: 1,
+          displayvalue: '1 NOS',
+          selected: 1,
+        },
+        productquantityentry: [
+          {
+            id: 0,
+            insuproduct: 0,
+            insuproductfree: 0,
+            ddinsupacking: 'invget/invcommonget/rndddwdropdownselect 1,22401,8,3,5,0,1',
+            ddinsuproduct: 'invget/invcommonget/rndddwdropdownselect 3,0,0,0,0,0,0',
+            ismodified: 0,
+            insuproductfreename: null,
+            packing: null,
+            customer: 0,
+            spare: 0,
+            quantitynumber: 0,
+            batchname: null,
+          },
+        ],
+      };
+
+      updatedData[sectionIndex].productdetail[productIndex].purchaseorderdetail[orderIndex].batchdetails = [
+        ...purchaseOrder.batchdetails,
+        newBatchDetail,
+      ];
+
+      return updatedData;
+    });
+  };
+
+  // Quantity calculations - recalculated on every render
+  const quantityData = (() => {
+    if (!item || !item.purchaseorderdetail) {return { totalPacking: 0, totalFree: 0, totalQuantity: 0 };}
+
+    let totalPacking = 0;
+    let totalFree = 0;
+
+    item.purchaseorderdetail.forEach(purchaseOrder => {
+      purchaseOrder.batchdetails.forEach(batchdata => {
+        // Add quantity
+        if (batchdata.quantity != null && !isNaN(batchdata.quantity)) {
+          totalPacking += Number(batchdata.quantity);
+        }
+
+        // Add free quantity
+        if (batchdata.freequantity) {
+          totalFree += Number(batchdata.freequantity);
+        }
+
+        // Add free products from productquantityentry
+        batchdata?.productquantityentry?.forEach(freeProduct => {
+          if (freeProduct.insuproductfree !== 0) {
+            totalFree += 1;
+          }
+        });
+      });
+    });
+
+    const totalQuantity = totalPacking + totalFree;
+
+    return { totalPacking, totalFree, totalQuantity };
+  })();
+
+  // Swipe actions
+  const renderLeftActions = () => (
+    <View
+      style={{
+        // justifyContent: 'flex-start',
+        // alignItems: 'center',
+        // borderTopLeftRadius: 10,
+        // borderBottomLeftRadius: 10,
+        flexDirection: 'row',
+        marginTop: normalize(10),
+        paddingHorizontal: normalize(10),
+        // marginBottom: normalize(7),
+      }}>
+      <TouchableOpacity
+        style={{ marginLeft: normalize(5) }}
+        onPress={() => {
+          navigation.navigate('CPurchaseDetails', {
+            supplierCode: supplierdata?.insusupplier,
+            productCode: item?.insuproduct,
+          });
+        }}>
+        <View
+          style={{
+            backgroundColor: '#f4f5ae',
+            justifyContent: 'center',
+            alignItems: 'center',
+            ...CButtonShadow(),
+            borderRadius: normalize(5),
+            paddingHorizontal: normalize(3),
+            paddingVertical: normalize(5),
+            height: normalize(30),
+            width: normalize(30),
+          }}>
+          <HOCIcons.Entypo
+            name={'info-with-circle'}
+            size={normalize(20)}
+            color={Global.AppTheme.primary_color}
+          />
+          <Text
+            numberOfLines={1}
+            style={{
+              fontSize: normalize(8),
+              fontWeight: 'bold',
+              color: Global.AppTheme.primary_color,
+            }}>
+            Details
+          </Text>
+        </View>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={{ marginLeft: normalize(5) }}
+        onPress={() => {
+          navigation.navigate('CSupplierList', {
+            productCode: item?.insuproduct,
+          });
+        }}>
+        <View
+          style={{
+            backgroundColor: '#aef5b4',
+            justifyContent: 'center',
+            alignItems: 'center',
+            ...CButtonShadow(),
+            borderRadius: normalize(5),
+            paddingHorizontal: normalize(3),
+            paddingVertical: normalize(5),
+            height: normalize(30),
+            width: normalize(30),
+          }}>
+          <HOCIcons.MaterialCommunityIcons
+            name={'human-dolly'}
+            size={normalize(20)}
+            color={Global.AppTheme.primary_color}
+          />
+          <Text
+            numberOfLines={1}
+            style={{
+              fontSize: normalize(8),
+              fontWeight: 'bold',
+              color: Global.AppTheme.primary_color,
+            }}>
+            Supplier
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+
+  const renderRightActions = () => (
+    <View
+      style={{
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
+        flexDirection: 'row',
+        paddingHorizontal: normalize(10),
+        marginBottom: normalize(7),
+      }}>
+      {/* Add right actions if needed */}
+    </View>
+  );
+
+  if (!item) {return null;}
+
+  return (
+    <View>
+      {/* Item card section */}
+      <SwipeRow
+        disableLeftSwipe={false}
+        disableRightSwipe={false}
+        leftOpenValue={190}
+        rightOpenValue={-190}
+        swipeToClosePercent={10}
+        swipeToOpenPercent={10}
+      >
+        {/* Hidden Row (Swipe Actions) */}
+        <View style={{
+          borderWidth: 0,
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          minHeight: normalize(70),
+        }}>
+          <View style={{ flex: 1, alignItems: 'flex-start' }}>
+            {renderLeftActions && renderLeftActions()}
+          </View>
+          <View style={{ flex: 1, alignItems: 'flex-end' }}>
+            {renderRightActions && renderRightActions()}
+          </View>
+        </View>
+
+        {/* Main Content */}
+        <TouchableOpacity
+          onPress={() => groupExpand(sectionIndex, productIndex)}
+          style={{
+            padding: normalize(5),
+            marginVertical: 5,
+            borderLeftWidth: normalize(10),
+            borderLeftColor: isNUQ(item?.color) ? item?.color : '#870808',
+            backgroundColor: '#faeeeb',
+            marginHorizontal: normalize(10),
+            marginBottom: normalize(10),
+            borderRadius: normalize(5),
+            shadowColor: Global.AppTheme.primary_color,
+            shadowOffset: { width: 4, height: 4 },
+            shadowOpacity: 0.6,
+            shadowRadius: 10,
+            elevation: 8,
+            ...CButtonShadow(),
+          }}>
+          <View>
+            {/* Top section with hand icon, product name and delete icon and checkbox for verify screen */}
+            <View
+              style={{
+                alignItems: 'center',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                padding: normalize(2),
+              }}>
+              <Icons.FontAwesome5
+                name={'box-open'}
+                size={normalize(19)}
+                color={'#094485'}
+              />
+              <Text
+                adjustsFontSizeToFit
+                numberOfLines={2}
+                style={{
+                  fontWeight: 'bold',
+                  marginLeft: normalize(5),
+                  fontSize: normalize(13),
+                  color: '#094485',
+                  marginHorizontal: normalize(5),
+                  width: '60%',
+                }}>
+                {item.productname}
+              </Text>
+              {verifyData === true ? (
+                <SCheckBox
+                  data={{ value: item.productverify, size: 20 }}
+                  callBack={val => {
+                    handleProductVerify(sectionIndex, productIndex, val);
+                  }}
+                />
+              ) : item.flag === 3 ? (
+                <Text style={{ color: 'red' }}>Deleted</Text>
+              ) : (
+                <TouchableOpacity
+                  onPress={() => {
+                    handleDeleteProduct(sectionIndex, productIndex);
+                  }}>
+                  <Icons.FontAwesome5
+                    name={'trash'}
+                    size={normalize(16)}
+                    color={'#094485'}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+
+            {/* Bottom section with quantity and total quantity */}
+            <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
+              <Text
+                adjustsFontSizeToFit
+                numberOfLines={2}
+                style={{
+                  color: '#094485',
+                  fontWeight: '500',
+                  fontSize: normalize(10),
+                }}>
+                QUANTITY : {quantityData.totalPacking}
+              </Text>
+              <Text
+                style={{
+                  color: '#094485',
+                  fontWeight: '500',
+                  fontSize: normalize(10),
+                }}>
+                FREE QUANTITY : {quantityData.totalFree}
+              </Text>
+              <Text
+                style={{
+                  color: '#094485',
+                  fontWeight: '500',
+                  fontSize: normalize(10),
+                }}>
+                TOTAL QUANTITY : {quantityData.totalQuantity}
+              </Text>
+            </View>
+          </View>
+        </TouchableOpacity>
+      </SwipeRow>
+
+      {/* Item card expanded section */}
+      {item.groupexpand && item.purchaseorderdetail && (
+        <View>
+          {item.purchaseorderdetail.map((productdata, i) => (
+            <OrderSection
+              key={`${sectionIndex}-${productIndex}-${i}-${productdata.intrpuorderdetail}`}
+              productdata={productdata}
+              i={i}
+              sectionIndex={sectionIndex}
+              productIndex={productIndex}
+              verifyData={verifyData}
+              updateData={updateData}
+              supplierdata={supplierdata}
+              item={item}
+              onProductNoteUpdate={handleProductNoteUpdate}
+              onOrderDelete={handleOrderDelete}
+              onAddRow={addRow}
+              onBatchUpdate={handleBatchUpdate}
+              onBatchDelete={handleBatchDelete}
+              onNavigation={navigationTo}
+              onMediaUpdate={handleMediaUpdate}
+              onBatchVerify={handleBatchVerify}
+              onFreeQuantityUpdate={handleFreeQuantityUpdate}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default ProductCard;