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

package/src/Components/QualityProductCard.js

@@ -0,0 +1,1059 @@
+import { View, Text, Dimensions, StyleSheet, TouchableOpacity, Image, ScrollView, Platform } from 'react-native';
+import React, { useContext, useEffect, useState } from 'react';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+//import { useNavigation } from '../Navigation/useNavigation';
+
+import SOverlay from '../StaticComponents/SOverlay';
+import CTextHeader from '../Custom/TableComponent/CTextHeader';
+import SDropDownNew from '../Components/SDropDownNew';
+
+import ContextBio from '../ContextAPI/ContextBio';
+import SCheckBox from '../StaticComponents/SCheckBox';
+import { Global } from '../../../../../src/Common/Global';
+import STextInputNew from './STextInputNew';
+import { CButtonShadow, isNUQ } from '../CommonStyle/ComponentFunctions';
+import HOCIcons from '../HOC/HOCIcons';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import { SwipeRow } from 'react-native-swipe-list-view';//mmmmmmmmmmmmmmmmmmmm
+
+const QualityProductCard = ({
+  sectionIndex,
+  productIndex,
+  selectall,
+  setSelectAll,
+}) => {
+  const {
+    responseJSON,
+    setResponseJSON,
+    verifyData,
+    invoiceData,
+    setInvoiceData,
+  } = useContext(ContextBio);
+  const [refresh, setRefresh] = useState(0);
+  const [verify, setVerify] = useState(0);
+  const navigation = useNavigation();
+  const [FilesData, setFilesData] = useState({
+    savedaudio: [],
+    saveddoc: [],
+    savedimages: [],
+    savedvideo: [],
+  });
+
+  const item = invoiceData.data[sectionIndex].productdetail[productIndex];
+
+  function groupExpand(item) {
+    item.groupexpand = !item.groupexpand;
+    setVerify(verify + 1);
+  }
+
+  useEffect(() => {
+    if (selectall != null || selectall != undefined) {
+      console.log('Applying select all: true to index', productIndex);
+      handleGlobalFieldUpdate('productqualityverify', selectall);
+    }
+  }, [selectall]);
+
+  function calculateTotalProductFreeLength(data) {
+    if (!data?.batchdetail || !Array.isArray(data.batchdetail)) {
+      return 0;
+    }
+
+    const totalLength = data.batchdetail.reduce((sum, batch) => {
+      const productFreeArray = batch?.productfree;
+      const productFreeLength = Array.isArray(productFreeArray)
+        ? productFreeArray.length
+        : 0;
+      return sum + productFreeLength;
+    }, 0);
+
+    return totalLength;
+  }
+
+  function navigationTo(
+    flag,
+    batchname,
+    productname,
+    batchcode,
+    quality,
+    batchIndex,
+  ) {
+    let freeproductdetails = {
+      componentname: 'CFreeProductTable',
+      productname: productname,
+      batchname: batchname,
+      qualityentry: true,
+      qualityverification: false,
+      flag: flag,
+      batchcode: batchcode,
+      quality: quality,
+      productIndex: productIndex,
+      batchIndex: batchIndex,
+    };
+    setResponseJSON({
+      ...responseJSON,
+      freeproductdetails: freeproductdetails,
+    });
+    navigation.navigate('BiodataEdit', {
+      data: freeproductdetails,
+    });
+  }
+
+  function getLength(params) {
+    const arraylength =
+      params != undefined && params != null && params != '' ? params.length : 0;
+    return arraylength;
+  }
+
+  function handleGlobalFieldUpdate(fieldName, val) {
+    const updatedData = JSON.parse(JSON.stringify(invoiceData.data));
+
+    updatedData.forEach(section => {
+      section.productdetail = section.productdetail.map(product => {
+        product[fieldName] = val;
+
+        let batchField = '';
+        if (fieldName === 'productverify') {
+          batchField = 'batchverify';
+        } else if (fieldName === 'productqualityverify') {
+          batchField = 'batchqualityverify';
+        }
+
+        if (batchField && Array.isArray(product.batchdetail)) {
+          product.batchdetail = product.batchdetail.map(batch => ({
+            ...batch,
+            [batchField]: val,
+          }));
+        }
+
+        return product;
+      });
+    });
+
+    setInvoiceData(prevState => ({
+      ...prevState,
+      data: updatedData,
+      EditStatus: true,
+    }));
+  }
+
+  function handleProductUpdate(sectionIndex, productIndex, val, field) {
+    const updatedData = JSON.parse(JSON.stringify(invoiceData.data));
+    const section = updatedData[sectionIndex];
+    let product = section.productdetail[productIndex];
+
+    product[field] = val;
+
+    if (
+      field === 'productqualityverify' &&
+      Array.isArray(product.batchdetail)
+    ) {
+      product.batchdetail = product.batchdetail.map(batch => ({
+        ...batch,
+        batchqualityverify: val,
+      }));
+    }
+
+    section.productdetail[productIndex] = product;
+
+    setInvoiceData(prevState => ({
+      ...prevState,
+      data: updatedData,
+      EditStatus: true,
+    }));
+  }
+
+  function handleBatchQualityNatureUpdate(
+    sectionIndex,
+    productIndex,
+    batchIndex,
+    val,
+  ) {
+    const updatedData = JSON.parse(JSON.stringify(invoiceData.data));
+    const section = updatedData[sectionIndex];
+    const product = section.productdetail[productIndex];
+    const batch = product.batchdetail[batchIndex];
+
+    product.batchdetail[batchIndex] = {
+      ...batch,
+      qualitynature: val.datavalue,
+      qualitynaturename: val.displayvalue,
+    };
+
+    setInvoiceData(prevState => ({
+      ...prevState,
+      data: updatedData,
+      EditStatus: true,
+    }));
+  }
+
+  function handleBatchFieldUpdate(
+    sectionIndex,
+    productIndex,
+    batchIndex,
+    val,
+    fieldName,
+  ) {
+    const updatedData = JSON.parse(JSON.stringify(invoiceData.data));
+    const section = updatedData[sectionIndex];
+    const product = section.productdetail[productIndex];
+    const batch = product.batchdetail[batchIndex];
+
+    product.batchdetail[batchIndex] = {
+      ...batch,
+      [fieldName]: val,
+    };
+
+    setInvoiceData(prevState => ({
+      ...prevState,
+      data: updatedData,
+      EditStatus: true,
+    }));
+  }
+
+  function handleUpdateMedia(sectionIndex, productIndex, batchIndex, val) {
+    const updatedData = [...invoiceData.data];
+    const section = updatedData[sectionIndex];
+    const product = section.productdetail[productIndex];
+    const currentBatch = product.batchdetail[batchIndex];
+
+    section.productdetail[productIndex].batchdetail[batchIndex] = {
+      ...currentBatch,
+      media: [val],
+    };
+
+    setInvoiceData(prevState => ({
+      ...prevState,
+      data: updatedData,
+      EditStatus: true,
+    }));
+  }
+
+  function handleUpdateMediaProduct(
+    sectionIndex,
+    productIndex,
+    batchIndex,
+    val,
+  ) {
+    console.log('##############################', val);
+    const updatedData = [...invoiceData.data];
+    const section = updatedData[sectionIndex];
+    const product = section.productdetail[productIndex];
+    const currentBatch = product.batchdetail[batchIndex];
+
+    section.productdetail[productIndex].batchdetail[batchIndex] = {
+      ...currentBatch,
+      productimage: val.savedimages,
+    };
+
+    section.productdetail[productIndex] = {
+      ...product,
+      productimage: val.savedimages,
+    };
+
+    setInvoiceData(prevState => ({
+      ...prevState,
+      data: updatedData,
+      EditStatus: true,
+    }));
+  }
+
+  useEffect(() => {
+    console.log(
+      'invoice data from quality entry screen product card',
+      JSON.stringify(invoiceData),
+    );
+  }, [invoiceData]);
+
+  const renderLeftActions = () => (
+    <View style={styles.leftActionsContainer}>
+      <TouchableOpacity
+        style={styles.actionButton}
+        onPress={() => {
+          navigation.navigate('CPurchaseDetails', {
+            productCode:
+              invoiceData?.data[sectionIndex]?.productdetail[productIndex]
+                ?.insuproduct,
+          });
+        }}>
+        <View style={[styles.actionIconContainer, styles.detailsButton]}>
+          <HOCIcons.Entypo
+            name={'info-with-circle'}
+            size={normalize(20)}
+            color={Global.AppTheme.primary_color}
+          />
+          <Text numberOfLines={1} style={styles.actionText}>
+            Details
+          </Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.actionButton}
+        onPress={() => {
+          navigation.navigate('CSupplierList', {
+            productCode: item?.insuproduct,
+          });
+        }}>
+        <View style={[styles.actionIconContainer, styles.supplierButton]}>
+          <HOCIcons.MaterialCommunityIcons
+            name={'human-dolly'}
+            size={normalize(20)}
+            color={Global.AppTheme.primary_color}
+          />
+          <Text numberOfLines={1} style={styles.actionText}>
+            Supplier
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+
+  const renderRightActions = () => (
+    <View style={styles.rightActionsContainer}>
+      <TouchableOpacity
+        style={styles.actionButton}
+        onPress={() => { }} />
+    </View>
+  );
+
+  async function Media_Upload(image) {
+    console.log('imageeeeeeeeeee upload', JSON.stringify(image));
+    let date = new Date().getDate();
+    let month = new Date().getMonth() + 1;
+    let year = new Date().getFullYear();
+    let hours = new Date().getHours();
+    let min = new Date().getMinutes();
+    let sec = new Date().getSeconds();
+    let millisec = new Date().getMilliseconds();
+    let uniquename = '.jpg';
+    let fileid_autogenerate = data != null && data.length > 0 ? data.length : 0;
+    let dataset2 = {
+      fileid: fileid_autogenerate + 1,
+      filename: uniquename,
+      filetype: image.filetype,
+      uri: image.uri,
+      uritype: false,
+    };
+
+    if (!dataset2.uritype) {
+      if (dataset2.uri) {
+        var formData = new FormData();
+        formData.append('file', {
+          uri: dataset2.uri,
+          type: 'image/jpeg',
+          name: dataset2.filename,
+        });
+        console.log('formData>>>>>>>>>>>>>', JSON.stringify(formData));
+        console.log(
+          'formData>>>>>>>>>>>>>',
+          JSON.stringify(APIURL + 'invfile/fileupload/emr/image'),
+        );
+        NetworkServiceCall(
+          'multiform',
+          APIURL + 'invfile/fileupload/emr/image',
+          formData,
+        )
+          .then(function (responsedata) {
+            console.log(
+              'responsedata>>>>>>>>>>>>>>>',
+              JSON.stringify(responsedata),
+            );
+            if (responsedata.httpstatus == 200) {
+              console.log(
+                'INSIDE IMAGE SCREENNENENENENNENENENENENENNEN',
+                JSON.stringify(responsedata),
+              );
+              dataset2.filename = responsedata.data.fileuri;
+              setData(
+                data != null
+                  ? prevData => [...prevData, dataset2.filename]
+                  : [dataset2.filename],
+              );
+              responseJSON.consultationEdit.editStatus = true;
+              setrefreshCount(refreshCount + 1);
+              props.editStatus(1);
+              props.data.usertype =
+                Global.PatientDetails != undefined &&
+                  Global.PatientDetails.usertype != undefined &&
+                  Global.PatientDetails.usertype != null
+                  ? Global.PatientDetails.usertype
+                  : 'Z';
+              props.data.suuser =
+                Global.userData != undefined &&
+                  Global.userData.suuser != undefined &&
+                  Global.userData.suuser != null
+                  ? Global.userData.suuser
+                  : 0;
+              setLoading(false);
+              setOpen(false);
+            } else {
+              setLoading(false);
+              setOpen(false);
+            }
+          })
+          .catch(error => {
+            console.log('errorrrrrrrrrr', JSON.stringify(error));
+            setLoading(false);
+          });
+      }
+    }
+  }
+
+  function CaptureImageWithoutEdit() {
+    navigation.navigate('CCaptureImageWithoutEdit', { onSelect: Media_Upload });
+  }
+
+  return (
+    <View>
+      <SwipeRow
+        leftOpenValue={190}
+        rightOpenValue={-190}
+        disableLeftSwipe={false}
+        disableRightSwipe={false}
+        friction={10}
+        tension={40}
+        preview={false}
+        key={`product-${sectionIndex}-${productIndex}`}
+      >
+        {renderLeftActions()}
+        <TouchableOpacity
+          onPress={() => groupExpand(item)}
+          style={[
+            styles.productCard,
+            {
+              borderLeftColor: isNUQ(item?.color) ? item?.color : '#870808',
+            },
+          ]}>
+          <View>
+            <View style={[
+              styles.productHeader,
+              { justifyContent: verifyData == true ? 'space-between' : 'flex-start' },
+            ]}>
+              <Icons.FontAwesome5
+                name={'box-open'}
+                size={normalize(19)}
+                color={'#094485'}
+              />
+              <Text
+                adjustsFontSizeToFit
+                numberOfLines={2}
+                style={styles.productName}>
+                {item.purchaseproduct}
+              </Text>
+
+              {verifyData == true ? (
+                <SCheckBox
+                  data={{ value: item.productqualityverify, size: 20 }}
+                  callBack={val => {
+                    handleProductUpdate(
+                      sectionIndex,
+                      productIndex,
+                      val,
+                      'productqualityverify',
+                    );
+                  }}
+                />
+              ) : null}
+            </View>
+
+            <View style={styles.productInfoRow}>
+              <Text style={styles.infoText}>
+                TOTAL NO.OF BATCHS :{' '}
+                <Text style={styles.infoValue}>
+                  {item?.batchdetail?.length}
+                </Text>{' '}
+              </Text>
+              <Text style={styles.infoText}>
+                FREE PRODUCTS :{' '}
+                <Text style={styles.infoValue}>
+                  {calculateTotalProductFreeLength(item)}
+                </Text>{' '}
+              </Text>
+            </View>
+          </View>
+        </TouchableOpacity>
+        {renderRightActions()}
+      </SwipeRow>
+
+      {item.groupexpand != true ? (
+        <View style={styles.expandedContent}>
+          <View style={styles.notesContainer}>
+            {verifyData != true ? (
+              <TouchableOpacity
+                style={styles.notesButton}
+                onPress={() => { }}>
+                <SOverlay
+                  iconcolor={'#094485'}
+                  value={item.notes}
+                  size={16}
+                  onChangeText={val => {
+                    handleProductUpdate(
+                      sectionIndex,
+                      productIndex,
+                      val,
+                      'notes',
+                    );
+                  }}
+                />
+              </TouchableOpacity>
+            ) : null}
+          </View>
+
+          <ScrollView
+            horizontal={true}
+            showsHorizontalScrollIndicator={true}
+            keyboardShouldPersistTaps="handled"
+            style={styles.scrollView}>
+            <View style={styles.tableContainer}>
+              <View style={styles.tableHeader} />
+
+              {item?.batchdetail?.map((batchdata, i) => {
+                batchdata.batchcode = i + 1;
+                return (
+                  <View key={i} style={styles.tableRow}>
+                    <View>
+                      <CTextHeader
+                        text={'BATCH'}
+                        widthArr={Dimensions.get('screen').width * 0.25}
+                        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.25,
+                          paddingTop: 5,
+                          paddingBottom: 5,
+                          height: Dimensions.get('screen').height * 0.052,
+                          textAlign: 'center',
+                          marginTop: normalize(2),
+                          marginHorizontal: normalize(2),
+                          value: batchdata.batch,
+                          editable: false,
+                        }}
+                      />
+                    </View>
+
+                    <View>
+                      <CTextHeader
+                        text={'QUALITY'}
+                        widthArr={Dimensions.get('screen').width * 0.4}
+                        bgColor={'rgba(184, 184, 191,0.3)'}
+                        color={'#094485'}
+                        borderColor={'lightgrey'}
+                        marginHorizontal={normalize(2)}
+                        borderRadius={5}
+                        elevation={0}
+                      />
+                      <View style={styles.qualityDropdownContainer}>
+                        <SDropDownNew
+                          fontSize={normalize(11)}
+                          fontWeight={'bold'}
+                          dropdownapi={
+                            'invget/invcommonget/rndddwdropdownselect 14,0,0,0,0,0,0'
+                          }
+                          iconName={'award'}
+                          widthArr={Dimensions.get('screen').width * 0.4}
+                          heightArr={Dimensions.get('screen').height * 0.052}
+                          dropdowndata={batchdata.qualitynaturename}
+                          onChangeData={val => {
+                            handleBatchQualityNatureUpdate(
+                              sectionIndex,
+                              productIndex,
+                              i,
+                              val,
+                            );
+                          }}
+                          disabled={verifyData == true ? true : false}
+                          editable={true}
+                          refreshCount={val =>
+                            val == undefined ? setRefresh(refresh + 1) : null
+                          }
+                        />
+                      </View>
+                    </View>
+
+                    <View>
+                      <CTextHeader
+                        text={'IMAGE'}
+                        widthArr={Dimensions.get('screen').width * 0.25}
+                        bgColor={'rgba(184, 184, 191,0.3)'}
+                        color={'#094485'}
+                        borderColor={'lightgrey'}
+                        marginHorizontal={normalize(2)}
+                        borderRadius={5}
+                        elevation={0}
+                      />
+                      <View style={styles.imageContainer}>
+                        {verifyData != true ? (
+                          <TouchableOpacity
+                            style={styles.imageButton}
+                            onPress={() => {
+                              if (Platform.OS != 'web') {
+                                navigation.navigate('FileExplorer', {
+                                  visibility: 1,
+                                  data: invoiceData.data[
+                                    sectionIndex
+                                  ].productdetail[productIndex].batchdetail[
+                                    i
+                                  ].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.savedpdf.split(',')
+                                      : [],
+                                  })),
+                                  callBack: val => {
+                                    setFilesData(val);
+                                    handleUpdateMediaProduct(
+                                      sectionIndex,
+                                      productIndex,
+                                      i,
+                                      val,
+                                    );
+                                  },
+                                });
+                              }
+                            }}>
+                            {isNUQ(batchdata?.productimage) ? (
+                              <Image
+                                resizeMode="cover"
+                                style={styles.productImage}
+                                source={{
+                                  uri: `${APIURL}invfile/getFile/image/${batchdata?.productimage}`,
+                                }}
+                              />
+                            ) : (
+                              <Icons.FontAwesome5
+                                name="camera"
+                                color="#094485"
+                                size={normalize(15)}
+                              />
+                            )}
+                          </TouchableOpacity>
+                        ) : (
+                          <Image
+                            resizeMode="cover"
+                            style={styles.productImage}
+                            source={{
+                              uri: `${APIURL}invfile/getFile/image/${batchdata?.productimage}`,
+                            }}
+                          />
+                        )}
+                      </View>
+                    </View>
+
+                    {verifyData != true ? (
+                      <View>
+                        <CTextHeader
+                          text={'REMARKS'}
+                          widthArr={Dimensions.get('screen').width * 0.25}
+                          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.25,
+                            paddingTop: 5,
+                            paddingBottom: 5,
+                            height: Dimensions.get('screen').height * 0.05,
+                            textAlign: 'center',
+                            marginTop: normalize(2),
+                            marginHorizontal: normalize(2),
+                            value: batchdata.remarks,
+                          }}
+                          callBack={val => {
+                            handleBatchFieldUpdate(
+                              sectionIndex,
+                              productIndex,
+                              i,
+                              val,
+                              'remarks',
+                            );
+                          }}
+                        />
+                      </View>
+                    ) : null}
+
+                    <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={styles.mediaContainer}>
+                        <TouchableOpacity
+                          style={styles.mediaButton}
+                          onPress={() => {
+                            if (Platform.OS != 'web') {
+                              navigation.navigate('FileExplorer', {
+                                visibility: 0,
+                                data: invoiceData.data[
+                                  sectionIndex
+                                ].productdetail[productIndex].batchdetail[
+                                  i
+                                ].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.savedpdf.split(',')
+                                    : [],
+                                })),
+                                callBack: val => {
+                                  console.log(
+                                    '********************************',
+                                    val,
+                                  );
+                                  setFilesData(val);
+                                  handleUpdateMedia(
+                                    sectionIndex,
+                                    productIndex,
+                                    i,
+                                    val,
+                                  );
+                                },
+                              });
+                            }
+                          }}>
+                          <Icons.FontAwesome5
+                            name="play"
+                            color="#094485"
+                            size={normalize(15)}
+                          />
+                        </TouchableOpacity>
+                      </View>
+                    </View>
+
+                    {verifyData == true ? (
+                      <View>
+                        <CTextHeader
+                          text={'VERIFY'}
+                          widthArr={Dimensions.get('screen').width * 0.15}
+                          bgColor={'rgba(184, 184, 191,0.3)'}
+                          color={'#094485'}
+                          borderColor={'lightgrey'}
+                          marginHorizontal={normalize(2)}
+                          borderRadius={5}
+                          elevation={0}
+                        />
+                        <View style={styles.verifyContainer}>
+                          <SCheckBox
+                            data={{
+                              value: batchdata.batchqualityverify,
+                              size: 20,
+                            }}
+                            callBack={val => {
+                              handleBatchFieldUpdate(
+                                sectionIndex,
+                                productIndex,
+                                i,
+                                val,
+                                'batchqualityverify',
+                              );
+                            }}
+                          />
+                        </View>
+                      </View>
+                    ) : null}
+
+                    <View>
+                      <CTextHeader
+                        text={''}
+                        widthArr={Dimensions.get('screen').width * 0.3}
+                        bgColor={'rgba(184, 184, 191,0.3)'}
+                        color={'#094485'}
+                        borderColor={'lightgrey'}
+                        marginHorizontal={normalize(2)}
+                        borderRadius={5}
+                        elevation={0}
+                      />
+                      <View style={styles.freeContainer}>
+                        <TouchableOpacity
+                          style={styles.freeButton}
+                          onPress={() => {
+                            navigationTo(
+                              false,
+                              batchdata.batch,
+                              item.purchaseproduct,
+                              batchdata.batchcode,
+                              true,
+                              i,
+                            );
+                          }}>
+                          <View style={styles.freeBadge}>
+                            <Text style={styles.freeBadgeText}>
+                              {getLength(batchdata.productfree)}
+                            </Text>
+                          </View>
+                          <Icons.FontAwesome5
+                            name="cart-arrow-down"
+                            color="#094485"
+                            size={normalize(15)}
+                          />
+                        </TouchableOpacity>
+                      </View>
+                    </View>
+                  </View>
+                );
+              })}
+            </View>
+          </ScrollView>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Left Actions Styles
+  leftActionsContainer: {
+    // justifyContent: 'flex-start',
+    // alignItems: 'center',
+    // borderTopLeftRadius: 10,
+    // borderBottomLeftRadius: 10,
+    // flexDirection: 'row',
+    // paddingHorizontal: normalize(10),
+    // marginBottom: normalize(7),
+    flexDirection: 'row',
+    marginTop: normalize(10),
+    paddingHorizontal: normalize(10),
+  },
+  actionButton: {
+    marginLeft: normalize(5),
+  },
+  actionIconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...CButtonShadow(),
+    borderRadius: normalize(5),
+    paddingHorizontal: normalize(3),
+    paddingVertical: normalize(5),
+    height: normalize(30),
+    width: normalize(30),
+  },
+  detailsButton: {
+    backgroundColor: '#f4f5ae',
+  },
+  supplierButton: {
+    backgroundColor: '#aef5b4',
+  },
+  actionText: {
+    fontSize: normalize(8),
+    fontWeight: 'bold',
+    color: Global.AppTheme.primary_color,
+  },
+
+  // Right Actions Styles
+  rightActionsContainer: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+    flexDirection: 'row',
+    paddingHorizontal: normalize(10),
+    marginBottom: normalize(7),
+  },
+
+  // Product Card Styles
+  productCard: {
+    padding: normalize(5),
+    marginVertical: 5,
+    borderLeftWidth: normalize(10),
+    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(),
+  },
+  productHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: normalize(2),
+  },
+  productName: {
+    fontWeight: 'bold',
+    marginLeft: normalize(20),
+    fontSize: normalize(13),
+    color: '#094485',
+    marginHorizontal: normalize(5),
+    width: '60%',
+  },
+  productInfoRow: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+  infoText: {
+    color: '#094485',
+    fontWeight: '500',
+    fontSize: normalize(10),
+  },
+  infoValue: {
+    fontSize: normalize(10),
+    fontWeight: 'bold',
+  },
+
+  // Expanded Content Styles
+  expandedContent: {
+    paddingHorizontal: normalize(5),
+    marginHorizontal: normalize(10),
+    marginBottom: normalize(10),
+  },
+  notesContainer: {
+    paddingHorizontal: normalize(5),
+    marginHorizontal: normalize(10),
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  notesButton: {
+    marginVertical: normalize(5),
+  },
+  scrollView: {
+    marginVertical: normalize(3),
+  },
+  tableContainer: {
+    flex: 1,
+    marginTop: 0,
+    marginVertical: normalize(3),
+    alignSelf: 'center',
+  },
+  tableHeader: {
+    flexDirection: 'row',
+  },
+  tableRow: {
+    flexDirection: 'row',
+    marginTop: normalize(1),
+    backgroundColor: 'white',
+  },
+
+  // Quality Dropdown Styles
+  qualityDropdownContainer: {
+    justifyContent: 'center',
+    borderWidth: 0,
+  },
+
+  // Image Styles
+  imageContainer: {
+    width: Dimensions.get('screen').width * 0.26,
+    height: Dimensions.get('screen').height * 0.052,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 5,
+    borderColor: 'lightgrey',
+  },
+  imageButton: {
+    marginHorizontal: normalize(5),
+  },
+  productImage: {
+    width: normalize(65),
+    padding: normalize(25),
+    alignSelf: 'center',
+    paddingTop: normalize(5),
+  },
+
+  // Media Styles
+  mediaContainer: {
+    width: Dimensions.get('screen').width * 0.26,
+    height: Dimensions.get('screen').height * 0.052,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 5,
+    borderColor: 'lightgrey',
+  },
+  mediaButton: {
+    marginHorizontal: normalize(5),
+  },
+
+  // Verify Styles
+  verifyContainer: {
+    borderWidth: 1,
+    borderColor: 'lightgrey',
+    elevation: 0,
+    borderRadius: 5,
+    width: Dimensions.get('screen').width * 0.15,
+    paddingTop: 5,
+    paddingBottom: 5,
+    height: Dimensions.get('screen').height * 0.052,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  // Free Product Styles
+  freeContainer: {
+    borderWidth: 0,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    height: Dimensions.get('screen').height * 0.056,
+  },
+  freeButton: {
+    marginHorizontal: normalize(5),
+  },
+  freeBadge: {
+    position: 'absolute',
+    right: normalize(-5),
+    top: normalize(-10),
+    backgroundColor: 'white',
+    alignItems: 'center',
+    borderRadius: 20,
+    width: normalize(15),
+    borderWidth: 0.5,
+    zIndex: 10,
+  },
+  freeBadgeText: {
+    color: 'black',
+    fontSize: normalize(11),
+    fontWeight: 'bold',
+  },
+});
+
+export default QualityProductCard;