digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/Customers.js

@@ -1,240 +1,1093 @@
-import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
-import React, { useEffect } from 'react'
-import { COLORS, FONT_NORMAL, formatDateTime, HP, WP } from '../themes/config'
-import { Balance, Entries, SearchBar, User } from '../components'
-import Ionicons from "react-native-vector-icons/Ionicons"
-import FontAwesome6 from "react-native-vector-icons/FontAwesome6"
-import LinearGradient from 'react-native-linear-gradient'
-import { getAllClients, getClientDetails, getClientsByType } from '../database/clients';
-import { useSelector, useDispatch } from "react-redux";
-import { CLIENT_DETAILS, HOME_CUSTOMERS } from '../redux/reducers/client/client_types'
-
-export default function Customers({ navigation }) {
-
-    const dispatch = useDispatch()
-    const clients = useSelector(state => state.client.home_customers);
-
-    useEffect(() => {
-        const unsubscribe = navigation.addListener('focus', () => {
-            getClientsByType(0).then(clients => {
-                dispatch({ type: HOME_CUSTOMERS, payload: clients });
-                console.log("Clients:", clients);
-            }).catch(err => console.error(err));
-        });
-        return () => unsubscribe();
-    }, [navigation]);
-
-    const processed = clients.map((item) => {
-        let amount = (parseFloat(item?.total_subamount) || 0) - (parseFloat(item?.total_amount) || 0);
-
-        let type = "none";
-        if (amount > 0) {
-            type = "receivable";
-        } else if (amount < 0) {
-            type = "payable";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Alert,
+} from 'react-native';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import {
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  HP,
+  ICON_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import {
+  AccountSetupSteps,
+  Balance,
+  Entries,
+  SearchBar,
+  User,
+} from '../components';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  getAllClients,
+  getClientDetails,
+  getClientsByType,
+  getTransactionsByClientType,
+} from '../database/clients';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  ALL_TRANSACTIONS,
+  CLIENT_DETAILS,
+  HOME_CUSTOMERS,
+} from '../redux/reducers/client/client_types';
+import Modal from 'react-native-modal';
+import { generatePDF } from 'react-native-html-to-pdf';
+import { viewDocument } from '@react-native-documents/viewer';
+import { allCustomersTemplate } from '../htmlTemplates/htmlTemplates';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useFocusEffect } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+
+export default function Customers() {
+  const dispatch = useDispatch();
+  const insets = useSafeAreaInsets();
+  const searchBarRef = useRef(null);
+  const clients = useSelector((state) => state.client.home_customers);
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const userClients = useSelector((state) => state.user.user_clients);
+  const userData = useSelector((state) => state.user.user_data);
+  const navigation = useNavigation();
+
+  const [IsFilterModal, setIsFilterModal] = useState(false);
+  const [SelectedSort, setSelectedSort] = useState('most_recent');
+  const [SelectedFilter, setSelectedFilter] = useState('all');
+  const [baseClients, setBaseClients] = useState([]);
+  const [displayClients, setDisplayClients] = useState([]);
+  const [searchText, setSearchText] = useState('');
+  const [Margin, setMargin] = useState(60);
+
+  useFocusEffect(
+    useCallback(() => {
+      (async () => {
+        try {
+          const clients = await getClientsByType(
+            0,
+            null,
+            null,
+            selectBusiness?.id
+          );
+          const freshClients = addPayType(clients);
+
+          dispatch({ type: HOME_CUSTOMERS, payload: freshClients });
+          setBaseClients(freshClients);
+          setDisplayClients(freshClients);
+          setSelectedFilter('all');
+          setSelectedSort('most_recent');
+          setSearchText('');
+          handleSearch('', freshClients);
+          clearSearch();
+        } catch (err) {
+          console.error(err);
         }
+      })();
+
+      return () => { }; // optional cleanup
+    }, [navigation, selectBusiness])
+  );
+
+  function addPayType(clients) {
+    return clients.map((item) => {
+      const amount = (item?.total_subamount || 0) - (item?.total_amount || 0);
+      let pay_type = 'none';
+      if (amount > 0) pay_type = 'payable';
+      else if (amount < 0) pay_type = 'receivable';
+      return {
+        ...item,
+        amount: Math.abs(amount),
+        pay_type,
+      };
+    });
+  }
+
+  const processed = displayClients.map((item) => {
+    let amount =
+      (parseFloat(item?.total_subamount) || 0) -
+      (parseFloat(item?.total_amount) || 0);
+
+    let type = 'none';
+    if (amount > 0) {
+      type = 'receivable';
+    } else if (amount < 0) {
+      type = 'payable';
+    }
+
+    return {
+      type,
+      amount: Math.abs(amount),
+    };
+  });
+
+  const totals = processed.reduce(
+    (acc, item) => {
+      if (item.type === 'receivable') {
+        acc.receivable += item.amount;
+      } else if (item.type === 'payable') {
+        acc.payable += item.amount;
+      }
+      return acc;
+    },
+    { receivable: 0, payable: 0 }
+  );
+
+
+  // const totals = userClients.reduce(
+  //   (acc, item) => {
+  //     if (item?.type === "0") {
+  //       acc.payable += Number(item?.amount) || 0;
+  //       acc.receivable += Number(item?.subamount) || 0;
+  //     }
+  //     return acc;
+  //   },
+  //   { receivable: 0, payable: 0 }
+  // );
+
+  const applyFilterAndSort = async () => {
+    let clients = [];
+
+    // DB sort
+    if (
+      SelectedSort === 'most_recent' ||
+      SelectedSort === 'oldest' ||
+      SelectedSort === 'name_az' ||
+      SelectedSort === 'name_za'
+    ) {
+      clients = await getClientsByType(
+        0,
+        SelectedSort,
+        null,
+        selectBusiness?.id
+      );
+    } else {
+      clients = await getClientsByType(0, null, null, selectBusiness?.id);
+    }
+
+    // Add pay_type + amount
+    let arr = clients.map((item) => {
+      let amount = item?.total_subamount - item?.total_amount;
+      let type = 'none';
+      if (amount > 0) type = 'payable';
+      else if (amount < 0) type = 'receivable';
+
+      return {
+        ...item,
+        amount: Math.abs(amount),
+        pay_type: type,
+      };
+    });
+
+    // Filters
+    if (SelectedFilter === 'receivable') {
+      arr = arr.filter((i) => i?.pay_type === 'receivable');
+    } else if (SelectedFilter === 'payable') {
+      arr = arr.filter((i) => i?.pay_type === 'payable');
+    } else if (SelectedFilter === 'settled') {
+      arr = arr.filter((i) => i?.amount === 0);
+    }
+
+    // Amount sorts
+    if (SelectedSort === 'highest_amount') {
+      arr.sort((a, b) => b.amount - a.amount);
+    } else if (SelectedSort === 'least_amount') {
+      arr.sort((a, b) => a.amount - b.amount);
+    }
+
+    // save the filtered/sorted list as the new base
+    setBaseClients(arr);
+
+    // also immediately apply search to it
+    handleSearch(searchText, arr);
+  };
+
+  const handleSearch = (text, source = baseClients) => {
+    setSearchText(text);
+
+    if (text.trim() === '') {
+      // show baseClients as is
+      setDisplayClients(source);
+    } else {
+      const q = text.toLowerCase();
+      const filtered = source.filter(
+        (item) =>
+          item.name?.toLowerCase().includes(q) ||
+          item.phone?.toLowerCase().includes(q)
+      );
+      setDisplayClients(filtered);
+    }
+  };
+
+  useEffect(() => {
+    const init = async () => {
+      // get initial data from DB (or from Redux if already loaded)
+      const clients = await getClientsByType(0, null, null, selectBusiness?.id);
+
+      // do the same mapping you always do
+      const arr = clients.map((item) => {
+        let amount = item?.total_subamount - item?.total_amount;
+        let type = 'none';
+        if (amount > 0) type = 'payable';
+        else if (amount < 0) type = 'receivable';
 
         return {
-            type,
-            amount: Math.abs(amount),
+          ...item,
+          amount: Math.abs(amount),
+          pay_type: type,
         };
+      });
+
+      // set both base & display to show initially
+      setBaseClients(arr);
+      setDisplayClients(arr);
+    };
+
+    init();
+  }, []);
+
+  const clearFilters = async () => {
+    // reset filter + sort states
+    setSelectedFilter('all'); // or '' if you prefer
+    setSelectedSort('most_recent'); // or '' if you prefer
+    setSearchText('');
+
+    // fetch fresh clients from DB
+    const clients = await getClientsByType(0, null, null, selectBusiness?.id);
+
+    // apply your mapping logic again
+    const arr = clients.map((item) => {
+      let amount = item?.total_subamount - item?.total_amount;
+      let type = 'none';
+      if (amount > 0) type = 'payable';
+      else if (amount < 0) type = 'receivable';
+
+      return {
+        ...item,
+        amount: Math.abs(amount),
+        pay_type: type,
+      };
     });
 
-    const totals = processed.reduce(
-        (acc, item) => {
-            if (item.type === "receivable") {
-                acc.receivable += item.amount;
-            } else if (item.type === "payable") {
-                acc.payable += item.amount;
-            }
-            return acc;
+    // reset base + display clients
+    setBaseClients(arr);
+    setDisplayClients(arr);
+  };
+
+  const showDownloadAlert = () => {
+    Alert.alert(
+      'Download Customers List', // Title
+      'Include Zero balance customers?', // Message
+      [
+        {
+          text: 'No',
+          onPress: () => createPDF(true),
+          style: 'cancel', // makes it a cancel button (iOS only)
         },
-        { receivable: 0, payable: 0 }
+        {
+          text: 'Yes',
+          onPress: () => createPDF(false),
+        },
+      ],
+      { cancelable: true }
     );
+  };
 
+  const createPDF = async (include) => {
+    // 1️⃣ Build processedClients → keep existing amount & pay_type if present
+    const processedClients = displayClients?.map((item) => {
+      // If amount and pay_type already exist → keep them
+      if (item?.amount !== undefined && item?.pay_type !== undefined) {
+        return item;
+      }
 
+      // Otherwise calculate
+      let diff = (item?.total_subamount ?? 0) - (item?.total_amount ?? 0);
 
-    return (
-        <View style={Styles._mainContainer}>
-            <ScrollView
-                contentContainerStyle={{ alignItems: "center", paddingBottom: 60 }}
-                showsVerticalScrollIndicator={false}
-            >
-                <Balance
-                    greenTitle={"You will give"}
-                    greenValue={totals?.receivable}
-                    redTitle={"You will get"}
-                    redValue={totals?.payable}
-                />
-                {/* <View style={{height:HP(7)}}></View> */}
-                <Entries marginTop={70} />
-
-                <View style={Styles._contentMain}>
-                    <View style={Styles._searchMain}>
-                        <View style={Styles._inputMain}>
-                            <SearchBar />
-                        </View>
-
-                        <View style={Styles._filterMain}>
-                            <TouchableOpacity
-                                activeOpacity={0.8}
-                                style={Styles._filterBtn}
-                            >
-                                <Ionicons
-                                    name={"funnel-outline"}
-                                    color={COLORS.primaryColor}
-                                    size={27}
-                                />
-                            </TouchableOpacity>
-
-                            <TouchableOpacity
-                                activeOpacity={0.8}
-                                style={Styles._filterBtn}
-                            >
-                                <FontAwesome6
-                                    name={"file-pdf"}
-                                    color={COLORS.primaryColor}
-                                    size={23}
-                                />
-                            </TouchableOpacity>
-                        </View>
-                    </View>
-
-                    <View>
-                        {
-                            clients.map((item, index) => {
-                                let amount = item?.total_subamount - item?.total_amount;
-
-                                let type = "none";
-                                if (amount > 0) {
-                                    type = "receivable";
-                                } else if (amount < 0) {
-                                    type = "payable";
-                                }
-
-                                amount = Math.abs(amount);
-
-                                // console.log({amount,type})
-
-                                return (
-                                    <User
-                                        key={index}
-                                        name={item?.name}
-                                        addedAt={formatDateTime(item?.latest_updated_at)}
-                                        amount={amount}
-                                        type={type}
-                                        avatarColor={item?.avatarColor}
-                                        clientType={item?.type}
-                                        onPress={() => {
-                                            getClientDetails(item?.id).then((res) => {
-                                                dispatch({
-                                                    type: CLIENT_DETAILS,
-                                                    payload: res
-                                                })
-                                                navigation.navigate("CustomerEntries", { homeDetails: item })
-                                            })
-                                        }}
-                                    />
-                                );
-                            })
-                        }
-
-                    </View>
+      let pay_type = 'none';
+      if (diff > 0) {
+        pay_type = 'receivable';
+      } else if (diff < 0) {
+        pay_type = 'payable';
+      }
+
+      return {
+        ...item,
+        amount: Math.abs(diff),
+        pay_type, // 🔹 new field name
+      };
+    });
+
+    // 2️⃣ Filter if include = true
+    const finalSelection = include
+      ? processedClients?.filter((item) => Number(item?.amount) !== 0)
+      : processedClients;
+
+    // 3️⃣ Generate HTML
+    const html = allCustomersTemplate(
+      finalSelection,
+      totals?.payable ?? 0,
+      totals?.receivable ?? 0,
+      2
+    );
+    // 4️⃣ PDF options (adjust directory according to library)
+    let options = {
+      html: html,
+      fileName: 'report',
+      base64: false,
+    };
+
+    // 5️⃣ Generate PDF + view
+    try {
+      let results = await generatePDF(options);
+      console.log('PDF Path:', results?.filePath);
+
+      // Only prepend file:// if needed
+      const uri = results?.filePath.startsWith('file://')
+        ? results?.filePath
+        : 'file://' + results?.filePath;
+
+      viewDocument({ uri });
+    } catch (err) {
+      console.error('PDF generation failed:', err);
+    }
+  };
+
+  const clearSearch = () => {
+    searchBarRef.current?.clearInputSilent();
+  };
+
+
+  return (
+    <View style={Styles._mainContainer}>
+      <ScrollView
+        contentContainerStyle={{ alignItems: 'center', paddingBottom: 200 }}
+        showsVerticalScrollIndicator={false}
+      >
+        <Balance
+          greenTitle={'You will give'}
+          greenValue={totals?.receivable}
+          redTitle={'You will get'}
+          redValue={totals?.payable}
+          onToggleBalance={(bal) => {
+            if (bal) {
+              setMargin(30);
+            } else {
+              setMargin(60);
+            }
+          }}
+          onArrowPress={() => {
+            getTransactionsByClientType(
+              '0',
+              null,
+              null,
+              selectBusiness?.id
+            ).then((res) => {
+              dispatch({
+                type: ALL_TRANSACTIONS,
+                payload: res,
+              });
+              navigation.navigate('AllTransactions', { clientType: '0' });
+            });
+          }}
+        />
+        {/* <View style={{height:HP(7)}}></View> */}
+        <Entries marginTop={Margin} navigation={navigation} />
+
+        <View style={Styles._contentMain}>
+          <View style={Styles._searchMain}>
+            {clients && clients.length > 0 && (
+              <>
+                <View style={Styles._inputMain}>
+                  <SearchBar
+                    onChangeText={(text) => handleSearch(text)}
+                    ref={searchBarRef}
+                  // placeholder={clients.length + " Customers"}
+                  />
                 </View>
-            </ScrollView>
+
+                <View style={Styles._filterMain}>
+                  <TouchableOpacity
+                    activeOpacity={0.8}
+                    style={Styles._filterBtn}
+                    onPress={() => setIsFilterModal(true)}
+                  >
+                    <Ionicons
+                      name={'funnel-outline'}
+                      color={COLORS.primaryColor}
+                      size={27}
+                    />
+                  </TouchableOpacity>
+
+                  <TouchableOpacity
+                    activeOpacity={0.8}
+                    style={Styles._filterBtn}
+                    onPress={() => {
+                      showDownloadAlert();
+                    }}
+                  >
+                    <FontAwesome6
+                      name={'file-pdf'}
+                      color={COLORS.primaryColor}
+                      size={23}
+                    />
+                  </TouchableOpacity>
+                </View>
+              </>
+            )}
+          </View>
+
+          <View>
+            {displayClients && displayClients.length > 0 ? (
+              displayClients
+                .map((item, index) => {
+                  let amount = item?.total_subamount - item?.total_amount;
+
+
+                  let type = 'none';
+                  if (amount > 0) {
+                    type = 'receivable';
+                  } else if (amount < 0) {
+                    type = 'payable';
+                  }
+
+                  amount = Math.abs(amount);
+
+                  return (
+                    <User
+                      key={index}
+                      name={item?.name}
+                      addedAt={formatDateTime(
+                        item?.latest_transaction_date || item?.created_at
+                      )}
+                      amount={amount}
+                      type={type}
+                      avatarColor={item?.avatarColor}
+                      clientType={item?.type}
+                      icon={item?.local_path}
+                      mainContainer={{
+                        padding: 0,
+                        width: WP(100),
+                        paddingHorizontal: WP(2),
+                      }}
+                      onPress={() => {
+                        getClientDetails(item?.id).then((res) => {
+                          dispatch({
+                            type: CLIENT_DETAILS,
+                            payload: res,
+                          });
+                          navigation.navigate('CustomerEntries', {
+                            homeDetails: item,
+                          });
+                        });
+
+                        // dispatch({
+                        //   type: CLIENT_DETAILS,
+                        //   payload: item,
+                        // });
+                        // navigation.navigate('CustomerEntries', {
+                        //   homeDetails: item,
+                        // });
+
+                        // console.log({ item })
+                      }}
+                    />
+                  );
+                })
+            ) : (
+              <View>
+                <AccountSetupSteps />
+              </View>
+            )}
+
+          </View>
+        </View>
+      </ScrollView>
+
+      <TouchableOpacity
+        style={[Styles._floatingBtn, { bottom: 70 + insets.bottom }]}
+        activeOpacity={0.8}
+        onPress={() => {
+          navigation.navigate('AddScreen', { type: 0 });
+        }}
+      >
+        <LinearGradient
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+          style={Styles._linearGradient}
+        >
+          <Ionicons
+            name={'person-add-outline'}
+            color={COLORS.whiteColor}
+            size={20}
+            style={{ paddingLeft: 10 }}
+          />
+
+          <Text style={Styles._fabTxt}>ADD CUSTOMER</Text>
+        </LinearGradient>
+      </TouchableOpacity>
+
+      {(SelectedFilter !== 'all' || SelectedSort !== 'most_recent') && (
+        <TouchableOpacity
+          style={[
+            Styles._floatingBtn,
+            { bottom: 125 + insets.bottom, width: 'auto' },
+          ]}
+          activeOpacity={0.8}
+          onPress={() => {
+            setSelectedFilter('all');
+            setSelectedSort('most_recent');
+            clearFilters();
+          }}
+        >
+          <LinearGradient
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            colors={[COLORS.grey, COLORS.grey]}
+            style={[
+              Styles._linearGradient,
+              { paddingHorizontal: 10, justifyContent: 'none' },
+            ]}
+          >
+            <Ionicons
+              name={'close'}
+              color={COLORS.blackColor}
+              size={ICON_SIZES.FAB_ICON}
+            />
+            <Text
+              style={[
+                Styles._fabTxt,
+                { color: COLORS.blackColor, paddingRight: 0 },
+              ]}
+            >
+              Clear filter
+            </Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      )}
+
+      <Modal
+        isVisible={IsFilterModal}
+        onBackButtonPress={() => {
+          setIsFilterModal(false);
+          clearFilters();
+        }}
+        onBackdropPress={() => {
+          setIsFilterModal(false);
+          clearFilters();
+        }}
+        style={Styles._modal}
+      >
+        <View style={Styles._modalMain}>
+          <Text style={Styles._modalTitle}>Filter By</Text>
+          <View style={Styles._filtersMain}>
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={[
+                Styles._filterSelect,
+                {
+                  justifyContent: 'center',
+                  borderColor:
+                    SelectedFilter == 'all'
+                      ? COLORS.primaryColor
+                      : COLORS.whiteColor,
+                  borderWidth: 1,
+                },
+              ]}
+              onPress={() => {
+                // setIsFilterModal(false)
+                setSelectedFilter('all');
+              }}
+            >
+              <Text style={Styles._filterSelectText}>All</Text>
+            </TouchableOpacity>
 
             <TouchableOpacity
-                style={Styles._floatingBtn}
+              activeOpacity={0.8}
+              style={[
+                Styles._filterSelect,
+                {
+                  paddingHorizontal: 20,
+                  gap: 8,
+                  borderColor:
+                    SelectedFilter == 'receivable'
+                      ? COLORS.primaryColor
+                      : COLORS.whiteColor,
+                  borderWidth: 1,
+                },
+              ]}
+              onPress={() => {
+                // setIsFilterModal(false)
+                setSelectedFilter('receivable');
+              }}
+            >
+              <Ionicons name={'remove'} color={COLORS.redColor} size={20} />
+              <Text style={[Styles._filterSelectText]}>Receivable</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={[
+                Styles._filterSelect,
+                {
+                  paddingHorizontal: 20,
+                  gap: 8,
+                  borderColor:
+                    SelectedFilter == 'payable'
+                      ? COLORS.primaryColor
+                      : COLORS.whiteColor,
+                  borderWidth: 1,
+                },
+              ]}
+              onPress={() => {
+                setSelectedFilter('payable');
+                // setIsFilterModal(false)
+              }}
+            >
+              <Ionicons name={'add'} color={'green'} size={20} />
+              <Text style={[Styles._filterSelectText]}>Payable</Text>
+            </TouchableOpacity>
+          </View>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={[
+              Styles._filterSelect,
+              {
+                paddingHorizontal: 20,
+                gap: 8,
+                alignSelf: 'flex-start',
+                marginTop: 8,
+                borderColor:
+                  SelectedFilter == 'settled'
+                    ? COLORS.primaryColor
+                    : COLORS.whiteColor,
+                borderWidth: 1,
+              },
+            ]}
+            onPress={() => {
+              setSelectedFilter('settled');
+              // setIsFilterModal(false)
+            }}
+          >
+            <Text style={Styles._filterSelectText}>0</Text>
+            <Text style={[Styles._filterSelectText]}>Settled</Text>
+          </TouchableOpacity>
+
+          <View style={Styles._sortMain}>
+            <Text style={Styles._modalTitle}>Sort by</Text>
+            <View style={Styles._sortOptionsMain}>
+              <TouchableOpacity
+                style={Styles._option}
                 activeOpacity={0.8}
                 onPress={() => {
-                    navigation.navigate("AddScreen", { type: 0 });
+                  // setIsFilterModal(false)
+                  setSelectedSort('most_recent');
                 }}
+              >
+                <Text
+                  style={[
+                    Styles._optionTitle,
+                    {
+                      color:
+                        SelectedSort === 'most_recent'
+                          ? COLORS.primaryColor
+                          : COLORS.blackColor,
+                    },
+                  ]}
+                >
+                  Most Recent
+                </Text>
+                <Ionicons
+                  name={
+                    SelectedSort === 'most_recent'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedSort === 'most_recent'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+              </TouchableOpacity>
 
-            >
-                <LinearGradient
-                    start={{ x: 0, y: 0 }}
-                    end={{ x: 1, y: 0 }}
-                    colors={[COLORS.secondaryColor, COLORS.primaryColor]}
-                    style={Styles._linearGradient}
+              <TouchableOpacity
+                style={Styles._option}
+                activeOpacity={0.8}
+                onPress={() => {
+                  // setIsFilterModal(false)
+                  setSelectedSort('highest_amount');
+                }}
+              >
+                <Text
+                  style={[
+                    Styles._optionTitle,
+                    {
+                      color:
+                        SelectedSort === 'highest_amount'
+                          ? COLORS.primaryColor
+                          : COLORS.blackColor,
+                    },
+                  ]}
                 >
-                    <Ionicons
-                        name={"person-add-outline"}
-                        color={COLORS.whiteColor}
-                        size={22}
-                        style={{ paddingLeft: 10 }}
-                    />
+                  Highest Amount
+                </Text>
+                <Ionicons
+                  name={
+                    SelectedSort === 'highest_amount'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedSort === 'highest_amount'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+              </TouchableOpacity>
 
-                    <Text style={Styles._fabTxt}>ADD CUSTOMER</Text>
-                </LinearGradient>
-            </TouchableOpacity>
+              <TouchableOpacity
+                style={Styles._option}
+                activeOpacity={0.8}
+                onPress={() => {
+                  // setIsFilterModal(false)
+                  setSelectedSort('name_az');
+                }}
+              >
+                <Text
+                  style={[
+                    Styles._optionTitle,
+                    {
+                      color:
+                        SelectedSort === 'name_az'
+                          ? COLORS.primaryColor
+                          : COLORS.blackColor,
+                    },
+                  ]}
+                >
+                  By Name (A-Z)
+                </Text>
+                <Ionicons
+                  name={
+                    SelectedSort === 'name_az'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedSort === 'name_az'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={Styles._option}
+                activeOpacity={0.8}
+                onPress={() => {
+                  // setIsFilterModal(false)
+                  setSelectedSort('oldest');
+                }}
+              >
+                <Text
+                  style={[
+                    Styles._optionTitle,
+                    {
+                      color:
+                        SelectedSort === 'oldest'
+                          ? COLORS.primaryColor
+                          : COLORS.blackColor,
+                    },
+                  ]}
+                >
+                  Oldest
+                </Text>
+                <Ionicons
+                  name={
+                    SelectedSort === 'oldest'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedSort === 'oldest'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={Styles._option}
+                activeOpacity={0.8}
+                onPress={() => {
+                  // setIsFilterModal(false)
+                  setSelectedSort('least_amount');
+                }}
+              >
+                <Text
+                  style={[
+                    Styles._optionTitle,
+                    {
+                      color:
+                        SelectedSort === 'least_amount'
+                          ? COLORS.primaryColor
+                          : COLORS.blackColor,
+                    },
+                  ]}
+                >
+                  Least Amount
+                </Text>
+                <Ionicons
+                  name={
+                    SelectedSort === 'least_amount'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedSort === 'least_amount'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={Styles._option}
+                activeOpacity={0.8}
+                onPress={() => {
+                  // setIsFilterModal(false)
+                  setSelectedSort('name_za');
+                }}
+              >
+                <Text
+                  style={[
+                    Styles._optionTitle,
+                    {
+                      color:
+                        SelectedSort === 'name_za'
+                          ? COLORS.primaryColor
+                          : COLORS.blackColor,
+                    },
+                  ]}
+                >
+                  By Name (Z-A)
+                </Text>
+                <Ionicons
+                  name={
+                    SelectedSort === 'name_za'
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedSort === 'name_za'
+                      ? COLORS.primaryColor
+                      : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={Styles._resultBtn}
+            onPress={() => {
+              applyFilterAndSort();
+              setIsFilterModal(false);
+            }}
+          >
+            <Text style={Styles._resultText}>VIEW RESULT</Text>
+          </TouchableOpacity>
         </View>
-    )
+      </Modal>
+    </View>
+  );
 }
 
 const Styles = StyleSheet.create({
-    _mainContainer: {
-        flex: 1,
-        backgroundColor: COLORS.backgroundColor,
-        alignItems: "center",
-    },
-    _contentMain: {
-        width: WP(100),
-        // height: 30,
-        backgroundColor: COLORS.whiteColor,
-        paddingHorizontal: 15,
-        marginTop: 6
-    },
-    _searchMain: {
-        width: "100%",
-        flexDirection: "row",
-        // height:40,
-        paddingVertical: 20,
-    },
-    _inputMain: {
-        width: "75%"
-    },
-    _filterMain: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 11,
-        paddingLeft: 10
-    },
-    _filterBtn: {
-        width: 35,
-        height: 35,
-        justifyContent: "center",
-        alignItems: "center"
-        // backgroundColor:"red"
-    },
-    _floatingBtn: {
-        width: WP(38),
-        height: 42,
-        position: "absolute",
-        right: 12,
-        bottom: 70,
-        borderRadius: 40,
-        overflow: "hidden",
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.2,
-        shadowRadius: 3.84,
-        elevation: 5,
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.whi,
+    alignItems: 'center',
+  },
+  _contentMain: {
+    // width: WP(100),
+    // height: 30,
+    backgroundColor: COLORS.whiteColor,
+    // paddingHorizontal: 15,
+    marginTop: 10,
+  },
+  _searchMain: {
+    width: WP(100),
+    // justifyContent: 'center',
+    alignSelf: 'center',
+    flexDirection: 'row',
+    // height:40,
+    // padding: 3,
+    paddingVertical: 12,
+    paddingHorizontal: WP(2),
+    // backgroundColor:"red"
+  },
+  _inputMain: {
+    width: '75%',
+  },
+  _filterMain: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 11,
+    paddingLeft: 10,
+  },
+  _filterBtn: {
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // backgroundColor:"red"
+  },
+  _floatingBtn: {
+    // width: WP(45),
+    height: 50,
+    position: 'absolute',
+    right: 12,
+    bottom: 70,
+    borderRadius: 100,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    _linearGradient: {
-        width: "100%",
-        height: "100%",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  _linearGradient: {
+    // width: "100%",
+    height: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 10,
+  },
+  _fabTxt: {
+    color: COLORS.whiteColor,
+    fontSize: TEXT_SIZES.FLOATING_BUTTON_TEXT,
+    fontFamily: FONT_MEDIUM,
+    paddingRight: 10,
+  },
+  _modal: {
+    margin: 0,
+    padding: 0,
+    justifyContent: 'flex-end',
+  },
+  _modalMain: {
+    width: WP(100),
+    // height: HP(45),
+    backgroundColor: COLORS.backgroundColor,
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    paddingHorizontal: 25,
+    paddingTop: 15,
+    alignItems: 'center',
+    paddingBottom: 20,
+  },
+  _modalTitle: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 18,
+  },
+  _filtersMain: {
+    width: '100%',
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 10,
+  },
+  _filterSelect: {
+    minWidth: 65,
+    height: 38,
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: 100,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    _fabTxt: {
-        color: COLORS.whiteColor,
-        fontSize: 12,
-        fontFamily: FONT_NORMAL,
-        paddingRight: 10,
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 3,
+  },
+  _filterSelectText: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _sortMain: {
+    marginTop: 20,
+    alignItems: 'center',
+    gap: 12,
+  },
+  _sortOptionsMain: {
+    width: '100%',
+    // height: 200,
+    backgroundColor: COLORS.whiteColor,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-})
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 3,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    paddingVertical: 10,
+  },
+  _option: {
+    width: '100%',
+    height: 45,
+    // backgroundColor: "red",
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _optionTitle: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _resultBtn: {
+    width: '100%',
+    height: 45,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: 100,
+    marginTop: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _resultText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_BOLD,
+    fontSize: 14,
+  },
+});