digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/StockReport.js

@@ -0,0 +1,1359 @@
+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_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,
+  StockReportTransaction,
+  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,
+  itemDetailsTemplate,
+} from '../htmlTemplates/htmlTemplates';
+import RNPrint from 'react-native-print';
+import {
+  getItemDetailsByItemId,
+  getItemsByBusiness,
+  getStockEntries,
+} from '../database/stock';
+
+let deviceH = Dimensions.get('screen').height;
+let windowH = Dimensions.get('window').height;
+
+let bottomNavBarH = deviceH - windowH;
+
+export default function StockReport({ navigation, route }) {
+  const dispatch = useDispatch();
+  let type = route?.params?.type;
+  let lowStock = route?.params?.lowStock;
+  let itemId = route?.params?.itemId;
+
+  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 [selected, setSelected] = useState('ALL'); // Default selected
+
+  const Transactions = useSelector((state) => state.client.all_transactions);
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const [AllTransactions, setAllTransactions] = useState(Transactions);
+  const [Entries, setEntries] = useState([]);
+  const [allItems, setAllItems] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filteredEntries, setFilteredEntries] = useState(Entries || []);
+  const [ItemDetails, setItemDetails] = useState(null);
+  const [Title, setTitle] = useState('');
+  // 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 handleSelect = (type) => {
+    setSelected(type);
+    setStartDate('')
+    setEndDate('')
+    getEntries(type == 'ALL' ? null : type, null, null);
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      handleSelect(type ? type : 'ALL');
+      getEntries(type, null, null);
+      getItemDetails();
+    });
+
+    return () => unsubscribe();
+  }, [navigation]);
+
+  const getEntries = (Type, startDate, endDate) => {
+    // console.log({ Type })
+    getStockEntries(
+      selectBusiness?.id,
+      Type,
+      startDate,
+      endDate,
+      lowStock,
+      itemId
+    )
+      .then((res) => {
+        setEntries(res);
+      })
+      .catch((err) => {
+        console.error('Failed to fetch Stock Report:', err);
+      });
+  };
+
+  useEffect(() => {
+    const fetchItems = async () => {
+      const result = await getItemsByBusiness(selectBusiness?.id);
+      setAllItems(result || []);
+    };
+    fetchItems();
+  }, [selectBusiness?.id]);
+
+  let totalQuantity = filteredEntries.reduce((total, item) => {
+    const stockIN = Number(item?.stockIN) || 0;
+    const stockOUT = Number(item?.stockOUT) || 0;
+    return total + (stockIN - stockOUT);
+  }, 0);
+
+  let totalAmount = filteredEntries.reduce((total, item) => {
+    const stockIN = Number(item?.stockIN) || 0;
+    const stockOUT = Number(item?.stockOUT) || 0;
+    const amount = Number(item?.amount) || 0;
+
+    if (stockIN > 0) {
+      return total + amount;
+    } else if (stockOUT > 0) {
+      return total - amount;
+    } else {
+      return total;
+    }
+  }, 0);
+
+  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(),
+    });
+  };
+
+  useEffect(() => {
+    getEntries(
+      type == 'ALL' ? null : type,
+      StartDate ? fromJsDateToSql(StartDate) : '',
+      EndDate ? fromJsDateToSql(EndDate) : ''
+    );
+  }, [StartDate, EndDate]);
+
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setFilteredEntries(Entries);
+    } else {
+      const lower = searchQuery.toLowerCase();
+
+      const filteredList = Entries.filter((item) => {
+        const detailsText = item?.details || '';
+        const [mainDetails, billInfo] = detailsText.split('_bill_');
+        const relatedItem = allItems.find((i) => i?.id === item?.itemId);
+
+        return (
+          relatedItem?.name?.toLowerCase().includes(lower) ||
+          mainDetails?.toLowerCase().includes(lower) ||
+          billInfo?.toLowerCase().includes(lower)
+        );
+      });
+
+      setFilteredEntries(filteredList);
+    }
+  }, [searchQuery, Entries]);
+
+  const getItemDetails = async () => {
+    let all = await getItemsByBusiness(selectBusiness?.id);
+    let filtered = all.find((item) => item?.id == itemId);
+    setItemDetails(filtered);
+    if (filtered) {
+      setTitle(`Report of ${filtered?.name}`);
+    } else {
+      setTitle('Stock Report');
+    }
+  };
+
+  const toggleReverse = () => {
+    setIsReverse(!IsReverse);
+  };
+
+  const createPDF = async (isPrint) => {
+    try {
+      let updatedTransactions = filteredEntries?.map((item) => {
+        const filtered = allItems.find((i) => i?.id == item?.itemId);
+        return {
+          ...item,
+          itemName: filtered?.name
+        }
+      })
+
+      // 1️⃣ Generate HTML content
+      const html = itemDetailsTemplate(updatedTransactions, totalAmount, updatedTransactions?.length);
+
+      // 2️⃣ PDF generation options
+      const options = {
+        html,
+        fileName: 'items_details_report',
+        base64: false,
+      };
+
+      // 3️⃣ Generate PDF
+      const results = await generatePDF(options);
+      console.log('✅ PDF Path:', results?.filePath);
+
+      // 4️⃣ Ensure valid URI
+      if (!results?.filePath) {
+        throw new Error('No PDF file path returned');
+      }
+
+      const uri = results.filePath.startsWith('file://')
+        ? results.filePath
+        : `file://${results.filePath}`;
+
+
+      if (isPrint) {
+        await RNPrint.print({ filePath: results.filePath });
+      } else {
+        await viewDocument({ uri });
+      }
+
+    } catch (err) {
+      console.error('❌ PDF generation failed:', err);
+    }
+  };
+
+  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}>{Title}</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) => setSearchQuery(text)}
+            filterLabel={SelectedFilter} // 👈 will appear inside input
+            onFilterPress={() => {
+              Keyboard.dismiss(); // 👈 first dismiss keyboard
+              setIsFilterModal(true); // 👈 then open filter modal
+            }}
+          />
+
+          {/* <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => {
+              Keyboard.dismiss(); // ✅ close keyboard first
+              setIsFilterModal(true); // then open modal
+            }}
+            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.dateFilterContainerParent}>
+          <TouchableOpacity
+            style={[
+              Styles.dateFilterContainer,
+              selected === 'ALL' && { backgroundColor: '#ffe5e5' }, // light red background
+            ]}
+            onPress={() => handleSelect('ALL')}
+          >
+            <View activeOpacity={0.8} style={Styles.dateBtn}>
+              <Text
+                style={[Styles.dateBtnText, { color: COLORS.primaryColor }]}
+              >
+                ALL
+              </Text>
+            </View>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[
+              Styles.dateFilterContainer,
+              selected === 'IN' && { backgroundColor: '#ffe5e5' }, // light red background
+            ]}
+            onPress={() => handleSelect('IN')}
+          >
+            <View activeOpacity={0.8} style={Styles.dateBtn}>
+              <Text
+                style={[Styles.dateBtnText, { color: COLORS.primaryColor }]}
+              >
+                IN
+              </Text>
+            </View>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[
+              Styles.dateFilterContainer,
+              selected === 'OUT' && { backgroundColor: '#ffe5e5' }, // light red background
+            ]}
+            onPress={() => handleSelect('OUT')}
+          >
+            <View activeOpacity={0.8} style={Styles.dateBtn}>
+              <Text
+                style={[Styles.dateBtnText, { color: COLORS.primaryColor }]}
+              >
+                OUT
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+
+        <View style={Styles._tableHeader}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            // onPress={toggleReverse}
+            style={[
+              Styles._headerCell,
+              {
+                width: '40%',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                gap: 10,
+              },
+            ]}
+          >
+            {/* <Ionicons
+              name={IsReverse ? 'arrow-down' : 'arrow-up'}
+              color={COLORS.primaryColor}
+              size={24}
+            /> */}
+
+            <TouchableOpacity
+              style={{ gap: 3, flexDirection: "row", alignItems: "center" }}
+              activeOpacity={0.8}
+              onPress={toggleReverse}
+            >
+              <Ionicons
+                color={COLORS.primaryColor}
+                name={IsReverse ? "arrow-down" : "arrow-up"}
+                size={20}
+              />
+
+              <Text style={Styles._headerCellText}>Entries</Text>
+              <Text style={[Styles._headerCellText, { fontFamily: FONT_BOLD, fontSize: 11 }]}>  {filteredEntries?.length}</Text>
+            </TouchableOpacity>
+          </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}>Qty</Text>
+
+            <Text
+              style={[
+                Styles._tableCal,
+                {
+                  color:
+                    totalQuantity > 0
+                      ? COLORS.greenColor
+                      : totalQuantity < 0
+                        ? COLORS.redColor
+                        : 'gray',
+                },
+              ]}
+            >
+              {addCommas(Math.abs(Number(totalQuantity)))}
+            </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,]}>Rate</Text>
+
+            <Text style={[Styles._tableCal, { color: 'green' }]}></Text>
+          </View>
+          <View style={[Styles._headerCell, { alignItems: 'flex-end', paddingRight: 15 }]}>
+            {/* <Text style={Styles._headerCellText}>{ClientDetails.type == 0 ? "You Got" : ClientDetails?.type == 1 ? "Purchase" : "Out"}</Text> */}
+            <Text style={Styles._headerCellText}>Amount</Text>
+
+            <Text
+              style={[
+                Styles._tableCal,
+                {
+                  color:
+                    totalAmount > 0
+                      ? COLORS.greenColor
+                      : totalAmount < 0
+                        ? COLORS.redColor
+                        : 'gray',
+                },
+              ]}
+            >
+              Rs {addCommas(Math.abs(Number(totalAmount)))}
+            </Text>
+          </View>
+        </View>
+
+        <FlatList
+          data={IsReverse ? [...filteredEntries].reverse() : filteredEntries}
+          contentContainerStyle={{ paddingBottom: 200 }}
+          renderItem={({ item }) => {
+            const color =
+              Number(item?.stockIN) > 0
+                ? COLORS.greenColor
+                : Number(item?.stockOUT) > 0
+                  ? COLORS.redColor
+                  : COLORS.gray;
+
+            const filtered = allItems.find((i) => i?.id === item?.itemId);
+            const detailsText = item?.details || '';
+            const [mainDetails, billInfo] = detailsText.split('_bill_');
+
+            return (
+              <TouchableOpacity
+                activeOpacity={0.8}
+                style={[Styles._tableHeader, { marginTop: 2 }]}
+                onPress={() =>
+                  navigation?.navigate('ItemEntryDetails', {
+                    itemDetailId: item?.id,
+                    itemId: item?.itemId,
+                  })
+                }
+              >
+                <View
+                  activeOpacity={0.8}
+                  style={[
+                    Styles._headerCell,
+                    {
+                      width: '40%',
+                      flexDirection: 'row',
+                      justifyContent: 'flex-start',
+                      alignItems: 'center',
+                      gap: 10,
+                    },
+                  ]}
+                >
+                  <View style={{ gap: 3 }}>
+                    <Text
+                      style={{
+                        color: COLORS.blackColor,
+                        fontFamily: FONT_MEDIUM,
+                        fontSize: 12,
+                      }}
+                    >
+                      {filtered?.name}
+                    </Text>
+
+                    <Text
+                      style={{
+                        color: COLORS.gray,
+                        fontFamily: FONT_NORMAL,
+                        fontSize: 10,
+                      }}
+                    >
+                      {formatDateTime(item?.entryDate)}
+                    </Text>
+
+                    {billInfo ? (
+                      <Text
+                        style={{
+                          color: COLORS.gray,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 10,
+                        }}
+                      >
+                        Bill No. {billInfo}
+                      </Text>
+                    ) : null}
+
+                    {mainDetails ? (
+                      <Text
+                        style={{
+                          color: COLORS.blackColor,
+                          fontFamily: FONT_MEDIUM,
+                          fontSize: 12,
+                        }}
+                      >
+                        {mainDetails}
+                      </Text>
+                    ) : null}
+                  </View>
+                </View>
+
+                <View
+                  style={[
+                    Styles._headerCell,
+                    {
+                      alignItems: 'flex-end',
+                      backgroundColor:
+                        color == COLORS.greenColor
+                          ? 'rgba(0, 255, 0, 0.1)'
+                          : 'rgba(255, 0, 0, 0.05)',
+                    },
+                  ]}
+                >
+                  <Text
+                    style={{
+                      color: color,
+                      fontFamily: FONT_MEDIUM,
+                      fontSize: 12,
+                    }}
+                  >
+                    {Number(item?.stockIN)
+                      ? Number(item?.stockIN)
+                      : Number(item?.stockOUT)}
+                  </Text>
+                </View>
+
+                <View
+                  style={[
+                    Styles._headerCell,
+                    {
+                      alignItems: 'flex-end',
+                      backgroundColor:
+                        color == COLORS.greenColor
+                          ? 'rgba(0, 255, 0, 0.1)'
+                          : 'rgba(255, 0, 0, 0.05)',
+                    },
+                  ]}
+                >
+                  <Text
+                    style={{
+                      color: color,
+                      fontFamily: FONT_MEDIUM,
+                      fontSize: 12,
+                    }}
+                  >
+                    {addCommas(Number(item?.subamount))}
+                  </Text>
+                </View>
+
+                <View
+                  style={[
+                    Styles._headerCell,
+                    {
+                      alignItems: 'flex-end',
+                      backgroundColor:
+                        color == COLORS.greenColor
+                          ? 'rgba(0, 255, 0, 0.1)'
+                          : 'rgba(255, 0, 0, 0.05)',
+                      paddingRight: 15,
+                    },
+                  ]}
+                >
+                  <Text
+                    style={{
+                      color: color,
+                      fontFamily: FONT_MEDIUM,
+                      fontSize: 12,
+                    }}
+                  >
+                    {addCommas(Number(item?.amount))}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            );
+          }}
+        />
+
+        <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('');
+              }}
+            >
+              <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);
+
+                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: COLORS.whiteColor,
+    flexDirection: 'row',
+    marginTop: 11,
+    borderBottomColor: COLORS.darkGrey,
+    borderBottomWidth: 0.7,
+    paddingHorizontal: 10,
+  },
+  _headerCell: {
+    width: '21%',
+    // 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: 8.5,
+  },
+  _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,
+  },
+
+  dateFilterContainer: {
+    // flexDirection: 'column',
+    width: '30%',
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    marginTop: 35,
+    paddingVertical: 10,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    elevation: 3,
+  },
+  dateFilterContainerParent: {
+    flexDirection: 'row',
+    width: '100%',
+    // backgroundColor: COLORS.whiteColor,
+    // borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    // marginTop: 10,
+    // paddingVertical: 10,
+    // justifyContent: 'space-around',
+    justifyContent: 'center',
+    gap: 10,
+    alignItems: 'center',
+    // elevation: 3,
+  },
+  dateBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  dateBtnText: {
+    color: COLORS.primaryColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+  },
+});