digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/lib/module/app/screens/Suppliers.js

@@ -1,128 +1,419 @@
 "use strict";
 
-import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
-import React, { useEffect } from 'react';
-import { COLORS, FONT_NORMAL, formatDateTime, HP, WP } from "../themes/config.js";
-import { Balance, Entries, SearchBar, User } from "../components/index.js";
-import Ionicons from "react-native-vector-icons/Ionicons";
-import FontAwesome6 from "react-native-vector-icons/FontAwesome6";
+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, getCurrentMonthName, HP, ICON_SIZES, TEXT_SIZES, WP } from "../themes/config.js";
+import { AccountSetupSteps, Balance, Entries, SearchBar, User } from "../components/index.js";
+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.js";
-import { useSelector, useDispatch } from "react-redux";
-import { CLIENT_DETAILS, HOME_SUPPLIERS, SUPPLIER_DETAILS } from "../redux/reducers/client/client_types.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Suppliers({
-  navigation
-}) {
+import { getAllClients, getClientDetails, getClientsByType, getTransactionsByClientType } from "../database/clients.js";
+import { useSelector, useDispatch } from 'react-redux';
+import { ALL_TRANSACTIONS, CLIENT_DETAILS, HOME_CUSTOMERS, HOME_SUPPLIERS } from "../redux/reducers/client/client_types.js";
+import Modal from 'react-native-modal';
+import { generatePDF } from 'react-native-html-to-pdf';
+import { viewDocument } from '@react-native-documents/viewer';
+import { allCustomersTemplate, allSuppliersTemplate } from "../htmlTemplates/htmlTemplates.js";
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useFocusEffect } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function Suppliers() {
   const dispatch = useDispatch();
   const suppliers = useSelector(state => state.client.home_suppliers);
-  useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', () => {
-      getClientsByType(1).then(clients => {
+  const selectBusiness = useSelector(state => state.client.selected_business);
+  const userClients = useSelector(state => state.user.user_clients);
+  const insets = useSafeAreaInsets();
+  const searchBarRef = useRef(null);
+  let monthName = getCurrentMonthName();
+  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(62);
+  useFocusEffect(useCallback(() => {
+    (async () => {
+      try {
+        const clients = await getClientsByType(1, null, null, selectBusiness?.id);
+        const freshClients = addPayType(clients);
         dispatch({
           type: HOME_SUPPLIERS,
-          payload: clients
+          payload: freshClients
         });
-        console.log("Suppliers:", clients);
-      }).catch(err => console.error(err));
+        setBaseClients(freshClients);
+        setDisplayClients(freshClients);
+        setSelectedFilter('all');
+        setSelectedSort('most_recent');
+        setSearchText('');
+        handleSearch('', freshClients);
+        clearSearch();
+      } catch (err) {
+        console.error(err);
+      }
+    })();
+  }, [navigation, selectBusiness]));
+  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 applyFilterAndSort = async () => {
+    let clients = [];
+
+    // DB sort
+    if (SelectedSort === 'most_recent' || SelectedSort === 'oldest' || SelectedSort === 'name_az' || SelectedSort === 'name_za') {
+      clients = await getClientsByType(1, SelectedSort, null, selectBusiness?.id);
+    } else {
+      clients = await getClientsByType(1, 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
+      };
     });
-    return () => unsubscribe();
-  }, [navigation]);
-  const totalSubamountSum = suppliers?.reduce((sum, item) => sum + (parseFloat(item?.total_subamount) || 0), 0);
-  const totalAmountSum = suppliers?.reduce((sum, item) => sum + (parseFloat(item?.total_amount) || 0), 0);
 
-  // Step 2: Difference
+    // 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(1, 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 {
+          ...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(1, 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
+      };
+    });
+
+    // reset base + display clients
+    setBaseClients(arr);
+    setDisplayClients(arr);
+  };
+  const showDownloadAlert = () => {
+    Alert.alert('Download Suppliers List',
+    // Title
+    'Include Zero balance suppliers?',
+    // Message
+    [{
+      text: 'No',
+      onPress: () => createPDF(true),
+      style: 'cancel' // makes it a cancel button (iOS only)
+    }, {
+      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);
+      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 = allSuppliersTemplate(finalSelection, totalAmountSum ?? 0, totalSubamountSum ?? 0);
+    // 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 currentDate = new Date();
+  const currentMonth = currentDate.getMonth();
+  const currentYear = currentDate.getFullYear();
+  const currentMonthSuppliers = suppliers?.filter(item => {
+    const dateStr = item?.latest_transaction_date || item?.created_at;
+    if (!dateStr) return false;
+    const date = new Date(dateStr.replace(' ', 'T'));
+    return date.getMonth() === currentMonth && date.getFullYear() === currentYear;
+  });
+  const totalSubamountSum = currentMonthSuppliers?.reduce((sum, item) => sum + (parseFloat(item?.total_subamount) || 0), 0);
+  const totalAmountSum = currentMonthSuppliers?.reduce((sum, item) => sum + (parseFloat(item?.total_amount) || 0), 0);
+
+  // const totalAmountSum = userClients.reduce(
+  //   (sum, item) =>
+  //     item.type === "1"
+  //       ? sum + (Number(item?.amount) || 0)
+  //       : sum,
+  //   0
+  // );
+
+  // const totalSubamountSum = userClients.reduce(
+  //   (sum, item) =>
+  //     item.type === "1"
+  //       ? sum + (Number(item?.subamount) || 0)
+  //       : sum,
+  //   0
+  // );
+
+  const clearSearch = () => {
+    searchBarRef.current?.clearInputSilent();
+  };
+  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
+      };
+    });
+  }
   let finalAmount = totalSubamountSum - totalAmountSum;
-  let type = "none";
+  let type = 'none';
   if (finalAmount > 0) {
-    type = "receivable";
+    type = 'receivable';
   } else if (finalAmount < 0) {
-    type = "payable";
+    type = 'payable';
   }
   finalAmount = Math.abs(finalAmount);
   return /*#__PURE__*/_jsxs(View, {
     style: Styles._mainContainer,
     children: [/*#__PURE__*/_jsxs(ScrollView, {
       contentContainerStyle: {
-        alignItems: "center",
-        paddingBottom: 60
+        alignItems: 'center',
+        paddingBottom: 200
       },
       showsVerticalScrollIndicator: false,
       children: [/*#__PURE__*/_jsx(Balance, {
         greenValue: totalSubamountSum,
-        greenTitle: "Total purchase of Sep",
-        redTitle: type == "payable" ? "Received" : "You will give",
+        greenTitle: `Total purchase of ${monthName}`,
+        redTitle: type == 'payable' ? 'Received' : 'You will give',
         redValue: finalAmount,
-        rightColor: type == "payable" ? "red" : "green"
+        onToggleBalance: bal => {
+          if (bal) {
+            setMargin(32);
+          } else {
+            setMargin(62);
+          }
+        }
+        // rightColor={type == "payable" ? "red" : "green"}
+        ,
+        onArrowPress: () => {
+          getTransactionsByClientType('1', null, null, selectBusiness?.id).then(res => {
+            dispatch({
+              type: ALL_TRANSACTIONS,
+              payload: res
+            });
+            navigation.navigate('AllTransactions', {
+              clientType: '1'
+            });
+          });
+        }
       }), /*#__PURE__*/_jsx(Entries, {
-        marginTop: 85
+        marginTop: Margin,
+        navigation: navigation
       }), /*#__PURE__*/_jsxs(View, {
         style: Styles._contentMain,
-        children: [/*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(View, {
           style: Styles._searchMain,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: Styles._inputMain,
-            children: /*#__PURE__*/_jsx(SearchBar, {})
-          }), /*#__PURE__*/_jsxs(View, {
-            style: Styles._filterMain,
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              activeOpacity: 0.8,
-              style: Styles._filterBtn,
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: "funnel-outline",
-                color: COLORS.primaryColor,
-                size: 27
-              })
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              activeOpacity: 0.8,
-              style: Styles._filterBtn,
-              children: /*#__PURE__*/_jsx(FontAwesome6, {
-                name: "file-pdf",
-                color: COLORS.primaryColor,
-                size: 23
+          children: suppliers && suppliers.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: Styles._inputMain,
+              children: /*#__PURE__*/_jsx(SearchBar, {
+                onChangeText: text => handleSearch(text),
+                ref: searchBarRef
               })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: Styles._filterMain,
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                activeOpacity: 0.8,
+                style: Styles._filterBtn,
+                onPress: () => setIsFilterModal(true),
+                children: /*#__PURE__*/_jsx(Ionicons, {
+                  name: 'funnel-outline',
+                  color: COLORS.primaryColor,
+                  size: 27
+                })
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                activeOpacity: 0.8,
+                style: Styles._filterBtn,
+                onPress: () => {
+                  showDownloadAlert();
+                },
+                children: /*#__PURE__*/_jsx(FontAwesome6, {
+                  name: 'file-pdf',
+                  color: COLORS.primaryColor,
+                  size: 23
+                })
+              })]
             })]
-          })]
+          })
         }), /*#__PURE__*/_jsx(View, {
-          children: suppliers?.map((item, index) => {
-            let amount = item?.total_subamount - item?.total_amount;
-            let type = "none";
+          children: suppliers && suppliers.length > 0 ? suppliers.map((item, index) => {
+            let amount = Number(item?.total_subamount) - Number(item?.total_amount);
+            let type = 'none';
             if (amount > 0) {
-              type = "receivable";
+              type = 'receivable';
             } else if (amount < 0) {
-              type = "payable";
+              type = 'payable';
             }
             amount = Math.abs(amount);
-
-            // console.log({amount,type})
-
             return /*#__PURE__*/_jsx(User, {
               name: item?.name,
-              addedAt: formatDateTime(item?.latest_updated_at),
+              addedAt: formatDateTime(item?.latest_transaction_date || item?.created_at),
               amount: amount,
               type: type,
               clientType: item?.type,
-              avatarColor: "green",
+              avatarColor: 'green',
+              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", {
+                  navigation.navigate('CustomerEntries', {
                     homeDetails: item
                   });
                 });
+
+                // dispatch({
+                //   type: CLIENT_DETAILS,
+                //   payload: item,
+                // });
+                // navigation.navigate('CustomerEntries', {
+                //   homeDetails: item,
+                // });
               }
             }, index);
+          }) : /*#__PURE__*/_jsx(View, {
+            children: /*#__PURE__*/_jsx(AccountSetupSteps, {})
           })
         })]
       })]
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: Styles._floatingBtn,
+      style: [Styles._floatingBtn, {
+        bottom: 70 + insets.bottom
+      }],
       activeOpacity: 0.8,
       onPress: () => {
-        navigation.navigate("AddScreen", {
+        navigation.navigate('AddScreen', {
           type: 1
         });
       },
@@ -134,13 +425,15 @@ export default function Suppliers({
         end: {
           x: 1,
           y: 0
-        },
-        colors: ["darkgreen", "green"],
+        }
+        // colors={['darkgreen', 'green']}
+        ,
+        colors: [COLORS.greenColor, COLORS.gradient_green],
         style: Styles._linearGradient,
         children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "person-add-outline",
+          name: 'person-add-outline',
           color: COLORS.whiteColor,
-          size: 22,
+          size: 20,
           style: {
             paddingLeft: 10
           }
@@ -149,6 +442,262 @@ export default function Suppliers({
           children: "ADD SUPPLIER"
         })]
       })
+    }), (SelectedFilter !== 'all' || SelectedSort !== 'most_recent') && /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: [Styles._floatingBtn, {
+        bottom: 125 + insets.bottom,
+        width: 'auto'
+      }],
+      activeOpacity: 0.8,
+      onPress: () => {
+        setSelectedFilter('all');
+        setSelectedSort('most_recent');
+        clearFilters();
+      },
+      children: /*#__PURE__*/_jsxs(LinearGradient, {
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 1,
+          y: 0
+        },
+        colors: [COLORS.grey, COLORS.grey],
+        style: [Styles._linearGradient, {
+          paddingHorizontal: 10,
+          justifyContent: 'none'
+        }],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: 'close',
+          color: COLORS.blackColor,
+          size: ICON_SIZES.FAB_ICON
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [Styles._fabTxt, {
+            color: COLORS.blackColor,
+            paddingRight: 0
+          }],
+          children: "CLEAR FILTER"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Modal, {
+      isVisible: IsFilterModal,
+      onBackButtonPress: () => {
+        setIsFilterModal(false);
+        clearFilters();
+      },
+      onBackdropPress: () => {
+        setIsFilterModal(false);
+        clearFilters();
+      },
+      style: Styles._modal,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: Styles._modalMain,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: Styles._modalTitle,
+          children: "Filter By"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: Styles._filtersMain,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            activeOpacity: 0.8,
+            style: [Styles._filterSelect, {
+              justifyContent: 'center',
+              borderColor: SelectedFilter == 'all' ? COLORS.primaryColor : COLORS.whiteColor,
+              borderWidth: 1
+            }],
+            onPress: () => {
+              // setIsFilterModal(false)
+              setSelectedFilter('all');
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              style: Styles._filterSelectText,
+              children: "All"
+            })
+          }), /*#__PURE__*/_jsxs(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)
+            },
+            children: [/*#__PURE__*/_jsx(Ionicons, {
+              name: 'add',
+              color: 'green',
+              size: 20
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [Styles._filterSelectText],
+              children: "You'll Give"
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            activeOpacity: 0.8,
+            style: [Styles._filterSelect, {
+              paddingHorizontal: 20,
+              gap: 8,
+              borderColor: SelectedFilter == 'receivable' ? COLORS.primaryColor : COLORS.whiteColor,
+              borderWidth: 1
+            }],
+            onPress: () => {
+              // setIsFilterModal(false)
+              setSelectedFilter('receivable');
+            },
+            children: [/*#__PURE__*/_jsx(Ionicons, {
+              name: 'remove',
+              color: COLORS.redColor,
+              size: 20
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [Styles._filterSelectText],
+              children: "Received"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(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)
+          },
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: Styles._filterSelectText,
+            children: "0"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [Styles._filterSelectText],
+            children: "Settled"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: Styles._sortMain,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: Styles._modalTitle,
+            children: "Sort by"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: Styles._sortOptionsMain,
+            children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: Styles._option,
+              activeOpacity: 0.8,
+              onPress: () => {
+                // setIsFilterModal(false)
+                setSelectedSort('most_recent');
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [Styles._optionTitle, {
+                  color: SelectedSort === 'most_recent' ? COLORS.primaryColor : COLORS.blackColor
+                }],
+                children: "Most Recent"
+              }), /*#__PURE__*/_jsx(Ionicons, {
+                name: SelectedSort === 'most_recent' ? 'radio-button-on' : 'radio-button-off',
+                color: SelectedSort === 'most_recent' ? COLORS.primaryColor : COLORS.darkGrey,
+                size: 25
+              })]
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: Styles._option,
+              activeOpacity: 0.8,
+              onPress: () => {
+                // setIsFilterModal(false)
+                setSelectedSort('highest_amount');
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [Styles._optionTitle, {
+                  color: SelectedSort === 'highest_amount' ? COLORS.primaryColor : COLORS.blackColor
+                }],
+                children: "Highest Amount"
+              }), /*#__PURE__*/_jsx(Ionicons, {
+                name: SelectedSort === 'highest_amount' ? 'radio-button-on' : 'radio-button-off',
+                color: SelectedSort === 'highest_amount' ? COLORS.primaryColor : COLORS.darkGrey,
+                size: 25
+              })]
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: Styles._option,
+              activeOpacity: 0.8,
+              onPress: () => {
+                // setIsFilterModal(false)
+                setSelectedSort('name_az');
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [Styles._optionTitle, {
+                  color: SelectedSort === 'name_az' ? COLORS.primaryColor : COLORS.blackColor
+                }],
+                children: "By Name (A-Z)"
+              }), /*#__PURE__*/_jsx(Ionicons, {
+                name: SelectedSort === 'name_az' ? 'radio-button-on' : 'radio-button-off',
+                color: SelectedSort === 'name_az' ? COLORS.primaryColor : COLORS.darkGrey,
+                size: 25
+              })]
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: Styles._option,
+              activeOpacity: 0.8,
+              onPress: () => {
+                // setIsFilterModal(false)
+                setSelectedSort('oldest');
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [Styles._optionTitle, {
+                  color: SelectedSort === 'oldest' ? COLORS.primaryColor : COLORS.blackColor
+                }],
+                children: "Oldest"
+              }), /*#__PURE__*/_jsx(Ionicons, {
+                name: SelectedSort === 'oldest' ? 'radio-button-on' : 'radio-button-off',
+                color: SelectedSort === 'oldest' ? COLORS.primaryColor : COLORS.darkGrey,
+                size: 25
+              })]
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: Styles._option,
+              activeOpacity: 0.8,
+              onPress: () => {
+                // setIsFilterModal(false)
+                setSelectedSort('least_amount');
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [Styles._optionTitle, {
+                  color: SelectedSort === 'least_amount' ? COLORS.primaryColor : COLORS.blackColor
+                }],
+                children: "Least Amount"
+              }), /*#__PURE__*/_jsx(Ionicons, {
+                name: SelectedSort === 'least_amount' ? 'radio-button-on' : 'radio-button-off',
+                color: SelectedSort === 'least_amount' ? COLORS.primaryColor : COLORS.darkGrey,
+                size: 25
+              })]
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: Styles._option,
+              activeOpacity: 0.8,
+              onPress: () => {
+                // setIsFilterModal(false)
+                setSelectedSort('name_za');
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [Styles._optionTitle, {
+                  color: SelectedSort === 'name_za' ? COLORS.primaryColor : COLORS.blackColor
+                }],
+                children: "By Name (Z-A)"
+              }), /*#__PURE__*/_jsx(Ionicons, {
+                name: SelectedSort === 'name_za' ? 'radio-button-on' : 'radio-button-off',
+                color: SelectedSort === 'name_za' ? COLORS.primaryColor : COLORS.darkGrey,
+                size: 25
+              })]
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          activeOpacity: 0.8,
+          style: Styles._resultBtn,
+          onPress: () => {
+            applyFilterAndSort();
+            setIsFilterModal(false);
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: Styles._resultText,
+            children: "VIEW RESULT"
+          })
+        })]
+      })
     })]
   });
 }
@@ -156,47 +705,52 @@ const Styles = StyleSheet.create({
   _mainContainer: {
     flex: 1,
     backgroundColor: COLORS.backgroundColor,
-    alignItems: "center"
+    alignItems: 'center'
   },
   _contentMain: {
-    width: WP(100),
+    // width: WP(100),
     // height: 30,
     backgroundColor: COLORS.whiteColor,
-    paddingHorizontal: 15,
-    marginTop: 6
+    // paddingHorizontal: 15,
+    marginTop: 10
   },
   _searchMain: {
-    width: "100%",
-    flexDirection: "row",
+    width: WP(100),
+    // justifyContent: 'center',
+    alignSelf: 'center',
+    flexDirection: 'row',
     // height:40,
-    paddingVertical: 20
+    // padding: 3,
+    paddingVertical: 12,
+    paddingHorizontal: WP(2)
+    // backgroundColor:"red"
   },
   _inputMain: {
-    width: "75%"
+    width: '75%'
   },
   _filterMain: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
     gap: 11,
     paddingLeft: 10
   },
   _filterBtn: {
     width: 35,
     height: 35,
-    justifyContent: "center",
-    alignItems: "center"
+    justifyContent: 'center',
+    alignItems: 'center'
     // backgroundColor:"red"
   },
   _floatingBtn: {
-    width: WP(38),
-    height: 42,
-    position: "absolute",
+    // width: WP(40),
+    height: 50,
+    position: 'absolute',
     right: 12,
     bottom: 70,
-    borderRadius: 40,
-    overflow: "hidden",
-    shadowColor: "#000",
+    borderRadius: 100,
+    overflow: 'hidden',
+    shadowColor: '#000',
     shadowOffset: {
       width: 0,
       height: 2
@@ -206,17 +760,118 @@ const Styles = StyleSheet.create({
     elevation: 5
   },
   _linearGradient: {
-    width: "100%",
-    height: "100%",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
+    // width: "100%",
+    height: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 10
   },
   _fabTxt: {
     color: COLORS.whiteColor,
-    fontSize: 12,
-    fontFamily: FONT_NORMAL,
+    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: 14
+  },
+  _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
+    },
+    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_MEDIUM,
+    fontSize: 13
   }
 });
 //# sourceMappingURL=Suppliers.js.map