digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/AllTransactions.js

@@ -0,0 +1,1138 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  SafeAreaView,
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+  Keyboard,
+} 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_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  formatDateTimeShort,
+  formatMyDate,
+  formatShortDate,
+  fromJsDateToSql,
+  HP,
+  ICON_SIZES,
+  mergeDateTime,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  getClientDetails,
+  getClientTransactions,
+  getTransactionsByClientType,
+  insertPhoneNum,
+  setPayDate,
+} from '../database/clients';
+import {
+  BottomView,
+  CountryPhoneInput,
+  SearchBar,
+  Transaction,
+} from '../components';
+import Modal from 'react-native-modal';
+import {
+  ALL_TRANSACTIONS,
+  CLIENT_DETAILS,
+} 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 { generatePDF } from 'react-native-html-to-pdf';
+import { viewDocument } from '@react-native-documents/viewer';
+import {
+  allTransactionsBanksTemplate,
+  allTransactionsTemplate,
+} from '../htmlTemplates/htmlTemplates';
+import RNPrint from 'react-native-print';
+
+let deviceH = Dimensions.get('screen').height;
+let windowH = Dimensions.get('window').height;
+
+let bottomNavBarH = deviceH - windowH;
+
+export default function AllTransactions({ navigation, route }) {
+  const dispatch = useDispatch();
+  let clientType = route?.params?.clientType;
+
+  const [StartDate, setStartDate] = useState('');
+  const [EndDate, setEndDate] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [IsFilterModal, setIsFilterModal] = useState(false);
+  const [SelectedFilter, setSelectedFilter] = useState('All');
+  const [IsReverse, setIsReverse] = useState(false);
+
+  const Transactions = useSelector((state) => state.client.all_transactions);
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const [AllTransactions, setAllTransactions] = useState(Transactions);
+  // const homeDetails = route?.params?.homeDetails;
+  // let amount = homeDetails?.total_subamount - homeDetails?.total_amount;
+
+  const showStartDate = () => {
+    DateTimePickerAndroid.open({
+      value: StartDate || new Date(),
+      onChange: onChangeStartDate,
+      mode: 'date',
+      is24Hour: false,
+      // Start date can't be after EndDate (if chosen)
+      maximumDate: EndDate || new Date(),
+    });
+  };
+
+  const onChangeStartDate = async (event, selectedDate) => {
+    const currentDate = selectedDate;
+    if (event?.type == 'set') {
+      setStartDate(currentDate);
+    }
+  };
+
+  const showEndDate = () => {
+    DateTimePickerAndroid.open({
+      value: EndDate || new Date(),
+      onChange: onChangeEndDate,
+      mode: 'date',
+      is24Hour: false,
+      ...(StartDate ? { minimumDate: StartDate } : {}),
+      maximumDate: new Date(),
+    });
+  };
+
+  const onChangeEndDate = async (event, selectedDate) => {
+    const currentDate = selectedDate;
+    if (event?.type == 'set') {
+      setEndDate(currentDate);
+    }
+  };
+
+  const calculateBalances = (transactions) => {
+    let balance = 0;
+    const reversed = [...transactions].reverse();
+
+    const withBalances = reversed.map((t) => {
+      const amount = parseFloat(t.amount) || 0;
+      const subamount = parseFloat(t.subamount) || 0;
+      balance += subamount - amount;
+      return { ...t, balance };
+    });
+
+    return withBalances.reverse();
+  };
+
+  const [balancesData, setBalancesData] = useState(
+    calculateBalances(AllTransactions)
+  );
+
+  const [searchText, setSearchText] = useState('');
+  const [filteredData, setFilteredData] = useState(balancesData);
+
+  const handleSearch = (text) => {
+    if (text.trim() === '') {
+      // If no text, show full data
+      setFilteredData(balancesData);
+    } else {
+      const filtered = balancesData.filter((item) => {
+        const nameMatch = item.client_name
+          ?.toLowerCase()
+          .includes(text.toLowerCase());
+        const notesMatch = item.notes
+          ?.toLowerCase()
+          .includes(text.toLowerCase());
+        const amountMatch = item.amount?.toString().includes(text);
+        const balanceMatch = item.balance?.toString().includes(text);
+        // Add more fields if needed
+        return nameMatch || notesMatch || amountMatch || balanceMatch;
+      });
+      setFilteredData(filtered);
+    }
+  };
+
+  const totalAmount = filteredData.reduce(
+    (acc, curr) => acc + Number(curr.amount),
+    0
+  );
+
+  const totalSubAmount = filteredData.reduce(
+    (acc, curr) => acc + Number(curr.subamount),
+    0
+  );
+  
+  const netBalance = Number(totalSubAmount) - Number(totalAmount);
+  const totalBalance = balancesData.reduce(
+    (acc, curr) => acc + Number(curr.balance),
+    0
+  );
+
+  let type = 'none';
+
+  if (netBalance > 0) {
+    type = 'receivable';
+  } else if (netBalance < 0) {
+    type = 'payable';
+  }
+
+  let html = allTransactionsTemplate(
+    balancesData || [],
+    StartDate,
+    EndDate,
+    netBalance,
+    totalAmount,
+    totalSubAmount,
+    totalBalance,
+    type
+  );
+
+  let html2 = allTransactionsBanksTemplate(
+    balancesData || [],
+    StartDate,
+    EndDate,
+    netBalance,
+    totalAmount,
+    totalSubAmount,
+    totalBalance,
+    type
+  );
+
+  const createPDF = async (isPrint) => {
+    let options = {
+      html: clientType == 2 ? html2 : html,
+      fileName: 'report',
+      base64: false,
+    };
+
+    let results = await generatePDF(options);
+    if (isPrint) {
+      await RNPrint.print({ filePath: results.filePath });
+    } else {
+      viewDocument({ uri: 'file://' + results?.filePath });
+    }
+    // console.log(results?.filePath);
+  };
+
+  const applyFilter = () => {
+    getTransactionsByClientType(
+      clientType,
+      StartDate ? fromJsDateToSql(StartDate) : null,
+      EndDate ? fromJsDateToSql(EndDate) : null,
+      selectBusiness?.id
+    ).then((res) => {
+      dispatch({
+        type: ALL_TRANSACTIONS,
+        payload: res,
+      });
+
+      setTimeout(() => {
+        setFilteredData(calculateBalances(res));
+      }, 300);
+    });
+  };
+
+  useEffect(() => {
+    applyFilter();
+  }, [StartDate, EndDate]);
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getTransactionsByClientType(clientType, null, null, selectBusiness?.id)
+        .then((res) => {
+          setAllTransactions(res);
+          let balances = calculateBalances(res);
+          setBalancesData(balances);
+          setFilteredData(balances);
+        })
+        .catch((err) => console.error(err));
+    });
+    return () => unsubscribe();
+  }, [navigation]);
+
+  const showSingleDayDate = () => {
+    DateTimePickerAndroid.open({
+      value: StartDate || new Date(),
+      onChange: onChangeSingleDayDate,
+      mode: 'date',
+      is24Hour: false,
+      maximumDate: new Date(),
+    });
+  };
+
+  const onChangeSingleDayDate = async (event, selectedDate) => {
+    const currentDate = selectedDate;
+    if (event?.type == 'set') {
+      setSelectedFilter('Single Day');
+      setStartDate(currentDate);
+      setEndDate(currentDate);
+    }
+  };
+
+  const onDateRangePress = () => {
+    DateTimePickerAndroid.open({
+      value: StartDate || new Date(),
+      onChange: (event, selectedStartDate) => {
+        if (event.type === 'set' && selectedStartDate) {
+          // Save start date
+          setStartDate(selectedStartDate);
+
+          // Open end date picker after a slight delay
+          setTimeout(() => {
+            DateTimePickerAndroid.open({
+              value: EndDate || selectedStartDate,
+              onChange: (event2, selectedEndDate) => {
+                if (event2.type === 'set' && selectedEndDate) {
+                  // Validate: end date cannot be before start date
+                  if (selectedEndDate < selectedStartDate) {
+                    alert('End date cannot be before Start date');
+                    return;
+                  }
+                  // Save end date
+                  setEndDate(selectedEndDate);
+                }
+              },
+              mode: 'date',
+              is24Hour: false,
+              maximumDate: new Date(),
+              // ✅ Only include minimumDate if selectedStartDate exists
+              ...(selectedStartDate ? { minimumDate: selectedStartDate } : {}),
+            });
+          }, 300);
+        }
+      },
+      mode: 'date',
+      is24Hour: false,
+      maximumDate: new Date(),
+    });
+  };
+
+  const toggleReverse = () => {
+    setIsReverse(!IsReverse);
+  };
+
+  const displayedData = useMemo(() => {
+    const arr = Array.isArray(filteredData) ? filteredData : [];
+    return IsReverse ? [...arr].reverse() : arr;
+  }, [IsReverse, filteredData]);
+
+  return (
+    <>
+      <SafeAreaView style={Styles._mainContainer}>
+        <LinearGradient
+          style={Styles._headerMain}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+        >
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => navigation?.goBack()}
+          >
+            <Ionicons
+              name={'chevron-back'}
+              color={COLORS.whiteColor}
+              size={25}
+            />
+          </TouchableOpacity>
+
+          <Text style={Styles._headerTitle}>All Transactions</Text>
+        </LinearGradient>
+
+        <LinearGradient
+          style={[Styles._headerMain, { height: 30 }]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+        />
+
+        <View style={Styles._searchMain}>
+          <SearchBar
+            containerStyle={{
+              height: '90%',
+              width: '100%',
+              // borderRadius: 0,
+              // borderTopWidth: 0,
+              // borderBottomWidth: 0,
+              // borderLeftWidth: 0,
+              // borderRightWidth: 0,
+              // borderWidth:0
+            }}
+            onChangeText={(text) => {
+              setSearchText(text);
+              handleSearch(text);
+            }}
+            filterLabel={SelectedFilter} // 👈 will appear inside input
+            onFilterPress={() => {
+              Keyboard.dismiss(); // 👈 first dismiss keyboard
+              setIsFilterModal(true); // 👈 then open filter modal
+            }}
+          />
+
+          {/* <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => setIsFilterModal(true)}
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+              width: '35%',
+              paddingRight: 15,
+              gap: 5,
+            }}
+          >
+            <Text
+              style={{
+                color: COLORS.primaryColor,
+                fontFamily: FONT_MEDIUM,
+                fontSize: 12,
+              }}
+            >
+              {SelectedFilter}
+            </Text>
+            <Ionicons
+              name={'chevron-down'}
+              color={COLORS.primaryColor}
+              size={18}
+            />
+          </TouchableOpacity> */}
+        </View>
+
+        <View
+          style={[
+            Styles._searchMain,
+            { position: 'relative', top: 25, alignItems: 'center' },
+          ]}
+        >
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={{
+              flexDirection: 'row',
+              width: '50%',
+              height: '80%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: 8,
+              borderRightColor: COLORS.gray,
+              borderRightWidth: 1,
+            }}
+            onPress={showStartDate}
+          >
+            <Ionicons
+              name={'calendar-outline'}
+              color={COLORS.primaryColor}
+              size={22}
+            />
+
+            {StartDate ? (
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 7 }}
+              >
+                <Text
+                  style={{
+                    color: COLORS.primaryColor,
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 12,
+                  }}
+                >
+                  {formatShortDate(StartDate)}
+                </Text>
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  style={{
+                    backgroundColor: 'red',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: 15,
+                    height: 15,
+                    borderRadius: 50,
+                  }}
+                  onPress={() => {
+                    setStartDate('');
+                    setSelectedFilter('All');
+                  }}
+                >
+                  <Ionicons name={'close'} color={'white'} size={12} />
+                </TouchableOpacity>
+              </View>
+            ) : (
+              <Text
+                style={{
+                  color: COLORS.primaryColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 12,
+                }}
+              >
+                Start Date
+              </Text>
+            )}
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={{
+              flexDirection: 'row',
+              width: '50%',
+              height: '80%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: 8,
+            }}
+            onPress={showEndDate}
+          >
+            <Ionicons
+              name={'calendar-outline'}
+              color={COLORS.primaryColor}
+              size={22}
+            />
+
+            {EndDate ? (
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 7 }}
+              >
+                <Text
+                  style={{
+                    color: COLORS.primaryColor,
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 12,
+                  }}
+                >
+                  {formatShortDate(EndDate)}
+                </Text>
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  style={{
+                    backgroundColor: 'red',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: 15,
+                    height: 15,
+                    borderRadius: 50,
+                  }}
+                  onPress={() => {
+                    setEndDate('');
+                    setSelectedFilter('All');
+                  }}
+                >
+                  <Ionicons name={'close'} color={'white'} size={12} />
+                </TouchableOpacity>
+              </View>
+            ) : (
+              <Text
+                style={{
+                  color: COLORS.primaryColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 12,
+                }}
+              >
+                End Date
+              </Text>
+            )}
+          </TouchableOpacity>
+        </View>
+
+        <View style={Styles._netBalanceMain}>
+          <Text
+            style={{
+              color: COLORS.blackColor,
+              fontFamily: FONT_MEDIUM,
+              fontSize: 12,
+            }}
+          >
+            Net Balance
+          </Text>
+          {/* <Text style={{ color: type == "receivable" ? "green" : "red", fontFamily: FONT_MEDIUM, fontSize: 14 }}>Rs 132</Text> */}
+          <Text
+            style={{
+              color: type == 'receivable' ? 'green' : 'red',
+              fontFamily: FONT_MEDIUM,
+              fontSize: 12,
+            }}
+          >
+            Rs {addCommas(Math.abs(netBalance))}
+          </Text>
+        </View>
+
+        <View style={Styles._tableHeader}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={toggleReverse}
+            style={[
+              Styles._headerCell,
+              {
+                width: '50%',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                gap: 10,
+              },
+            ]}
+          >
+            <Ionicons
+              name={IsReverse ? 'arrow-down' : 'arrow-up'}
+              color={COLORS.primaryColor}
+              size={24}
+            />
+
+            <View style={{ gap: 3 }}>
+              <Text style={Styles._headerCellText}>Entries</Text>
+              <Text style={Styles._tableCal}>{filteredData?.length}</Text>
+            </View>
+          </TouchableOpacity>
+
+          <View style={[Styles._headerCell, { alignItems: 'flex-end' }]}>
+            {/* <Text style={Styles._headerCellText}>{ClientDetails.type == 0 ? "You Gave" : ClientDetails?.type == 1 ? "Payment" : "In"}</Text> */}
+            <Text style={Styles._headerCellText}>
+              {clientType == 0 || clientType == 'all'
+                ? 'You Gave'
+                : clientType == 1
+                  ? 'Payment'
+                  : 'In'}
+            </Text>
+
+            <Text style={[Styles._tableCal, { color: 'red' }]}>
+              Rs {addCommas(totalAmount)}
+            </Text>
+          </View>
+
+          <View style={[Styles._headerCell, { alignItems: 'flex-end' }]}>
+            {/* <Text style={Styles._headerCellText}>{ClientDetails.type == 0 ? "You Got" : ClientDetails?.type == 1 ? "Purchase" : "Out"}</Text> */}
+            <Text style={Styles._headerCellText}>
+              {clientType == 0 || clientType == 'all'
+                ? 'You Got'
+                : clientType == 1
+                  ? 'Purchase'
+                  : 'Out'}
+            </Text>
+
+            <Text style={[Styles._tableCal, { color: 'green' }]}>
+              Rs {addCommas(totalSubAmount)}
+            </Text>
+          </View>
+        </View>
+
+        <FlatList
+          data={displayedData}
+          keyExtractor={(item, index) => index.toString()}
+          scrollEnabled
+          contentContainerStyle={{ paddingBottom: 150, paddingHorizontal: 5 }}
+          renderItem={({ item, index }) => (
+            <Transaction
+              name={item?.client_name}
+              balance={item.balance}
+              isAttachment={
+                item?.attachments?.length || item?.local_path ? true : false
+              }
+              notes={item?.notes}
+              date={formatDateTimeShort(item?.date)}
+              firstCell={item?.amount}
+              secondCell={item?.subamount}
+              fromAllTransactions={true}
+              phone={item?.client_phone}
+              client_local_path={item?.client_local_path}
+              fromBanks={item?.client_type == 2 && true}
+              item={item}
+              onPress={() => {
+                getClientDetails(item?.customer_id).then((res) => {
+                  dispatch({
+                    type: CLIENT_DETAILS,
+                    payload: res,
+                  });
+                  navigation.navigate('TransactionDetails', { item });
+                });
+              }}
+            />
+          )}
+        />
+
+        <BottomView style={Styles._btnsMain}>
+          <TouchableOpacity style={Styles._btn} onPress={() => createPDF()}>
+            <Ionicons
+              name={'document-outline'}
+              color={'red'}
+              size={ICON_SIZES.ACTION}
+            />
+            <Text
+              style={{
+                color: 'red',
+                fontFamily: FONT_MEDIUM,
+                fontSize: TEXT_SIZES.BUTTON_TEXT,
+              }}
+            >
+              PDF
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={Styles._printButton}
+            onPress={() => createPDF(true)}
+          >
+            <Ionicons
+              name={'print-outline'}
+              color={COLORS.blackColor}
+              size={ICON_SIZES.ACTION}
+            />
+          </TouchableOpacity>
+        </BottomView>
+      </SafeAreaView>
+
+      <Modal
+        isVisible={IsFilterModal}
+        style={Styles._modal}
+        onBackButtonPress={() => setIsFilterModal(false)}
+        onBackdropPress={() => setIsFilterModal(false)}
+      >
+        <View style={Styles._modalMain}>
+          <Text style={Styles._modalTitle}>Select Report Duration</Text>
+
+          <View style={Styles._optionsMain}>
+            {/* All */}
+            <TouchableOpacity
+              style={Styles._option}
+              activeOpacity={0.8}
+              onPress={() => {
+                setSelectedFilter('All');
+                setIsFilterModal(false);
+                setStartDate('');
+                setEndDate('');
+
+                getTransactionsByClientType(
+                  clientType,
+                  null,
+                  null,
+                  selectBusiness?.id
+                ).then((res) => {
+                  dispatch({
+                    type: ALL_TRANSACTIONS,
+                    payload: res,
+                  });
+                });
+              }}
+            >
+              <Text
+                style={[
+                  Styles._optionTitle,
+                  {
+                    color:
+                      SelectedFilter === 'All'
+                        ? COLORS.primaryColor
+                        : COLORS.blackColor,
+                  },
+                ]}
+              >
+                All
+              </Text>
+              <Ionicons
+                name={
+                  SelectedFilter === 'All'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                color={
+                  SelectedFilter === 'All'
+                    ? COLORS.primaryColor
+                    : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+
+            {/* This Month */}
+            <TouchableOpacity
+              style={Styles._option}
+              activeOpacity={0.8}
+              onPress={() => {
+                setSelectedFilter('This Month');
+                setIsFilterModal(false);
+                let now = new Date();
+
+                let start = new Date(now.getFullYear(), now.getMonth(), 1);
+
+                let end = new Date(
+                  now.getFullYear(),
+                  now.getMonth() + 1,
+                  0,
+                  23,
+                  59,
+                  59
+                );
+
+                setStartDate(start);
+                setEndDate(end);
+              }}
+            >
+              <Text
+                style={[
+                  Styles._optionTitle,
+                  {
+                    color:
+                      SelectedFilter === 'This Month'
+                        ? COLORS.primaryColor
+                        : COLORS.blackColor,
+                  },
+                ]}
+              >
+                This Month
+              </Text>
+              <Ionicons
+                name={
+                  SelectedFilter === 'This Month'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                color={
+                  SelectedFilter === 'This Month'
+                    ? COLORS.primaryColor
+                    : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+
+            {/* Single Day */}
+            <TouchableOpacity
+              style={Styles._option}
+              activeOpacity={0.8}
+              onPress={() => {
+                setIsFilterModal(false);
+                showSingleDayDate();
+              }}
+            >
+              <Text
+                style={[
+                  Styles._optionTitle,
+                  {
+                    color:
+                      SelectedFilter === 'Single Day'
+                        ? COLORS.primaryColor
+                        : COLORS.blackColor,
+                  },
+                ]}
+              >
+                Single Day
+              </Text>
+              <Ionicons
+                name={
+                  SelectedFilter === 'Single Day'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                color={
+                  SelectedFilter === 'Single Day'
+                    ? COLORS.primaryColor
+                    : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+
+            {/* Last Week */}
+            <TouchableOpacity
+              style={Styles._option}
+              activeOpacity={0.8}
+              onPress={() => {
+                setSelectedFilter('Last Week');
+                setIsFilterModal(false);
+
+                let now = new Date();
+
+                let dayOfWeek = now.getDay();
+                let lastSunday = new Date(now);
+
+                lastSunday.setDate(lastSunday.getDate() - dayOfWeek - 1);
+                lastSunday.setHours(23, 59, 59, 999);
+
+                let prevSunday = new Date(lastSunday);
+                prevSunday.setDate(prevSunday.getDate() - 6);
+                prevSunday.setHours(0, 0, 0, 0);
+
+                setStartDate(prevSunday);
+                setEndDate(lastSunday);
+              }}
+            >
+              <Text
+                style={[
+                  Styles._optionTitle,
+                  {
+                    color:
+                      SelectedFilter === 'Last Week'
+                        ? COLORS.primaryColor
+                        : COLORS.blackColor,
+                  },
+                ]}
+              >
+                Last Week
+              </Text>
+              <Ionicons
+                name={
+                  SelectedFilter === 'Last Week'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                color={
+                  SelectedFilter === 'Last Week'
+                    ? COLORS.primaryColor
+                    : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+
+            {/* Last Month */}
+            <TouchableOpacity
+              style={Styles._option}
+              activeOpacity={0.8}
+              onPress={() => {
+                setSelectedFilter('Last Month');
+                setIsFilterModal(false);
+
+                let now = new Date();
+
+                let start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+                start.setHours(0, 0, 0, 0);
+
+                let end = new Date(now.getFullYear(), now.getMonth(), 0);
+                end.setHours(23, 59, 59, 999);
+
+                setStartDate(start);
+                setEndDate(end);
+              }}
+            >
+              <Text
+                style={[
+                  Styles._optionTitle,
+                  {
+                    color:
+                      SelectedFilter === 'Last Month'
+                        ? COLORS.primaryColor
+                        : COLORS.blackColor,
+                  },
+                ]}
+              >
+                Last Month
+              </Text>
+              <Ionicons
+                name={
+                  SelectedFilter === 'Last Month'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                color={
+                  SelectedFilter === 'Last Month'
+                    ? COLORS.primaryColor
+                    : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+
+            {/* Date Range */}
+            <TouchableOpacity
+              style={Styles._option}
+              activeOpacity={0.8}
+              onPress={() => {
+                setSelectedFilter('Date Range');
+                setIsFilterModal(false);
+
+                onDateRangePress();
+              }}
+            >
+              <Text
+                style={[
+                  Styles._optionTitle,
+                  {
+                    color:
+                      SelectedFilter === 'Date Range'
+                        ? COLORS.primaryColor
+                        : COLORS.blackColor,
+                  },
+                ]}
+              >
+                Date Range
+              </Text>
+              <Ionicons
+                name={
+                  SelectedFilter === 'Date Range'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                color={
+                  SelectedFilter === 'Date Range'
+                    ? COLORS.primaryColor
+                    : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+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: 45,
+    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,
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  _netBalanceMain: {
+    width: '100%',
+    height: 45,
+    backgroundColor: COLORS.whiteColor,
+    marginTop: 35,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+  },
+  _tableHeader: {
+    width: '100%',
+    // height: 30,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    marginTop: 10,
+    borderBottomColor: COLORS.darkGrey,
+    borderBottomWidth: 0.7,
+    paddingHorizontal: 10,
+  },
+  _headerCell: {
+    width: '25%',
+    // height: "100%",
+    // backgroundColor: "pink",
+    justifyContent: 'center',
+    paddingLeft: 5,
+    paddingVertical: 5,
+    gap: 3,
+  },
+  _headerCellText: {
+    color: COLORS.blackColor,
+    opacity: 0.5,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 10,
+  },
+  _tableCal: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 10,
+  },
+  _btnsMain: {
+    width: WP(100),
+    // height: 70,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    // bottom: bottomNavBarH,
+    bottom: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    // alignItems: "center",
+    paddingHorizontal: 10,
+    paddingTop: 8,
+  },
+  _printButton: {
+    width: 50,
+    height: 50,
+    backgroundColor: COLORS.yellowColor,
+    borderRadius:100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _btn: {
+    width: '85%',
+    height: 50,
+    borderColor: 'red',
+    borderWidth: 1,
+    borderRadius: 100,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 3,
+  },
+  _modal: {
+    margin: 0,
+    padding: 0,
+    justifyContent: 'flex-end',
+  },
+  _modalMain: {
+    width: WP(100),
+    // height: HP(45),
+    backgroundColor: COLORS.whiteColor,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 20,
+    paddingTop: 15,
+  },
+  _modalTitle: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  _optionsMain: {
+    paddingTop: 15,
+  },
+  _option: {
+    width: '100%',
+    height: 45,
+    // backgroundColor: "red",
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _optionTitle: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 14,
+  },
+});