digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/ExpenseEntries.js

@@ -0,0 +1,837 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  SafeAreaView,
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+  Linking,
+  Alert,
+  PixelRatio,
+} from 'react-native';
+import React, { useState, useEffect, useRef, useCallback } 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,
+  formatDateTimeShort,
+  formatShortDate,
+  getCurrentMonthName,
+  HP,
+  ICON_SIZES,
+  mergeDateTime,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  changeClientType,
+  getClientDetails,
+  getClientTransactions,
+  insertPhoneNum,
+  setPayDate,
+  softDeleteClient,
+  switchClientToSupplier,
+} from '../database/clients';
+import {
+  BottomView,
+  CountryPhoneInput,
+  CreateExpenseAccount,
+  SearchBar,
+  Transaction,
+} from '../components';
+import Modal from 'react-native-modal';
+import {
+  CLIENT_DETAILS,
+  STATUS_BAR_COLOR,
+} from '../redux/reducers/client/client_types';
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import ViewShot from 'react-native-view-shot';
+import Share from 'react-native-share';
+import {
+  Menu,
+  MenuOptions,
+  MenuOption,
+  MenuTrigger,
+} from 'react-native-popup-menu';
+import {
+  getExpenseCategoriesWithTotals,
+  getExpenseTransactions,
+  softDeleteExpenseCategory,
+  updateExpenseAccountName,
+} from '../database/expense';
+import { AutoSizeText, ResizeTextMode } from 'react-native-auto-size-text';
+
+export default function ExpenseEntries({ navigation, route }) {
+  const dispatch = useDispatch();
+
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+
+  const eId = route?.params?.eId;
+  let monthName = getCurrentMonthName();
+
+  const [Entries, setEntries] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [ExpenseCategoryDetails, setExpenseCategoryDetails] = useState(null);
+  const [Value, setValue] = useState('');
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', async () => {
+      dispatch({
+        type: STATUS_BAR_COLOR,
+        color: COLORS.primaryColor
+      })
+      await getExpenseCategoryDetails();
+      getTransactions();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  const getTransactions = () => {
+    getExpenseTransactions(selectBusiness?.id, eId)
+      .then((res) => {
+        const ordered = [...res].sort(
+          (a, b) => new Date(a.entryDate) - new Date(b.entryDate)
+        );
+
+        let total = 0;
+        const withBalance = ordered.map((item) => {
+          total += Number(item.amount) || 0;
+          return { ...item, balance: total };
+        });
+
+        // reverse for showing latest first
+        setEntries(withBalance.reverse());
+      })
+      .catch((err) => console.log('Error:', err));
+  };
+
+  const getExpenseCategoryDetails = async () => {
+    let all = await getExpenseCategoriesWithTotals(selectBusiness?.id);
+    let filtered = all?.find((item) => item?.id == eId);
+
+    setExpenseCategoryDetails(filtered);
+  };
+
+  const getTotalAmount = () => {
+    return Entries.reduce((total, item) => {
+      return total + Number(item?.amount || 0);
+    }, 0);
+  };
+
+  const filteredEntries = Entries.filter((item) => {
+    if (!searchTerm.trim()) return true;
+
+    const term = searchTerm.toLowerCase();
+
+    const billNo = item?.details?.includes('_bill_')
+      ? item?.details?.split('_bill_')[1]?.toLowerCase()
+      : '';
+
+    const details = item?.details?.split('_bill_')[0]?.toLowerCase() || '';
+    const amount = String(item?.amount || '').toLowerCase();
+    const balance = String(item?.balance || '').toLowerCase();
+
+    return (
+      billNo.includes(term) ||
+      details.includes(term) ||
+      amount.includes(term) ||
+      balance.includes(term)
+    );
+  });
+
+  const onDeletePress = () => {
+    Alert.alert(
+      'Delete expense account?',
+      'Remove this account from the list?',
+      [
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancel'),
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await softDeleteExpenseCategory(ExpenseCategoryDetails?.id);
+              navigation.goBack();
+            } catch (err) {
+              console.log('Error soft deleting transaction:', err);
+            }
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
+
+
+  return (
+    <SafeAreaView style={Styles._mainContainer}>
+      <LinearGradient
+        style={[Styles._headerMain, { justifyContent: 'space-between' }]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+      >
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={() => navigation?.goBack()}
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 5,
+          }}
+        >
+          <Ionicons
+            name={'chevron-back'}
+            color={COLORS.whiteColor}
+            size={60 / PixelRatio.get()}
+          />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            Styles._dataMain,
+            {
+              width: '50%',
+              position: 'absolute',
+              left: '10%',
+            },
+          ]}
+          activeOpacity={0.8}
+          onPress={() => {
+            setValue(ExpenseCategoryDetails?.name);
+            setTimeout(() => {
+              setDrawerVisible(true);
+            }, 150);
+          }}
+        >
+          <View style={Styles._nameMain}>
+            <Text numberOfLines={1} style={Styles._nameTxt}>
+              {ExpenseCategoryDetails?.name}
+            </Text>
+          </View>
+          <Text style={Styles._clickText}>Click here to edit</Text>
+        </TouchableOpacity>
+
+        <Menu style={{ height: '100%', width: '10%' }}>
+          <MenuTrigger
+            style={{
+              width: '100%',
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Ionicons
+              name={'ellipsis-vertical'}
+              color={COLORS.whiteColor}
+              size={25}
+            />
+          </MenuTrigger>
+          <MenuOptions>
+            <MenuOption
+              style={{
+                backgroundColor: COLORS.whiteColor,
+                height: 40,
+                justifyContent: 'center',
+                padding: 10,
+              }}
+              // onSelect={() => navigation.navigate('Profile', { amount, type })}
+              onSelect={() => {
+                setValue(ExpenseCategoryDetails?.name);
+                setTimeout(() => {
+                  setDrawerVisible(true);
+                }, 150);
+              }}
+            >
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 14,
+                }}
+              >
+                Edit
+              </Text>
+            </MenuOption>
+
+            <MenuOption
+              style={{
+                backgroundColor: COLORS.whiteColor,
+                height: 40,
+                justifyContent: 'censer',
+                padding: 10,
+              }}
+              onSelect={onDeletePress}
+            >
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 14,
+                }}
+              >
+                Delete
+              </Text>
+            </MenuOption>
+          </MenuOptions>
+        </Menu>
+      </LinearGradient>
+
+      {!Entries?.length && (
+        <View style={Styles._privacyMain}>
+          <Ionicons name={'lock-closed'} color={'green'} size={20} />
+
+          <Text style={Styles._privacyText}>
+            Only you can see these entries
+          </Text>
+        </View>
+      )}
+      {!!Entries.length && (
+        <View style={Styles._contentMain}>
+          <LinearGradient
+            style={[Styles._headerMain, { height: 40 }]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+          />
+          <View style={Styles._calculationMainBank}>
+            <View style={Styles._calculationMain}>
+              <Text
+                style={{
+                  color: COLORS.redColor,
+                  fontFamily: FONT_MEDIUM,
+                  fontSize: 16,
+                }}
+              >
+                Rs {addCommas(Number(getTotalAmount()))}
+              </Text>
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_MEDIUM,
+                  fontSize: 14,
+                }}
+              >
+                Total Expense
+              </Text>
+            </View>
+            <TouchableOpacity
+              style={{
+                width: '20%',
+                alignItems: 'center',
+                borderLeftColor: COLORS.borderColor,
+                borderLeftWidth: 1,
+                paddingVertical: 5,
+              }}
+              activeOpacity={0.8}
+              onPress={() => navigation.navigate('ExpenseEntryReport', { eId })}
+            >
+              <Ionicons
+                color={COLORS.primaryColor}
+                size={25}
+                name={'chevron-forward'}
+              />
+            </TouchableOpacity>
+          </View>
+
+          <View style={[Styles._entriesMain, { marginTop: 60 }]}>
+            <SearchBar
+              onChangeText={(text) => setSearchTerm(text)}
+              containerStyle={{
+                // height: '90%',
+                width: '95%',
+                borderRadius: 0,
+                borderTopWidth: 0,
+                borderBottomWidth: 0,
+                borderLeftWidth: 0,
+                borderRightWidth: 0,
+                alignSelf: "center"
+                // borderWidth:0
+              }}
+            />
+            <View style={Styles._tableHeader}>
+              <View style={[Styles._headerCell, { paddingHorizontal: 10 }]}>
+                <Text style={Styles._headerCellText}>Entries</Text>
+              </View>
+
+              <View
+                style={[
+                  Styles._headerCell,
+                  {
+                    width: '30%',
+                    alignItems: 'flex-end',
+
+                    paddingHorizontal: 10,
+                  },
+                ]}
+              >
+                <Text style={Styles._headerCellText}>Expense</Text>
+              </View>
+            </View>
+
+            <FlatList
+              data={filteredEntries}
+              keyExtractor={(item, index) => index.toString()}
+              scrollEnabled
+              contentContainerStyle={{ paddingBottom: 150 }}
+              renderItem={({ item, index }) => (
+                <TouchableOpacity
+                  style={Styles._tableHeader}
+                  activeOpacity={0.8}
+                  onPress={() =>
+                    navigation.navigate('ExpenseEntryDetails', { id: item?.id })
+                  }
+                >
+                  <View style={[Styles._headerCell, { gap: 8 }]}>
+                    <Text
+                      style={[
+                        Styles._headerCellText,
+                        {
+                          paddingHorizontal: 10,
+                        },
+                      ]}
+                    >
+                      {formatDateTime(item?.entryDate)}
+                    </Text>
+                    <View
+                      style={{
+                        // width: '35%',
+                        alignItems: 'flex-start',
+                        paddingHorizontal: 10,
+                      }}
+                    >
+                      <Text
+                        style={[
+                          Styles._headerCellText,
+                          {
+                            backgroundColor: 'rgba(255,0,0,0.1)',
+                            paddingHorizontal: 8,
+                          },
+                        ]}
+                      >
+                        Bal. {item?.balance}
+                      </Text>
+                    </View>
+
+                    {item?.isCash && (
+                      <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>
+                    )}
+
+                    {item?.details?.includes('_bill_') &&
+                      item?.details?.split('_bill_')[1] ? (
+                      <View style={{ width: '90%', alignItems: 'flex-start' }}>
+                        <Text
+                          style={[
+                            Styles._headerCellText,
+                            { paddingHorizontal: 10 },
+                          ]}
+                        >
+                          Bill No: {item.details.split('_bill_')[1]}
+                        </Text>
+                      </View>
+                    ) : null}
+
+                    {item?.details?.split('_bill_')[0] ? (
+                      <View style={{ width: '100%', alignItems: 'flex-start' }}>
+                        <Text
+                          numberOfLines={2}
+                          style={[
+                            Styles._headerCellText,
+                            {
+                              paddingHorizontal: 10,
+                              color: COLORS.blackColor,
+                              opacity: 1,
+                            },
+                          ]}
+                        >
+                          {item.details.split('_bill_')[0]?.trim()}
+                        </Text>
+                      </View>
+                    ) : null}
+
+                    {item?.attachments && item?.attachments.length > 0 && (
+                      <Ionicons name={'attach'} color={COLORS.gray} size={22} />
+                    )}
+                  </View>
+
+                  <View
+                    style={[
+                      Styles._headerCell,
+                      {
+                        width: '30%',
+                        alignItems: 'flex-end',
+                        backgroundColor: 'rgba(255,0,0,0.05)',
+                        paddingHorizontal: 10,
+                      },
+                    ]}
+                  >
+                    <AutoSizeText
+                      mode={ResizeTextMode.max_lines}
+                      numberOfLines={1}
+                      fontSize={TEXT_SIZES.CARD_AMOUNT}
+                      style={[
+                        Styles._headerCellText,
+                        {
+                          color: COLORS.redColor,
+                          fontFamily: FONT_MEDIUM,
+                          opacity: 1,
+                          fontSize: TEXT_SIZES.CARD_AMOUNT,
+                        },
+                      ]}
+                    >
+                      {addCommas(Number(item?.amount))}
+                    </AutoSizeText>
+                    {/* <Text
+                      style={[
+                        Styles._headerCellText,
+                        {
+                          color: COLORS.redColor,
+                          fontFamily: FONT_MEDIUM,
+                          opacity: 1,
+                          fontSize: TEXT_SIZES.CARD_AMOUNT,
+                        },
+                      ]}
+                    >
+                      {addCommas(Number(item?.amount))}
+                    </Text> */}
+                  </View>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </View>
+      )}
+
+      <BottomView
+        style={{
+          paddingHorizontal: '2.5%',
+          width: '100%',
+          justifyContent: 'center',
+        }}
+      >
+        <TouchableOpacity
+          style={Styles._btn}
+          activeOpacity={0.8}
+          onPress={() => {
+            navigation.navigate('ExpenseEntry', { eId });
+          }}
+        >
+          <LinearGradient
+            colors={[COLORS.redColor, COLORS.gradient_red]}
+            style={{
+              width: '100%',
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'row',
+              // gap: 5,
+            }}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+          >
+            <View
+              style={{
+                backgroundColor: COLORS.whiteColor,
+                borderRadius: 50,
+                marginRight: 10,
+              }}
+            >
+              <Ionicons color={COLORS.blackColor} name={'remove'} size={20} />
+            </View>
+
+            <Text style={Styles._btnTitle}>Expense</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      </BottomView>
+
+      <CreateExpenseAccount
+        isEdit
+        value={String(Value)}
+        visible={drawerVisible}
+        onClose={() => setDrawerVisible(false)}
+        onNext={async (expenseName) => {
+          console.log('Next pressed', expenseName);
+          await updateExpenseAccountName(
+            ExpenseCategoryDetails?.id,
+            expenseName
+          );
+          await getExpenseCategoryDetails();
+          setDrawerVisible(false);
+        }}
+      />
+    </SafeAreaView>
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  _dataMain: {
+    width: '80%',
+    height: '100%',
+    // backgroundColor: "red",
+    justifyContent: 'center',
+  },
+  _nameMain: {
+    width: '100%',
+    height: '50%',
+    // backgroundColor: "pink",
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  _badge: {
+    // height:10,
+    backgroundColor: COLORS.whiteColor,
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 50,
+  },
+  _badgeText: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 10,
+    color: COLORS.primaryColor,
+  },
+  _nameTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 15,
+  },
+  _clickText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _btnsMain: {
+    width: WP(100),
+    height: 60,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 25,
+  },
+  _btn: {
+    width: '49%',
+    height: 50,
+    overflow: 'hidden',
+    borderRadius: 100,
+  },
+  _btnTitle: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  _privacyMain: {
+    // width: "70%",
+    // height: 40,
+    backgroundColor: COLORS.whiteColor,
+    alignSelf: 'center',
+    marginTop: 15,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    gap: 10,
+  },
+  _privacyText: {
+    color: COLORS.blackColor,
+    opacity: 0.6,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _contentMain: {
+    flex: 1,
+    width: '100%',
+    // height: "85%",
+    // backgroundColor: "red",
+    alignItems: 'center',
+  },
+  _calculationMain: {
+    // height:"70%",
+    width: '80%',
+    // backgroundColor: COLORS.greenColor,
+    justifyContent: 'center',
+    // paddingLeft: 20,
+    // gap: 2,
+  },
+  _optionsMain: {
+    width: '100%',
+    // height: 80,
+    // backgroundColor: "red",
+    marginTop: 60,
+    marginBottom: 10,
+  },
+  _listItem: {
+    width: HP(9),
+    // height: 65,
+    backgroundColor: COLORS.whiteColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: TEXT_SIZES.BORDER_RADIUS,
+    elevation: 5,
+    marginVertical: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    gap: 5,
+    paddingVertical: 5,
+    // marginHorizontal:3
+  },
+  _entriesMain: {
+    flex: 1,
+    width: '100%',
+    // height: 40,
+    backgroundColor: COLORS.whiteColor,
+    // paddingHorizontal: 10,
+    marginTop: 10,
+    paddingTop: 10,
+    // paddingHorizontal: '2.5%',
+  },
+  _tableHeader: {
+    width: '95%',
+    // height: 30,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    // marginTop: 10,
+    borderBottomColor: COLORS.gray,
+    borderBottomWidth: 0.5,
+    alignSelf: "center"
+  },
+  _headerCell: {
+    width: '70%',
+    // height: '100%',
+    // backgroundColor: "pink",
+    justifyContent: 'center',
+    // paddingLeft: 5,
+    paddingVertical: 10,
+  },
+  _headerCellText: {
+    color: COLORS.blackColor,
+    opacity: 0.5,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+  },
+  _icon: {
+    width: 40,
+    height: 40,
+    marginHorizontal: 15,
+  },
+  _calculationMainBank: {
+    width: '95%',
+    height: 65,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 10,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    // justifyContent: "center",
+    paddingLeft: 20,
+    gap: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  _modalMain: {
+    width: WP(100),
+    // height: HP(30),
+    backgroundColor: COLORS.whiteColor,
+    alignSelf: 'center',
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+  },
+  _modal: {
+    padding: 0,
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  _dateOption: {
+    width: '100%',
+    height: 40,
+    // backgroundColor: "red",
+    marginVertical: 5,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _numberBtn: {
+    width: 70,
+    height: 40,
+    // backgroundColor:"red",
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _numberTxt: {
+    color: COLORS.primaryColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+  },
+});