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

package/src/Components/SupplierCard.js

@@ -0,0 +1,243 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+import moment from 'moment';
+import { CButtonShadow, isNUQ } from '../CommonStyle/ComponentFunctions';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { normalize } from '../CommonStyle/componentStyle';
+import { Global } from '../../../../../src/Common/Global';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+
+const SupplierCard = ({ supplierName, invoiceNumber, invoiceDate, supplierCode }) => {
+  const navigation = useNavigation();
+  return (
+    // Swipable card
+    // <View>
+    //     <SwipeRow
+    //         swipeToOpenPercent={1}
+    //         swipeToClosePercent={1}
+    //         leftOpenValue={normalize(80)}
+    //         rightOpenValue={normalize(-80)}
+    //         style={{
+    //             borderRadius: 10,
+    //             width: '100%',
+    //         }}
+    //     >
+    //         <View
+    //             style={{
+    //                 flexDirection: 'row',
+    //                 justifyContent: 'space-between',
+    //                 marginVertical: 10,
+    //                 marginHorizontal: 20,
+    //                 borderRadius: 10,
+    //                 flex: 1,
+    //             }}
+    //         >
+    //             {/* Left Action */}
+    //             <TouchableOpacity
+    //                 style={{
+    //                     flex: 1,
+    //                     backgroundColor: '#4caf50',
+    //                     justifyContent: 'center',
+    //                     alignItems: 'center',
+    //                     borderTopLeftRadius: 10,
+    //                     borderBottomLeftRadius: 10,
+    //                 }}
+    //                 onPress={() => {
+    //                     // rowMap[data.item.key].closeRow();
+    //                     alert('Left action executed!');
+    //                 }}
+    //             >
+    //                 <Text style={{ color: '#fff', fontWeight: 'bold' }}>Left Action</Text>
+    //             </TouchableOpacity>
+
+    //             {/* Right Action */}
+    //             <TouchableOpacity
+    //                 style={{
+    //                     flex: 1,
+    //                     backgroundColor: '#f44336',
+    //                     justifyContent: 'center',
+    //                     alignItems: 'center',
+    //                     borderTopRightRadius: 10,
+    //                     borderBottomRightRadius: 10,
+    //                 }}
+    //                 onPress={() => {
+    //                     // rowMap[data.item.key].closeRow();
+    //                     alert('Right action executed!');
+    //                 }}
+    //             >
+    //                 <Text style={{ color: '#fff', fontWeight: 'bold' }}>Right Action</Text>
+    //             </TouchableOpacity>
+    //         </View>
+
+    //         <View
+    //             style={{
+    //                 backgroundColor: '#fff',
+    //                 padding: 10,
+    //                 borderRadius: 10,
+    //                 shadowColor: '#000',
+    //                 shadowOpacity: 0.1,
+    //                 shadowRadius: 5,
+    //                 elevation: 3,
+    //                 marginVertical: 5,
+    //                 marginHorizontal: 1,
+    //                 // width: Dimensions.get('screen').width * 0.95,
+    //                 borderLeftWidth: 3,
+    //                 borderLeftColor: '#094485',
+    //             }}
+    //         >
+    //             <View>
+    //                 {supplierName && <Text style={{ fontSize: 16, fontWeight: 'bold', color: '#094485' }}>
+    //                     {supplierName}
+    //                 </Text>}
+    //                 <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+    //                     {invoiceNumber && <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#333' }}>
+    //                         {invoiceNumber}
+    //                     </Text>}
+    //                     {invoiceDate && <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#333' }}>
+    //                         Date :  {moment(invoiceDate).format('DD-MM-YYYY')}
+    //                     </Text>}
+    //                 </View>
+    //             </View>
+    //             {/* <View>
+    //                 {supplierDetails?.grade && <View style={{
+    //                     height: 60,
+    //                     width: 60,
+    //                     backgroundColor: 'lightgrey',
+    //                     borderRadius: 30,
+    //                     justifyContent: 'center',
+    //                     alignItems: 'center'
+    //                 }}>
+    //                     <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#094485' }}>
+    //                         {supplierDetails.grade}
+    //                     </Text>
+    //                     <Text
+    //                         style={{ fontSize: 12 }}>Grade</Text>
+    //                 </View>}
+    //             </View> */}
+    //         </View>
+    //     </SwipeRow>
+    // </View>
+
+    // Normal card
+    <View
+      style={{
+        padding: normalize(5),
+        marginVertical: 5,
+        borderLeftWidth: normalize(10),
+        borderLeftColor: '#083787',
+        backgroundColor: '#ebf1fa',
+        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
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+        }}>
+        <View>
+          {/* Supplier name */}
+          {isNUQ(supplierName) ? (
+            <Text
+              numberOfLines={1}
+              style={{
+                fontSize: normalize(12),
+                paddingLeft: normalize(5),
+                fontWeight: 'bold',
+                color: Global.AppTheme.primary_color,
+              }}>
+              {supplierName}
+            </Text>
+          ) : null}
+          {/* Section */}
+          <View>
+            {/* Invoice number */}
+            {isNUQ(invoiceNumber) ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingLeft: normalize(5),
+                }}>
+                <Icons.FontAwesome5
+                  name={'file-invoice'}
+                  size={normalize(11)}
+                  color={'#094485'}
+                />
+                <Text
+                  style={{
+                    fontSize: 10,
+                    color: '#555',
+                    marginLeft: normalize(5),
+                  }}>
+                  {invoiceNumber}
+                </Text>
+              </View>
+            ) : null}
+            {/* Date */}
+            {isNUQ(invoiceDate) ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingLeft: normalize(5),
+                }}>
+                <Icons.FontAwesome5
+                  name={'calendar-alt'}
+                  size={normalize(11)}
+                  color={'#094485'}
+                />
+                <Text
+                  style={{
+                    fontSize: 10,
+                    color: '#555',
+                    marginLeft: normalize(5),
+                  }}>
+                  {moment(invoiceDate).format('DD-MM-YYYY')}
+                </Text>
+              </View>
+            ) : null}
+          </View>
+        </View>
+        <View>
+          <TouchableOpacity onPress={() => {
+            console.log(supplierCode);
+            navigation.navigate('CPurchaseDetails', {
+              supplierCode: supplierCode,
+              // productCode: invoiceData?.data[sectionIndex]?.productdetail[productIndex]?.insuproduct
+            });
+          }}>
+            <Icons.Entypo
+              name={'info-with-circle'}
+              size={normalize(19)}
+              color={'#094485'}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+      {/* <View>
+                {supplierName != undefined && supplierName != null && supplierName != '' ? <Text style={{ fontSize: 16, fontWeight: 'bold', color: '#094485' }}>
+                    {supplierName}
+                </Text> : null}
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    {invoiceNumber != undefined && invoiceNumber != null && invoiceNumber != '' ? <Text style={{ fontSize: 14, fontWeight: '600', color: '#000' }}>
+                        {invoiceNumber}
+                    </Text> : null}
+                    {invoiceDate != undefined && invoiceDate != null && invoiceDate != '' ? <Text style={{ fontSize: 14, fontWeight: '600', color: '#000' }}>
+                        <Text style={{ fontSize: 14, fontWeight: '400', color: '#000' }}>Date : </Text>{moment(invoiceDate).format('DD-MM-YYYY')}
+                    </Text> : null}
+                </View>
+            </View> */}
+    </View>
+  );
+};
+
+export default SupplierCard;

package/src/Components/SupplierInvoiceCard.js

@@ -0,0 +1,405 @@
+import {View, Text, Dimensions} from 'react-native';
+import React, {useState} from 'react';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import {TouchableOpacity} from 'react-native';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import moment from 'moment';
+import {normalize} from '../CommonStyle/componentStyle';
+import {Global} from '../../../../../src/Common/Global';
+import {isNUQ} from '../CommonStyle/ComponentFunctions';
+import { SwipeRow } from 'react-native-swipe-list-view';
+
+const SupplierInvoiceCard = ({
+  supplier,
+  verification,
+  screen,
+  renderLeftActions,
+  renderRightActions,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const navigation = useNavigation();
+
+  return (
+    <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 */}
+      <View>
+        {/* Top card */}
+        <View
+          style={{
+            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,
+          }}>
+          <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start'}}>
+            <View style={{flex: 1, flexDirection: 'row'}}>
+              <View
+                style={{
+                  backgroundColor: '#870808',
+                  width: normalize(10),
+                  height: normalize(50),
+                  borderStartStartRadius: normalize(5),
+                  borderStartEndRadius: normalize(5),
+                }} />
+              <View style={{padding: normalize(3), flex: 1}}>
+                {/* Supplier name */}
+                {isNUQ(supplier.suppliername) ? (
+                  <Text
+                    numberOfLines={1}
+                    style={{
+                      fontSize: normalize(12),
+                      paddingLeft: normalize(5),
+                      fontWeight: 'bold',
+                      color: Global.AppTheme.primary_color,
+                    }}>
+                    {supplier.suppliername}
+                  </Text>
+                ) : null}
+
+                {/* Section */}
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    width: '100%',
+                    paddingRight: normalize(10),
+                  }}>
+                  {/* Section */}
+                  <View style={{flex: 1}}>
+                    <View style={{flexDirection: 'row'}}>
+                      {/* Phone no */}
+                      {isNUQ(supplier.phoneno) ? (
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingLeft: normalize(5),
+                          }}>
+                          <Icons.FontAwesome5
+                            name={'phone'}
+                            size={normalize(11)}
+                            color={'#094485'}
+                          />
+                          <Text
+                            style={{
+                              fontSize: 10,
+                              color: '#555',
+                              marginLeft: normalize(5),
+                            }}>
+                            {supplier.phoneno}
+                          </Text>
+                        </View>
+                      ) : null}
+
+                      {/* email */}
+                      {isNUQ(supplier.email) ? (
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingLeft: normalize(5),
+                          }}>
+                          <Icons.FontAwesome5
+                            name={'envelope'}
+                            size={normalize(11)}
+                            color={'#094485'}
+                          />
+                          <Text
+                            numberOfLines={1}
+                            style={{
+                              fontSize: 10,
+                              color: '#555',
+                              marginLeft: normalize(5),
+                            }}>
+                            {supplier.email}
+                          </Text>
+                        </View>
+                      ) : null}
+                    </View>
+
+                    <View style={{flexDirection: 'row'}}>
+                      {/* Place */}
+                      {isNUQ(supplier.town) ? (
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingLeft: normalize(5),
+                          }}>
+                          <Icons.FontAwesome5
+                            name={'map-marker-alt'}
+                            size={normalize(11)}
+                            color={'#094485'}
+                          />
+                          <Text
+                            style={{
+                              fontSize: 10,
+                              color: '#555',
+                              marginLeft: normalize(5),
+                            }}>
+                            {supplier.town}
+                          </Text>
+                        </View>
+                      ) : null}
+
+                      {/* Pin */}
+                      {isNUQ(supplier.pin) ? (
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingLeft: normalize(5),
+                          }}>
+                          <Icons.FontAwesome5
+                            name={'map-marker-alt'}
+                            size={normalize(11)}
+                            color={'#094485'}
+                          />
+                          <Text
+                            numberOfLines={1}
+                            style={{
+                              fontSize: 10,
+                              color: '#555',
+                              marginLeft: normalize(5),
+                            }}>
+                            {supplier.pin}
+                          </Text>
+                        </View>
+                      ) : null}
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+
+            {/* Buttons Wrapper - Grade and Expand Button */}
+            <View style={{flexDirection: 'row', alignItems: 'center', paddingRight: normalize(10), paddingTop: normalize(3)}}>
+              {/* Grade Button */}
+              <View>
+                {supplier?.grade && (
+                  <View
+                    style={{
+                      height: 40,
+                      width: 40,
+                      backgroundColor: '#870808',
+                      borderRadius: 20,
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      marginRight: normalize(10),
+                    }}>
+                    <Text
+                      style={{
+                        fontSize: 20,
+                        fontWeight: 'bold',
+                        color: '#fff',
+                      }}>
+                      {supplier.grade}
+                    </Text>
+                  </View>
+                )}
+              </View>
+              {/* Expand Button */}
+              <TouchableOpacity
+                style={{
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  padding: normalize(10),
+                }}
+                onPress={() => {
+                  setExpanded(!expanded);
+                }}>
+                <View
+                  style={{
+                    width: 30,
+                    height: 30,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}>
+                  <Icons.FontAwesome5
+                    name={
+                      expanded == true
+                        ? 'chevron-circle-up'
+                        : 'chevron-circle-down'
+                    }
+                    size={normalize(18)}
+                    color={'#094485'}
+                  />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+
+        {/* Expanded section */}
+        {expanded && (
+          <View>
+            {supplier.invoicedetail != undefined &&
+            supplier.invoicedetail != null &&
+            supplier.invoicedetail != ''
+              ? supplier.invoicedetail.map((invoice, i) => (
+                  <TouchableOpacity
+                    key={invoice.invoiceno + invoice.invoicedate + i}
+                    onPress={() => {
+                      if (screen == 1) {
+                        if (verification == true) {
+                          navigation.navigate('CInvoiceRateVerificationScreen', {
+                            suppliercode: supplier.insusupplier,
+                            invoicenumber: invoice.invoiceno,
+                            suppliername: supplier.suppliername,
+                            invoicedate: invoice.invoicedate,
+                            invoicetablecode: invoice.intrpu,
+                          });
+                        } else {
+                          navigation.navigate('CInvoiceRateEntryScreen', {
+                            suppliercode: supplier.insusupplier,
+                            invoicenumber: invoice.invoiceno,
+                            suppliername: supplier.suppliername,
+                            invoicedate: invoice.invoicedate,
+                            invoicetablecode: invoice.intrpu,
+                          });
+                        }
+                      } else if (screen == 2) {
+                        if (verification == true) {
+                          navigation.navigate(
+                            'CInvoiceQualityVerificationScreen',
+                            {
+                              suppliercode: supplier.insusupplier,
+                              invoicenumber: invoice.invoiceno,
+                              suppliername: supplier.suppliername,
+                              invoicedate: invoice.invoicedate,
+                              invoicetablecode: invoice.intrpu,
+                            },
+                          );
+                        } else {
+                          navigation.navigate('CInvoiceQualityEntryScreen', {
+                            suppliercode: supplier.insusupplier,
+                            invoicenumber: invoice.invoiceno,
+                            suppliername: supplier.suppliername,
+                            invoicedate: invoice.invoicedate,
+                            invoicetablecode: invoice.intrpu,
+                          });
+                        }
+                      } else if (screen == 3) {
+                        if (verification == true) {
+                          navigation.navigate(
+                            'CInvoiceQuantityVerificationScreen',
+                            {
+                              suppliercode: supplier.insusupplier,
+                              invoicenumber: invoice.invoiceno,
+                              suppliername: supplier.suppliername,
+                              invoicedate: invoice.invoicedate,
+                              invoicetablecode: invoice.intrpu,
+                            },
+                          );
+                        }
+                      }
+                    }}
+                    style={{
+                      padding: normalize(5),
+                      marginVertical: 5,
+                      borderLeftWidth: normalize(10),
+                      borderLeftColor: '#083787',
+                      backgroundColor: '#ebf1fa',
+                      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,
+                    }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
+                      <View>
+                        {/* invoice no */}
+                        {isNUQ(invoice.invoiceno) ? (
+                          <Text
+                            numberOfLines={1}
+                            style={{
+                              fontSize: normalize(12),
+                              paddingLeft: normalize(5),
+                              fontWeight: 'bold',
+                              color: Global.AppTheme.primary_color,
+                            }}>
+                            {invoice.invoiceno}
+                          </Text>
+                        ) : null}
+                        {/* Date */}
+                        {/* Indent no */}
+                        {isNUQ(invoice.invoicedate) ? (
+                          <View
+                            style={{
+                              flexDirection: 'row',
+                              alignItems: 'center',
+                              paddingLeft: normalize(5),
+                            }}>
+                            <Icons.FontAwesome5
+                              name={'calendar-alt'}
+                              size={normalize(11)}
+                              color={'#094485'}
+                            />
+                            <Text
+                              style={{
+                                fontSize: 10,
+                                color: '#555',
+                                marginLeft: normalize(5),
+                              }}>
+                              {moment(invoice.invoicedate).format('DD-MM-YYYY')}
+                            </Text>
+                          </View>
+                        ) : null}
+                      </View>
+                      <Text style={{color: '#094485', fontSize: normalize(10)}}>
+                        Total Quantity :{' '}
+                        <Text
+                          style={{
+                            fontSize: normalize(10),
+                            fontWeight: 'bold',
+                            color: '#555',
+                          }}>
+                          {invoice.totalpackingno}
+                        </Text>
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
+                ))
+              : null}
+          </View>
+        )}
+      </View>
+    </SwipeRow>
+  );
+};
+
+export default SupplierInvoiceCard;