digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/ExpenseReport.js

@@ -0,0 +1,1071 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  SafeAreaView,
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+} 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,
+  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';
+import {
+  getExpenseCategoriesWithTotals,
+  getExpenseTransactions,
+} from '../database/expense';
+
+let deviceH = Dimensions.get('screen').height;
+let windowH = Dimensions.get('window').height;
+
+let bottomNavBarH = deviceH - windowH;
+
+export default function ExpenseReport({ navigation, route }) {
+  const dispatch = useDispatch();
+  let eId = route?.params?.eId;
+
+  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 [searchText, setSearchText] = useState('');
+  const [ExpenseCategoryDetails, setExpenseCategoryDetails] = useState(null);
+  const [Entries, setEntries] = useState([]);
+  const [ExpenseCategories, setExpenseCategories] = useState([]);
+
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+
+  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 getTransactions = () => {
+    getExpenseTransactions(selectBusiness?.id, eId)
+      .then((res) => {
+        // ✅ Sort by entryDate (oldest first)
+        const ordered = [...res].sort(
+          (a, b) => new Date(a.entryDate) - new Date(b.entryDate)
+        );
+
+        let total = 0;
+
+        const withBalanceAndName = ordered.map((item) => {
+          total += Number(item.amount) || 0;
+
+          // ✅ Find matching category name using eId
+          const category = ExpenseCategories.find((cat) => cat.id === item.eId);
+          const categoryName = category ? category.name : '';
+
+          return {
+            ...item,
+            balance: total,
+            name: categoryName, // ✅ Add category name
+          };
+        });
+
+        setEntries(withBalanceAndName.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);
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', async () => {
+      await getExpenseCategoryDetails();
+      getTransactions();
+      getExpenseCategories();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  const applyFilter = () => {
+    getExpenseTransactions(
+      selectBusiness?.id,
+      eId,
+      StartDate && fromJsDateToSql(StartDate),
+      EndDate && fromJsDateToSql(EndDate)
+    )
+      .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));
+  };
+
+  useEffect(() => {
+    applyFilter();
+  }, [StartDate, EndDate]);
+
+  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 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();
+    const name = String(item?.name || '').toLowerCase();
+
+    return (
+      billNo.includes(term) ||
+      details.includes(term) ||
+      amount.includes(term) ||
+      name.includes(termit) ||
+      balance.includes(term)
+    );
+  });
+
+  const getExpenseCategories = () => {
+    getExpenseCategoriesWithTotals(selectBusiness?.id)
+      .then((res) => {
+        setExpenseCategories(res);
+      })
+      .catch((err) => {
+        console.error('Failed to fetch invoices:', err);
+      });
+  };
+
+  useEffect(() => {
+    getTransactions();
+  }, [ExpenseCategories]);
+
+  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}>
+            {ExpenseCategoryDetails
+              ? 'Report of  ' + ExpenseCategoryDetails?.name
+              : 'Expenses'}
+          </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}>
+          <SearchBar
+            containerStyle={{
+              height: '90%',
+              width: '100%',
+              // borderRadius: 0,
+              // borderTopWidth: 0,
+              // borderBottomWidth: 0,
+              // borderLeftWidth: 0,
+              // borderRightWidth: 0,
+              // borderWidth:0
+            }}
+            onChangeText={(text) => setSearchTerm(text)}
+            filterLabel={SelectedFilter} // 👈 will appear inside input
+            onFilterPress={() => setIsFilterModal(true)} // 👈 open modal on click
+          />
+
+          {/* <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._tableHeader}>
+          <View style={Styles._headerCell}>
+            <Text style={Styles._headerCellText}>Entries</Text>
+            <Text
+              style={[
+                Styles._headerCellText,
+                { opacity: 1, fontFamily: FONT_MEDIUM },
+              ]}
+            >
+              {Entries?.length}
+            </Text>
+          </View>
+
+          <View
+            style={[
+              Styles._headerCell,
+              { width: '30%', alignItems: 'flex-end' },
+            ]}
+          >
+            <Text style={Styles._headerCellText}>Expense</Text>
+            <Text
+              style={[
+                Styles._headerCellText,
+                { opacity: 1, fontFamily: FONT_BOLD, color: COLORS.redColor },
+              ]}
+            >
+              Rs {addCommas(Number(getTotalAmount()))}
+            </Text>
+          </View>
+        </View>
+
+        <FlatList
+          data={filteredEntries}
+          keyExtractor={(item, index) => index.toString()}
+          scrollEnabled
+          contentContainerStyle={{ paddingBottom: 150 }}
+          renderItem={({ item, index }) => (
+            <View style={[Styles._tableHeader, { marginTop: 5 }]}>
+              <View
+                style={[Styles._headerCell, { gap: 8, paddingVertical: 15 }]}
+              >
+                <View style={{ width: '70%', alignItems: 'flex-start' }}>
+                  <Text
+                    style={[
+                      Styles._headerCellText,
+                      {
+                        paddingHorizontal: 8,
+                        color: COLORS.blackColor,
+                        opacity: 1,
+                      },
+                    ]}
+                  >
+                    {item?.name}
+                  </Text>
+                </View>
+
+                <Text style={Styles._headerCellText}>
+                  {formatDateTime(item?.entryDate)}
+                </Text>
+                {item?.details?.includes('_bill_') &&
+                item?.details?.split('_bill_')[1] ? (
+                  <View style={{ width: '30%', alignItems: 'flex-start' }}>
+                    <Text
+                      style={[Styles._headerCellText, { paddingHorizontal: 8 }]}
+                    >
+                      Bill No: {item.details.split('_bill_')[1]}
+                    </Text>
+                  </View>
+                ) : null}
+
+                {item?.details?.split('_bill_')[0] ? (
+                  <View style={{ width: '70%', alignItems: 'flex-start' }}>
+                    <Text
+                      style={[
+                        Styles._headerCellText,
+                        {
+                          paddingHorizontal: 8,
+                          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)',
+                  },
+                ]}
+              >
+                <Text
+                  style={[
+                    Styles._headerCellText,
+                    {
+                      color: COLORS.redColor,
+                      fontFamily: FONT_BOLD,
+                      opacity: 1,
+                    },
+                  ]}
+                >
+                  {addCommas(Number(item?.amount))}
+                </Text>
+              </View>
+            </View>
+          )}
+        />
+      </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={() => {
+                getTransactions();
+
+                setSelectedFilter('All');
+                setIsFilterModal(false);
+                setStartDate('');
+                setEndDate('');
+              }}
+            >
+              <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,
+  },
+  _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: '#f4f6fb',
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _btn: {
+    width: '85%',
+    height: 50,
+    borderColor: 'red',
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    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,
+  },
+  _tableHeader: {
+    width: '95%',
+    // height: 30,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    marginTop: 43,
+    borderBottomColor: COLORS.darkGrey,
+    borderBottomWidth: 0.7,
+    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,
+  },
+});