digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/ExpenseEntryDetails.js

@@ -0,0 +1,612 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  SafeAreaView,
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+  TextInput,
+  Keyboard,
+  Alert,
+} from 'react-native';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+  addCommas,
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  isPdfFile,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { viewDocument } from '@react-native-documents/viewer';
+import Sound, {
+  AudioEncoderAndroidType,
+  AudioSourceAndroidType,
+  AVEncoderAudioQualityIOSType,
+  AVEncodingOption,
+  RecordBackType,
+  PlayBackType,
+  createSound,
+} from 'react-native-nitro-sound';
+import { useSelector, useDispatch } from 'react-redux';
+import LottieView from 'lottie-react-native';
+import { BottomView } from '../components';
+import {
+  getItemDetailsByItemId,
+  getItemsByBusiness,
+  softDeleteItemDetail,
+  updateItemQty,
+} from '../database/stock';
+import {
+  getExpenseTransactions,
+  softDeleteExpenseTransaction,
+} from '../database/expense';
+
+export default function ExpenseEntryDetails({ navigation, route }) {
+  const animationRef = useRef(null);
+  let id = route?.params?.id;
+
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+
+  const [IsPlaying, setIsPlaying] = useState(false);
+  const [PlayLoading, setPlayLoading] = useState(false);
+  const [Entry, setEntry] = useState(null);
+  const [ItemDetails, setItemDetails] = useState(null);
+  const [BillNo, setBillNo] = useState('');
+
+  const onStartPlay = async (fileUrl) => {
+    setPlayLoading(true);
+    // Set up playback progress listener
+    Sound.addPlayBackListener((e) => {
+      console.log('Playback progress:', e.currentPosition, e.duration);
+      setIsPlaying(true);
+      animationRef.current?.play();
+      // setCurrentPosition(e.currentPosition);
+      // setTotalDuration(e.duration);
+      // setPlayTime(Sound.mmssss(Math.floor(e.currentPosition)));
+      // setDuration(Sound.mmssss(Math.floor(e.duration)));
+    });
+
+    // Set up playback end listener
+    Sound.addPlaybackEndListener((e) => {
+      console.log('Playback completed:', e);
+      // Handle playback completion
+      setIsPlaying(false);
+      animationRef.current?.pause();
+      // setCurrentPosition(0);
+    });
+
+    const result = await Sound.startPlayer(fileUrl);
+    setPlayLoading(false);
+    console.log('Playback started:', result);
+  };
+
+  const onStopPlay = async () => {
+    Sound.stopPlayer();
+    Sound.removePlayBackListener();
+    Sound.removePlaybackEndListener();
+
+    animationRef.current?.pause();
+    setIsPlaying(false);
+    setPlayLoading(false);
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', async () => {
+      try {
+        await getExpenseItem();
+      } catch (error) {
+        console.log('❌ Error fetching item details:', error);
+      }
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  const getExpenseItem = async () => {
+    let all = await getExpenseTransactions(selectBusiness?.id);
+    let filtered = all.find((item) => item?.id == id);
+    let billNo = filtered?.details?.split('_')[2];
+    setBillNo(billNo);
+
+    setItemDetails(filtered);
+  };
+
+  const onDeletePress = () => {
+    Alert.alert(
+      'Delete entry?',
+      'Do you want to delete this entry?',
+      [
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancel'),
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await softDeleteExpenseTransaction(ItemDetails?.id);
+              navigation.goBack();
+            } catch (err) {
+              console.log('Error soft deleting transaction:', err);
+            }
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  return (
+    <SafeAreaView style={Styles._mainContainer}>
+      <LinearGradient
+        style={Styles._headerMain}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+      >
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={() => navigation?.goBack()}
+        >
+          <Ionicons name={'chevron-back'} color={COLORS.whiteColor} size={25} />
+        </TouchableOpacity>
+
+        <Text style={Styles._headerTitle}>Entry Detail</Text>
+      </LinearGradient>
+
+      <LinearGradient
+        style={[Styles._headerMain, { height: 30 }]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+      />
+      <View style={Styles._searchMain}>
+        <View style={Styles._rowMain}>
+          <View
+            style={{
+              height: '100%',
+              justifyContent: 'center',
+              paddingRight: 10,
+            }}
+          >
+            <View
+              style={{
+                width: 50,
+                height: 50,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: COLORS.lightGrey,
+                borderRadius: 100,
+              }}
+            >
+              <Ionicons
+                color={
+                  Number(Entry?.stockIN) > 0
+                    ? COLORS.greenColor
+                    : COLORS.redColor
+                }
+                name={
+                  Number(Entry?.stockIN) > 0
+                    ? 'add-circle-sharp'
+                    : 'remove-circle-sharp'
+                }
+                size={35}
+              />
+            </View>
+          </View>
+
+          <View
+            style={{ width: '60%', height: '100%', justifyContent: 'center' }}
+          >
+            <Text style={Styles._heading}>Expense</Text>
+            <Text style={Styles._date}>
+              {formatDateTime(ItemDetails?.entryDate)}
+            </Text>
+          </View>
+
+          <View
+            style={{
+              width: '25%',
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'flex-end',
+            }}
+          >
+            <Text
+              style={[
+                Styles._heading,
+                { fontFamily: FONT_BOLD, color: COLORS.redColor },
+              ]}
+            >
+              Rs {String(ItemDetails?.amount)}
+            </Text>
+          </View>
+        </View>
+        {ItemDetails?.isCash && (
+        <View
+          style={[
+            Styles._rowMain,
+            { flexDirection: 'column', justifyContent: 'space-around' },
+          ]}
+        >
+          
+            <View
+              style={{
+                // width: '35%',
+                alignItems: 'center',
+                paddingHorizontal: 10,
+                alignSelf: "flex-start"
+              }}
+            >
+              <Text
+                style={[
+                  Styles._headerCellText,
+                  {
+                    backgroundColor: COLORS.redColor,
+                    opacity: 1,
+                    color: COLORS.whiteColor,
+                    paddingVertical: 4,
+                    paddingHorizontal: 8,
+                    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+                  },
+                ]}
+              >
+                Cash Out
+              </Text>
+            </View>
+        </View>
+        )}
+
+        {ItemDetails?.details && ItemDetails?.details !== '_bill_' && (
+          <View
+            style={[
+              Styles._rowMain,
+              { flexDirection: 'column', justifyContent: 'space-around' },
+            ]}
+          >
+            <View
+              style={{
+                width: '100%',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+              }}
+            >
+              <Text style={Styles._heading2}>Details</Text>
+              <Text></Text>
+            </View>
+
+            <View
+              style={{
+                width: '100%',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+              }}
+            >
+              <Text style={Styles._heading}>
+                {ItemDetails?.details?.split('_')[0]}
+              </Text>
+              <Text></Text>
+            </View>
+          </View>
+        )}
+        {BillNo && (
+          <View
+            style={[
+              Styles._rowMain,
+              { flexDirection: 'column', justifyContent: 'space-around' },
+            ]}
+          >
+            <View
+              style={{
+                width: '100%',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+              }}
+            >
+              <Text style={Styles._heading2}>Bill No</Text>
+              <Text></Text>
+            </View>
+
+            <View
+              style={{
+                width: '100%',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+              }}
+            >
+              <Text style={Styles._heading}>{BillNo}</Text>
+              <Text></Text>
+            </View>
+          </View>
+        )}
+        {ItemDetails?.attachments && ItemDetails?.attachments?.length != 0 && (
+          <View
+            style={[
+              Styles._rowMain,
+              {
+                flexDirection: 'column',
+                justifyContent: 'space-around',
+                height: 130,
+              },
+            ]}
+          >
+            <View
+              style={{
+                width: '100%',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+              }}
+            >
+              <Text style={Styles._heading2}>Attachments</Text>
+              <Text></Text>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 10 }}>
+              {ItemDetails?.attachments?.map((i, index) => (
+                <TouchableOpacity
+                  key={index}
+                  activeOpacity={0.8}
+                  style={{
+                    width: 80,
+                    height: 80,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                  onPress={() => {
+                    viewDocument({ uri: i?.local_path });
+                  }}
+                >
+                  {isPdfFile(i?.local_path) ? (
+                    <Ionicons
+                      name="document-text-outline"
+                      size={70}
+                      color={COLORS.primaryColor}
+                      style={{ margin: 0 }}
+                    />
+                  ) : (
+                    <Image
+                      source={{ uri: i?.local_path }}
+                      style={{
+                        width: 70,
+                        height: 70,
+                        margin: 0,
+                        borderRadius: TEXT_SIZES.BORDER_RADIUS,
+                      }}
+                      resizeMode="cover"
+                    />
+                  )}
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+        )}
+
+        {ItemDetails?.local_path && (
+          <View
+            style={[
+              Styles._rowMain,
+              {
+                justifyContent: 'center',
+                gap: 20,
+                alignItems: 'center',
+                height: 60,
+              },
+            ]}
+          >
+            {IsPlaying ? (
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={() => {
+                  onStopPlay();
+                }}
+              >
+                <Ionicons
+                  name={'pause'}
+                  color={COLORS.primaryColor}
+                  size={30}
+                />
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={() => {
+                  onStartPlay(ItemDetails?.local_path);
+                }}
+              >
+                <Ionicons name={'play'} color={COLORS.primaryColor} size={30} />
+              </TouchableOpacity>
+            )}
+
+            <LottieView
+              source={require('../assets/animations/voice_visualization.json')}
+              autoPlay={false}
+              loop
+              style={{ width: '75%', height: 55 }}
+              ref={animationRef}
+            />
+          </View>
+        )}
+
+        <TouchableOpacity
+          style={[
+            Styles._rowMain,
+            {
+              borderBottomWidth: 0,
+              justifyContent: 'center',
+              gap: 5,
+              alignItems: 'center',
+              height: 60,
+            },
+          ]}
+          activeOpacity={0.8}
+          onPress={() => {
+            if (!Entry?.bill) {
+              navigation.navigate('ExpenseEntry', {
+                eId: ItemDetails?.eId,
+                entryId: ItemDetails?.id,
+              });
+            } else {
+              Alert.alert(
+                'Edit from Bill Book Only!',
+                'You can edit this entry from bill book only'
+              );
+            }
+          }}
+        >
+          <Ionicons
+            name={'pencil-outline'}
+            color={COLORS.primaryColor}
+            size={25}
+          />
+          <Text
+            style={{
+              color: COLORS.primaryColor,
+              fontFamily: FONT_MEDIUM,
+              fontSize: 16,
+            }}
+          >
+            EDIT ENTRY
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      <BottomView style={Styles._btnsMain}>
+        <TouchableOpacity
+          activeOpacity={0.8}
+          style={Styles._bottomBtn}
+          onPress={() => {
+            if (!Entry?.bill) {
+              onDeletePress();
+            } else {
+              Alert.alert(
+                'Delete from Bill Book Only!',
+                'You can delete this entry from bill book only'
+              );
+            }
+          }}
+        >
+          <Ionicons name={'trash-outline'} color={COLORS.redColor} size={20} />
+
+          <Text
+            style={{
+              color: COLORS.redColor,
+              fontFamily: FONT_MEDIUM,
+              fontSize: TEXT_SIZES.BUTTON_TEXT,
+            }}
+          >
+            DELETE ENTRY
+          </Text>
+        </TouchableOpacity>
+      </BottomView>
+    </SafeAreaView>
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    // justifyContent: "space-between",
+    paddingHorizontal: Platform.OS == 'android' && 10,
+    gap: 15,
+  },
+  _headerTitle: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 15,
+  },
+  _searchMain: {
+    width: '95%',
+    // height: 500,
+    backgroundColor: COLORS.whiteColor,
+    alignSelf: 'center',
+    position: 'absolute',
+    top: 60,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    // alignItems: 'center',
+    overflow: 'hidden',
+    paddingHorizontal: 15,
+    justifyContent: 'space-between',
+  },
+  _rowMain: {
+    width: '100%',
+    height: 80,
+    // backgroundColor:"red",
+    flexDirection: 'row',
+    paddingVertical: 10,
+    borderBottomColor: COLORS.lightGray,
+    borderBottomWidth: 1,
+  },
+  _heading: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 13,
+    color: COLORS.blackColor,
+  },
+  _date: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+    color: COLORS.gray,
+  },
+  _heading2: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 13,
+    color: COLORS.gray,
+  },
+  _btnsMain: {
+    width: WP(100),
+    // height: 70,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    // bottom: bottomNavBarH,
+    bottom: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingTop: 8,
+  },
+  _bottomBtn: {
+    width: '95%',
+    height: 50,
+    backgroundColor: COLORS.whiteColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: 100,
+    borderColor: COLORS.redColor,
+    borderWidth: 1,
+    paddingHorizontal: 20,
+    gap: 10,
+  },
+});