digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/CashReport.js

@@ -0,0 +1,1658 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  FlatList,
+} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import {
+  addCommas,
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTimeShort,
+  formatMyDate,
+  fromJsDateToSql,
+  getMonthRange,
+  HP,
+  ICON_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { BottomView, Header } from '../components';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { getCashCategoryById, getCashRegisterEntries } from '../database/cash';
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import Modal from 'react-native-modal';
+import { generatePDF } from 'react-native-html-to-pdf';
+import { viewDocument } from '@react-native-documents/viewer';
+import {
+  dailyReportTemplate,
+  detailedReportTemplate,
+} from '../htmlTemplates/htmlTemplates';
+import RNPrint from 'react-native-print';
+import { AutoSizeText, ResizeTextMode } from 'react-native-auto-size-text';
+import { useSelector } from 'react-redux';
+
+export default function CashReport({ navigation }) {
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+
+  const { startDate, endDate } = getMonthRange();
+  const [StartDate, setStartDate] = useState(startDate);
+  const [EndDate, setEndDate] = useState(endDate);
+  const [CashEntries, setCashEntries] = useState([]);
+  const [Entries, setEntries] = useState([]);
+  const [SelectedFilter, setSelectedFilter] = useState('This Month');
+  const [IsFilterModal, setIsFilterModal] = useState(false);
+  const [TypeModal, setTypeModal] = useState(false);
+  const [Categories, setCategories] = useState([]);
+  const [SelectedCategory, setSelectedCategory] = useState({
+    name: 'All',
+    id: 'all',
+  });
+  const [SelectedEntryType, setSelectedEntryType] = useState('all');
+  const [PDFModal, setPDFModal] = useState(false);
+  const [ReportType, setReportType] = useState('');
+  const [IsPrint, setIsPrint] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      setSelectedCategory({ name: 'All', id: 'all' });
+      setSelectedEntryType('all');
+      setSelectedFilter('This Month');
+
+      getCashRegisterEntries(
+        fromJsDateToSql(startDate),
+        fromJsDateToSql(endDate),
+        selectBusiness?.id
+      ).then(async (res) => {
+        setEntries(res);
+        let processed = processCashRegisterEntries(res, SelectedFilter);
+        setCashEntries(processed);
+
+        // extract categories (IDs)
+        let cats = extractCategories(res);
+
+        // resolve category objects properly
+        let arr = await Promise.all(
+          cats.map((cat) => getCashCategoryById(cat))
+        );
+
+        // ✅ add "All" at first if categories exist
+        if (arr.length > 0) {
+          arr.unshift({ id: 'all', name: 'All' });
+        }
+
+        setCategories(arr);
+      });
+    });
+
+    return unsubscribe;
+  }, [navigation, startDate, endDate, SelectedFilter]);
+
+  const showStartDate = () => {
+    DateTimePickerAndroid.open({
+      value: StartDate || new Date(),
+      onChange: onChangeStartDate,
+      mode: 'date',
+      is24Hour: false,
+      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 processCashRegisterEntries = (
+    res,
+    SelectedFilter,
+    SelectedCategory = { id: 'all' },
+    SelectedEntryType = 'all'
+  ) => {
+    // ✅ Step 1: Apply category filter
+    let filtered = res;
+    if (SelectedCategory?.id && SelectedCategory.id !== 'all') {
+      filtered = filtered.filter(
+        (entry) => String(entry.catId) === String(SelectedCategory.id)
+      );
+    }
+
+    // ✅ Step 2: Apply entry type filter
+    if (SelectedEntryType === 'out') {
+      filtered = filtered.filter(
+        (entry) => (entry.cashOUT || 0) > 0 && (entry.cashIN || 0) === 0
+      );
+    } else if (SelectedEntryType === 'in') {
+      filtered = filtered.filter(
+        (entry) => (entry.cashIN || 0) > 0 && (entry.cashOUT || 0) === 0
+      );
+    }
+
+    // ✅ Step 3: Group by date
+    const grouped = {};
+    filtered.forEach((entry) => {
+      const date = entry?.created_at
+        ? entry.created_at?.split(' ')[0]
+        : entry?.entryDate;
+      if (!grouped[date]) {
+        grouped[date] = { totalCashIN: 0, totalCashOUT: 0, count: 0 };
+      }
+      grouped[date].totalCashIN += entry.cashIN || 0;
+      grouped[date].totalCashOUT += entry.cashOUT || 0;
+      grouped[date].count += 1; // ✅ keep count of entries
+    });
+
+    let result = [];
+
+    if (SelectedFilter === 'This Month') {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth(); // 0-based
+      const today = now.getDate();
+
+      let runningCashInHand = 0;
+
+      for (let day = 1; day <= today; day++) {
+        const dateObj = new Date(year, month, day);
+        const date = dateObj.toLocaleDateString('en-CA'); // YYYY-MM-DD
+
+        const totals = grouped[date] || {
+          totalCashIN: 0,
+          totalCashOUT: 0,
+          count: 0,
+        };
+
+        const dailyBalance = totals.totalCashIN - totals.totalCashOUT;
+        runningCashInHand += dailyBalance; // ✅ carry forward
+
+        result.push({
+          date,
+          totalCashIN: totals.totalCashIN,
+          totalCashOUT: totals.totalCashOUT,
+          dailyBalance,
+          cashInHand: runningCashInHand,
+          entryCount: totals.count, // ✅ number of entries
+        });
+      }
+    } else {
+      let runningCashInHand = 0;
+
+      // Sort dates ascending to calculate running totals correctly
+      const sortedDates = Object.keys(grouped).sort();
+
+      result = sortedDates.map((date) => {
+        const { totalCashIN, totalCashOUT, count } = grouped[date];
+        const dailyBalance = totalCashIN - totalCashOUT;
+        runningCashInHand += dailyBalance;
+
+        return {
+          date,
+          totalCashIN,
+          totalCashOUT,
+          dailyBalance,
+          cashInHand: runningCashInHand,
+          entryCount: count, // ✅ number of entries
+        };
+      });
+    }
+
+    // reverse for UI (latest on top)
+    return result.reverse();
+  };
+
+  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);
+
+      getCashRegisterEntries(
+        fromJsDateToSql(currentDate),
+        fromJsDateToSql(currentDate),
+        selectBusiness?.id
+      ).then((res) => {
+        setEntries(res);
+
+        let processed = processCashRegisterEntries(
+          res,
+          'Single Day',
+          SelectedCategory,
+          SelectedEntryType
+        );
+        setCashEntries(processed);
+      });
+    }
+  };
+
+  const fillMissingDays = (res, startDate, endDate) => {
+    const datesInRange = [];
+    let current = new Date(startDate);
+    while (current <= endDate) {
+      datesInRange.push(current.toLocaleDateString('en-CA')); // YYYY-MM-DD
+      current.setDate(current.getDate() + 1);
+    }
+
+    // Make sure every day exists in result, even with 0s
+    const resWithAllDays = datesInRange.map((date) => {
+      const found = res.find((e) => e.created_at.split(' ')[0] === date);
+      return found || { entryDate: date, cashIN: 0, cashOUT: 0 };
+    });
+
+    return resWithAllDays;
+  };
+
+  const onDateRangePress = () => {
+    DateTimePickerAndroid.open({
+      value: StartDate || new Date(),
+      onChange: (event, selectedStartDate) => {
+        if (event.type === 'set' && selectedStartDate) {
+          // use a local variable for start (don't rely on state immediately)
+          const start = selectedStartDate;
+          setStartDate(start);
+
+          // open end picker
+          setTimeout(() => {
+            DateTimePickerAndroid.open({
+              value: EndDate || start,
+              onChange: (event2, selectedEndDate) => {
+                if (event2.type === 'set' && selectedEndDate) {
+                  const end = selectedEndDate;
+
+                  // guard: end >= start
+                  if (end < start) {
+                    Alert.alert(
+                      'Invalid range',
+                      'End date cannot be before Start date'
+                    );
+                    return;
+                  }
+
+                  setEndDate(end);
+
+                  // fetch, fill missing days in the chosen range and process
+                  getCashRegisterEntries(
+                    fromJsDateToSql(start),
+                    fromJsDateToSql(end),
+                    selectBusiness?.id
+                  )
+                    .then((res) => {
+                      setEntries(res);
+                      // fillMissingDays expects Date objects (or parsable values)
+                      const completedRes = fillMissingDays(res, start, end);
+
+                      // reuse your existing processor (unchanged)
+                      const processed = processCashRegisterEntries(
+                        completedRes,
+                        'Custom Range',
+                        SelectedCategory,
+                        SelectedEntryType
+                      );
+                      setCashEntries(processed);
+                    })
+                    .catch((err) => {
+                      console.error('getCashRegisterEntries error:', err);
+                    });
+                }
+              },
+              mode: 'date',
+              is24Hour: false,
+              maximumDate: new Date(),
+              minimumDate: start, // prevent picking a date < start
+            });
+          }, 300);
+        }
+      },
+      mode: 'date',
+      is24Hour: false,
+      maximumDate: new Date(),
+    });
+  };
+
+  const extractCategories = (res) => {
+    // get unique catIds from res
+    const catIds = [...new Set(res.map((e) => e.catId).filter(Boolean))];
+    return catIds;
+  };
+
+  const filterByCategory = (res, selectedCatId) => {
+    if (!selectedCatId) return res; // if none selected, return all
+    return res.filter((e) => e.catId === selectedCatId);
+  };
+
+  const applyFilters = () => {
+    if (!Entries || Entries.length === 0) return;
+
+    const processed = processCashRegisterEntries(
+      Entries, // raw entries from DB
+      SelectedFilter, // "This Month", "All", etc.
+      SelectedCategory, // selected category
+      SelectedEntryType // "all", "in", "out"
+    );
+
+    setCashEntries(processed);
+  };
+
+  const clearFilters = () => {
+    // Reset selected filters
+    setSelectedCategory({ name: 'All', id: 'all' });
+    setSelectedEntryType('all');
+    setSelectedFilter('This Month');
+    setStartDate(startDate);
+    setEndDate(endDate);
+
+    // Fetch all entries fresh
+    getCashRegisterEntries(null, null, selectBusiness?.id).then((res) => {
+      setEntries(res); // store raw entries
+
+      const processed = processCashRegisterEntries(
+        res,
+        'This Month', // date filter "All" for full data
+        { name: 'All', id: 'all' }, // category
+        'all' // entry type
+      );
+
+      setCashEntries(processed); // reverse if latest day on top
+    });
+  };
+
+  const attachEntriesToDailySummary = (dailySummary, rawEntries) => {
+    return dailySummary.map((day) => {
+      // get entries that match the date part
+      const entriesForDay = rawEntries.filter((entry) => {
+        const entryDate = entry.created_at.split(' ')[0]; // YYYY-MM-DD
+        return entryDate === day.date;
+      });
+
+      return {
+        ...day,
+        entries: entriesForDay?.reverse(), // ✅ add entries array
+      };
+    });
+  };
+
+  const totalCashIN = CashEntries.reduce(
+    (sum, item) => sum + Number(item.totalCashIN || 0),
+    0
+  );
+
+  const totalCashOUT = CashEntries.reduce(
+    (sum, item) => sum + Number(item.totalCashOUT || 0),
+    0
+  );
+
+  const createPDF = async (mode = 'view') => {
+    try {
+      // ✅ Pick the correct template based on report type
+      let html = null;
+
+      if (ReportType === 'daily') {
+        html = dailyReportTemplate(
+          CashEntries.reverse(),
+          totalCashIN,
+          totalCashOUT,
+          new Date().toDateString()
+        );
+      } else if (ReportType === 'detailed') {
+        html = detailedReportTemplate(
+          attachEntriesToDailySummary(CashEntries, Entries)?.reverse(),
+          totalCashIN,
+          totalCashOUT,
+          new Date().toDateString()
+        );
+      }
+
+      if (!html) {
+        console.log('No HTML generated for report');
+        return;
+      }
+
+      const options = {
+        html,
+        fileName: 'cash_report',
+        base64: false,
+      };
+
+      let results = await generatePDF(options);
+      console.log('PDF Results:', results);
+
+      if (!results?.filePath) {
+        console.error('No filePath returned by generatePDF');
+        return;
+      }
+
+      const uri = results.filePath.startsWith('file://')
+        ? results.filePath
+        : 'file://' + results.filePath;
+
+      // console.log(`${mode === "print" ? "Printing" : "Opening"} PDF at:`, uri);
+
+      // ✅ Close modal + reset
+      setPDFModal(false);
+      setReportType('');
+
+      if (mode === 'print') {
+        // 🖨️ Print PDF
+        await RNPrint.print({ filePath: results.filePath });
+      } else {
+        // 👀 View PDF
+        viewDocument({ uri });
+      }
+    } catch (err) {
+      console.error('createPDF failed:', err);
+    }
+  };
+
+  return (
+    <View style={Styles._mainContainer}>
+      <Header navigation={navigation} title={'Cash Report'} />
+      <View style={Styles._contentMain}>
+        <LinearGradient
+          style={[Styles._headerMain, { height: 40 }]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+        />
+        <View style={Styles._hoveringMain}>
+          <View style={Styles._durationMain}>
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._calenderBtn}
+              onPress={() => setIsFilterModal(true)}
+            >
+              <Ionicons
+                name={'calendar-outline'}
+                color={COLORS.primaryColor}
+                size={32}
+              />
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._dateSelectMain}
+            >
+              <Text style={Styles._dateText}>
+                {StartDate ? formatMyDate(fromJsDateToSql(StartDate)) : 'All'}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={[Styles._dateSelectMain, { borderRightWidth: 0 }]}
+            >
+              <Text style={Styles._dateText}>
+                {EndDate ? formatMyDate(fromJsDateToSql(EndDate)) : 'All'}
+              </Text>
+            </TouchableOpacity>
+          </View>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => setTypeModal(true)}
+            style={Styles._filterBtn}
+          >
+            <Ionicons name={'options'} color={COLORS.primaryColor} size={28} />
+
+            <Text
+              style={[
+                Styles._dateText,
+                { fontFamily: FONT_MEDIUM, fontSize: 14 },
+              ]}
+            >
+              Filters
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {CashEntries.length > 0 && (
+          <View style={Styles._tableHeaderMain}>
+            <View style={{ width: '45%' }}>
+              <Text style={Styles._tableHeaderText}>Date</Text>
+            </View>
+
+            <View style={{ width: '25%', alignItems: 'flex-end' }}>
+              <Text style={Styles._tableHeaderText}>Daily Balance</Text>
+            </View>
+
+            <View style={{ width: '30%', alignItems: 'flex-end' }}>
+              <Text style={Styles._tableHeaderText}>Cash in Hand</Text>
+            </View>
+          </View>
+        )}
+
+        <FlatList
+          data={CashEntries}
+          contentContainerStyle={{ paddingBottom: 100, flexGrow: 1 }}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item }) => (
+            <TouchableOpacity
+              style={[Styles._tableHeaderMain, { marginTop: 0 }]}
+              activeOpacity={0.8}
+              onPress={() => {
+                navigation.navigate('CashSummary', { created_at: item?.date });
+              }}
+            >
+              {/* Date */}
+              <View style={{ width: '45%' }}>
+                <Text style={Styles._tableHeaderText}>
+                  {formatMyDate(fromJsDateToSql(item?.date))}
+                  {/* {new Date(item?.date).toDateString()} */}
+                </Text>
+              </View>
+
+              {/* Daily Balance */}
+              <View style={{ width: '25%', alignItems: 'flex-end' }}>
+                <AutoSizeText
+                  fontSize={12}
+                  numberOfLines={1}
+                  mode={ResizeTextMode.max_lines}
+                  style={[
+                    Styles._tableHeaderText,
+                    {
+                      color:
+                        item.dailyBalance === 0
+                          ? COLORS.blackColor
+                          : item.dailyBalance < 0
+                            ? 'red'
+                            : 'green',
+                      width: 90,
+                      textAlign: 'right',
+                    },
+                  ]}
+                >
+                  Rs {addCommas(Math.abs(item.dailyBalance))}
+                </AutoSizeText>
+              </View>
+
+              {/* Cash In Hand */}
+              <View
+                style={{ width: '26%', alignItems: 'flex-end', marginRight: 5 }}
+              >
+                <AutoSizeText
+                  fontSize={12}
+                  numberOfLines={1}
+                  mode={ResizeTextMode.max_lines}
+                  style={[
+                    Styles._tableHeaderText,
+                    {
+                      color:
+                        item.cashInHand === 0
+                          ? COLORS.blackColor
+                          : item.cashInHand < 0
+                            ? 'red'
+                            : 'green',
+                      // backgroundColor:"red",
+                      width: 90,
+                      textAlign: 'right',
+                    },
+                  ]}
+                >
+                  Rs {addCommas(Math.abs(item.cashInHand))}
+                </AutoSizeText>
+              </View>
+
+              <Ionicons
+                name={'chevron-forward'}
+                color={COLORS.primaryColor}
+                size={15}
+              />
+            </TouchableOpacity>
+          )}
+          ListEmptyComponent={
+            <View
+              style={{
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginTop: 50,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: COLORS.darkGrey,
+                  fontFamily: FONT_MEDIUM,
+                }}
+              >
+                No records found
+              </Text>
+            </View>
+          }
+        />
+      </View>
+
+      <BottomView style={Styles._btnsMain}>
+        <TouchableOpacity
+          style={Styles._btn}
+          activeOpacity={0.8}
+          onPress={() => {
+            setIsPrint(false);
+            setPDFModal(true);
+          }}
+        >
+          <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={() => {
+            setIsPrint(true);
+            setPDFModal(true);
+          }}
+        >
+          <Ionicons
+            name={'print-outline'}
+            color={COLORS.blackColor}
+            size={ICON_SIZES.ACTION}
+          />
+        </TouchableOpacity>
+      </BottomView>
+
+      <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('');
+
+                getCashRegisterEntries(null, null, selectBusiness?.id).then(
+                  (res) => {
+                    setEntries(res);
+
+                    let processed = processCashRegisterEntries(
+                      res,
+                      'All',
+                      SelectedCategory,
+                      SelectedEntryType
+                    );
+                    setCashEntries(processed.reverse());
+                  }
+                );
+              }}
+            >
+              <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);
+
+                getCashRegisterEntries(
+                  fromJsDateToSql(startDate),
+                  fromJsDateToSql(endDate),
+                  selectBusiness?.id
+                ).then((res) => {
+                  setEntries(res); // store raw entries
+
+                  // apply all filters: date filter (This Month) + category + entry type
+                  let processed = processCashRegisterEntries(
+                    res,
+                    'This Month',
+                    SelectedCategory,
+                    SelectedEntryType
+                  );
+                  setCashEntries(processed);
+                });
+              }}
+            >
+              <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);
+
+                getCashRegisterEntries(
+                  fromJsDateToSql(prevSunday),
+                  fromJsDateToSql(lastSunday),
+                  selectBusiness?.id
+                ).then((res) => {
+                  setEntries(res);
+                  // ✅ ensure all 7 days exist
+                  let completedRes = fillMissingDays(
+                    res,
+                    prevSunday,
+                    lastSunday
+                  );
+
+                  // ✅ now reuse your existing logic everywhere
+                  let processed = processCashRegisterEntries(
+                    completedRes,
+                    'Last Week',
+                    SelectedCategory,
+                    SelectedEntryType
+                  );
+                  setCashEntries(processed);
+                });
+              }}
+            >
+              <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);
+
+                getCashRegisterEntries(
+                  fromJsDateToSql(start),
+                  fromJsDateToSql(end),
+                  selectBusiness?.id
+                ).then((res) => {
+                  setEntries(res);
+                  // ✅ ensure all 7 days exist
+                  let completedRes = fillMissingDays(res, start, end);
+
+                  // ✅ now reuse your existing logic everywhere
+                  let processed = processCashRegisterEntries(
+                    completedRes,
+                    'Last Month',
+                    SelectedCategory,
+                    SelectedEntryType
+                  );
+                  setCashEntries(processed);
+                });
+              }}
+            >
+              <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>
+
+      <Modal
+        isVisible={TypeModal}
+        style={Styles._modal}
+        onBackButtonPress={() => setTypeModal(false)}
+        onBackdropPress={() => setTypeModal(false)}
+      >
+        <View style={Styles._typeModalMain}>
+          <View style={Styles._typeModalHeader}>
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={{ width: '20%', alignItems: 'flex-start' }}
+              onPress={() => {
+                clearFilters();
+                // setTypeModal(false)
+              }}
+            >
+              <Text
+                style={{
+                  color: COLORS.primaryColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 14,
+                }}
+              >
+                Clear All
+              </Text>
+            </TouchableOpacity>
+
+            <Text
+              style={{
+                color: COLORS.blackColor,
+                fontFamily: FONT_MEDIUM,
+                fontSize: 16,
+                width: '20%',
+                textAlign: 'center',
+              }}
+            >
+              Filters
+            </Text>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => {
+                setTypeModal(false);
+              }}
+              style={{ width: '20%', alignItems: 'flex-end' }}
+            >
+              <Ionicons name={'close'} color={COLORS.darkGrey} size={25} />
+            </TouchableOpacity>
+          </View>
+
+          <View style={Styles._typeModalRow}>
+            <Text
+              style={{
+                color: COLORS.blackColor,
+                fontFamily: FONT_MEDIUM,
+                fontSize: 16,
+              }}
+            >
+              Entry Type
+            </Text>
+            <View
+              style={{ flexDirection: 'row', alignItems: 'center', gap: 70 }}
+            >
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                  gap: 5,
+                  alignItems: 'space-between',
+                  marginTop: 10,
+                }}
+                activeOpacity={0.8}
+                onPress={() => setSelectedEntryType('all')}
+              >
+                <Ionicons
+                  name={
+                    SelectedEntryType == 'all'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedEntryType == 'all'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+
+                <Text
+                  style={{
+                    color:
+                      SelectedEntryType == 'all'
+                        ? COLORS.primaryColor
+                        : COLORS.darkGrey,
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 14,
+                  }}
+                >
+                  All
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                  gap: 5,
+                  alignItems: 'space-between',
+                  marginTop: 10,
+                }}
+                activeOpacity={0.8}
+                onPress={() => setSelectedEntryType('out')}
+              >
+                <Ionicons
+                  name={
+                    SelectedEntryType == 'out'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedEntryType == 'out'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+
+                <Text
+                  style={{
+                    color:
+                      SelectedEntryType == 'out'
+                        ? COLORS.primaryColor
+                        : COLORS.darkGrey,
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 14,
+                  }}
+                >
+                  Out
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                  gap: 5,
+                  alignItems: 'center',
+                  marginTop: 10,
+                }}
+                activeOpacity={0.8}
+                onPress={() => setSelectedEntryType('in')}
+              >
+                <Ionicons
+                  name={
+                    SelectedEntryType == 'in'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedEntryType == 'in'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+
+                <Text
+                  style={{
+                    color:
+                      SelectedEntryType == 'in'
+                        ? COLORS.primaryColor
+                        : COLORS.darkGrey,
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 14,
+                  }}
+                >
+                  In
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <View style={Styles._typeModalRow}>
+            <Text
+              style={{
+                color: COLORS.blackColor,
+                fontFamily: FONT_MEDIUM,
+                fontSize: 16,
+              }}
+            >
+              Category
+            </Text>
+
+            <FlatList
+              data={Categories}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{
+                gap: 10,
+                marginTop: 15,
+                backgroundColor: COLORS.lightGrey,
+                paddingVertical: 10,
+                paddingRight: 9,
+              }}
+              ListEmptyComponent={
+                <Text
+                  style={{
+                    color: COLORS.darkGrey,
+                    fontSize: 14,
+                    marginLeft: 10,
+                    fontFamily: FONT_MEDIUM,
+                  }}
+                >
+                  No categories found
+                </Text>
+              }
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  onPress={() => setSelectedCategory(item)}
+                  style={{
+                    flexDirection: 'row',
+                    gap: 5,
+                    alignItems: 'center',
+                    backgroundColor: COLORS.whiteColor,
+                    borderColor:
+                      item?.id == SelectedCategory?.id
+                        ? COLORS.primaryColor
+                        : COLORS.darkGrey,
+                    borderWidth: 1,
+                    borderRadius: 100,
+                    paddingVertical: 7,
+                    paddingHorizontal: 20,
+                    marginHorizontal: 5,
+                  }}
+                >
+                  <Text
+                    style={{
+                      color:
+                        item?.id == SelectedCategory?.id
+                          ? COLORS.primaryColor
+                          : COLORS.darkGrey,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 14,
+                    }}
+                  >
+                    {item?.name}
+                  </Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={Styles._continueBtn}
+            onPress={() => {
+              setTypeModal(false);
+              applyFilters();
+            }}
+          >
+            <Text style={[Styles._continueBtnTxt, { fontFamily: FONT_MEDIUM }]}>APPLY FILTER</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+
+      <Modal
+        isVisible={PDFModal}
+        onBackButtonPress={() => {
+          setReportType('');
+          setPDFModal(false);
+        }}
+        onBackdropPress={() => {
+          setReportType('');
+          setPDFModal(false);
+        }}
+        style={Styles._modal}
+      >
+        <View
+          style={[
+            Styles._modalMain,
+            { backgroundColor: COLORS.backgroundColor },
+          ]}
+        >
+          <Text style={Styles._modalTitle}>Select Report Type</Text>
+
+          <View style={Styles._modalOptionsMain}>
+            <TouchableOpacity
+              style={Styles._modalOptionSelector}
+              activeOpacity={0.8}
+              onPress={() => setReportType('detailed')}
+            >
+              <Text
+                style={[
+                  Styles._modalOptionTitle,
+                  {
+                    color:
+                      ReportType == 'detailed'
+                        ? COLORS.primaryColor
+                        : COLORS.darkGrey,
+                  },
+                ]}
+              >
+                Detailed report with all entries
+              </Text>
+
+              <Ionicons
+                name={
+                  ReportType == 'detailed'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                color={
+                  ReportType == 'detailed'
+                    ? COLORS.primaryColor
+                    : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={Styles._modalOptionSelector}
+              activeOpacity={0.8}
+              onPress={() => setReportType('daily')}
+            >
+              <Text
+                style={[
+                  Styles._modalOptionTitle,
+                  {
+                    color:
+                      ReportType == 'daily'
+                        ? COLORS.primaryColor
+                        : COLORS.darkGrey,
+                  },
+                ]}
+              >
+                Day wise summary report
+              </Text>
+
+              <Ionicons
+                name={
+                  ReportType == 'daily' ? 'radio-button-on' : 'radio-button-off'
+                }
+                color={
+                  ReportType == 'daily' ? COLORS.primaryColor : COLORS.darkGrey
+                }
+                size={25}
+              />
+            </TouchableOpacity>
+          </View>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={[Styles._continueBtn, { width: '100%', marginVertical: 10 }]}
+            onPress={() => {
+              createPDF(IsPrint ? 'print' : 'view');
+            }}
+          >
+            <Text style={Styles._continueBtnTxt}>Download</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _contentMain: {
+    flex: 1,
+    width: '100%',
+    // height: "85%",
+    // backgroundColor: "red",
+    alignItems: 'center',
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    // justifyContent: "space-between",
+    paddingHorizontal: Platform.OS == 'android' && 10,
+    gap: 15,
+  },
+  _hoveringMain: {
+    width: '95%',
+    height: 55,
+    // backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    // shadowColor: "#000",
+    // shadowOffset: {
+    //     width: 0,
+    //     height: 2,
+    // },
+    // shadowOpacity: 0.2,
+    // shadowRadius: 3.84,
+    // elevation: 5,
+    gap: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    top: 10,
+  },
+  _datesMain: {
+    backgroundColor: 'red',
+  },
+  _durationMain: {
+    width: '70%',
+    height: '100%',
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _filterBtn: {
+    width: '25%',
+    height: '100%',
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 7,
+  },
+  _calenderBtn: {
+    width: '25%',
+    height: '100%',
+    backgroundColor: '#ff5e003b',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _dateSelectMain: {
+    width: '37.5%',
+    height: '60%',
+    // backgroundColor: "pink",
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightColor: COLORS.blackColor,
+    borderRightWidth: 0.7,
+  },
+  _dateText: {
+    color: COLORS.primaryColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _tableHeaderMain: {
+    width: '100%',
+    height: 40,
+    backgroundColor: COLORS.whiteColor,
+    marginTop: 45,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    borderBottomColor: COLORS.gray,
+    borderBottomWidth: 0.7,
+  },
+  _tableHeaderText: {
+    color: COLORS.darkGrey,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+  },
+  _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,
+  },
+  _typeModalMain: {
+    width: '100%',
+    // height: HP(40),
+    backgroundColor: COLORS.whiteColor,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    overflow: 'hidden',
+    paddingHorizontal: 10,
+  },
+  _typeModalHeader: {
+    width: '100%',
+    height: 60,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomColor: COLORS.gray,
+    borderBottomWidth: 0.7,
+  },
+  _typeModalRow: {
+    width: '100%',
+    marginVertical: 20,
+  },
+  _continueBtn: {
+    width: '95%',
+    height: 50,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 20,
+    alignSelf: 'center',
+  },
+  _continueBtnTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_BOLD,
+    fontSize: TEXT_SIZES.BUTTON_TEXT,
+  },
+  _btnsMain: {
+    width: WP(100),
+    // height: 70,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    // bottom: bottomNavBarH,
+    bottom: 15,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    // alignItems: "center",
+    paddingHorizontal: 10,
+    paddingTop: 23,
+  },
+  _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,
+  },
+  _modalOptionsMain: {
+    width: '100%',
+    // height:100,
+    backgroundColor: COLORS.whiteColor,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 2,
+    marginVertical: 20,
+    alignSelf: 'center',
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+  },
+  _modalOptionSelector: {
+    width: '90%',
+    height: 50,
+    // backgroundColor:"red",
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _modalOptionTitle: {
+    color: COLORS.darkGrey,
+    fontFamily: FONT_NORMAL,
+    fontSize: 16,
+  },
+});