digikhata-mashreq-sdk 1.0.0 → 1.1.1

package/src/app/components/ExpenseList.js

@@ -0,0 +1,507 @@
+import React, { useRef, useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  SafeAreaView,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import { addCommas, COLORS, FONT_BOLD, FONT_MEDIUM, FONT_NORMAL, formatDateTime, getAvatar, getCurrentMonthName, TEXT_SIZES } from '../themes/config';
+import Feather from 'react-native-vector-icons/Feather';
+import SearchBar from './SearchBar';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
+import { useNavigation } from '@react-navigation/native';
+import Modal from "react-native-modal";
+
+// Dummy bills (for design only)
+const DUMMY_BILLS = [
+  {
+    id: '1',
+    title: 'Mango',
+    dateTime: 'Sun, 19 Oct 25, 09:42 PM',
+    amount: 1140,
+    weight: 'Bundle (bdl)',
+  },
+  {
+    id: '2',
+    title: 'Apple',
+    dateTime: 'Sat, 18 Oct 25, 07:20 PM',
+    amount: 8500,
+    weight: 'Milligram (mg)',
+  },
+  {
+    id: '3',
+    title: 'Peach',
+    dateTime: 'Fri, 17 Oct 25, 11:30 AM',
+    amount: 3000,
+    weight: 'Milligram (mg)',
+  },
+  {
+    id: '4',
+    title: 'Peach',
+    dateTime: 'Fri, 17 Oct 25, 11:30 AM',
+    amount: 3000,
+    weight: 'Milligram (mg)',
+  },
+  {
+    id: '5',
+    title: 'Peach',
+    dateTime: 'Fri, 17 Oct 25, 11:30 AM',
+    amount: 3000,
+    weight: 'Milligram (mg)',
+  },
+  {
+    id: '6',
+    title: 'Peach',
+    dateTime: 'Fri, 17 Oct 25, 11:30 AM',
+    amount: 3000,
+    weight: 'Milligram (mg)',
+  },
+  {
+    id: '7',
+    title: 'Peach',
+    dateTime: 'Fri, 17 Oct 25, 11:30 AM',
+    amount: 3000,
+    weight: 'Milligram (mg)',
+  },
+  {
+    id: '8',
+    title: 'Peach',
+    dateTime: 'Fri, 17 Oct 25, 11:30 AM',
+    amount: 3000,
+    weight: 'Milligram (mg)',
+  },
+];
+
+export default function ExpenseList({ avatarColor = 'red', navigation, ExpenseCategories }) {
+
+  const searchBarRef = useRef(null);
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [SortModal, setSortModal] = useState(false);
+  const [SelectedFilter, setSelectedFilter] = useState('most_recent');
+  const [FilteredCategories, setFilteredCategories] = useState([]);
+
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setFilteredCategories(ExpenseCategories);
+      return; // ✅ stop here if no search
+    }
+
+    const lowerQuery = searchQuery.toLowerCase();
+
+    const filtered = ExpenseCategories.filter((item) => {
+      const nameMatch = item.name?.toLowerCase().includes(lowerQuery);
+      const amountMatch = item.totalAmount?.toString().toLowerCase().includes(lowerQuery);
+      return nameMatch || amountMatch;
+    });
+
+    setFilteredCategories(filtered);
+  }, [searchQuery, ExpenseCategories]);
+
+  const renderBill = ({ item }) => (
+    <TouchableOpacity
+      style={styles.billCard}
+      activeOpacity={0.8}
+      onPress={() => {
+        navigation.navigate('ExpenseEntries', { eId: item?.id });
+      }}
+    >
+      {/* Left: Bill Icon */}
+      {/* <View style={styles.iconContainer}>
+        <Feather name="file-text" size={24} color={COLORS.primaryColor} />
+      </View> */}
+      <View style={styles._avatarMain}>
+        <Text style={[styles._avatarText, { color: avatarColor }]}>
+          <Text style={[styles._avatarText, { color: COLORS.gray }]}>
+            {getAvatar(item?.name)}
+          </Text>
+        </Text>
+      </View>
+      {/* Middle: Bill Info */}
+      <View style={styles.infoContainer}>
+        <Text style={styles.billTitle}>{item?.name}</Text>
+        <Text style={styles.billDate}>{formatDateTime(item.created_at)}</Text>
+      </View>
+
+      {/* Right: Amount */}
+      <View style={styles.amountContainer}>
+        {/* <Text style={styles.amountText}>Rs {item.amount.toLocaleString()}</Text> */}
+
+        <Text style={[styles.billTitle, { color: COLORS.redColor }]}>
+          {/* {' '} */}
+          Rs {addCommas(Number(item?.totalAmount))}
+        </Text>
+        {/* <Text style={styles.billDate}>{item.weight}</Text> */}
+      </View>
+    </TouchableOpacity>
+  );
+
+  const applyFilter = (data, filterType) => {
+    let sorted = [...data];
+
+    switch (filterType) {
+      case 'highest_amount':
+        sorted.sort((a, b) => Number(b.amount) - Number(a.amount));
+        break;
+
+      case 'least_amount':
+        sorted.sort((a, b) => Number(a.amount) - Number(b.amount));
+        break;
+
+      case 'oldest':
+        sorted.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+        break;
+
+      case 'most_recent':
+      default:
+        sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+        break;
+    }
+
+    setFilteredCategories(sorted);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      {/* 🔍 Search Bar + Filter Icons */}
+      <View style={styles._searchMain}>
+        <View style={styles._inputMain}>
+          <SearchBar
+            ref={searchBarRef}
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+          />
+        </View>
+
+        <View style={styles._filterMain}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={styles._filterBtn}
+            onPress={() => setSortModal(true)}
+          >
+            <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>
+
+      {/* 🧾 Bills List */}
+      <FlatList
+        data={FilteredCategories}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={renderBill}
+        showsVerticalScrollIndicator={false} // ✅ enables scroll indicator (optional)
+        contentContainerStyle={{
+          paddingBottom: 250,
+        }}
+        nestedScrollEnabled={true} // ✅ allows it to scroll properly if nested inside other scroll views
+      />
+
+      <Modal
+        isVisible={SortModal}
+        style={{ margin: 0, justifyContent: 'flex-end' }}
+        onBackdropPress={() => setSortModal(false)}
+        onBackButtonPress={() => setSortModal(false)}
+      >
+        <View style={styles._modalMain}>
+          <Text style={styles._modalTitle}>Sort By</Text>
+
+          <View style={styles._optionsMain}>
+            {/* Most Recent */}
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={styles._optionMain}
+              onPress={() => setSelectedFilter('most_recent')}
+            >
+              <Text
+                style={{
+                  color:
+                    SelectedFilter == 'most_recent'
+                      ? COLORS.primaryColor
+                      : COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 16,
+                }}
+              >
+                Most Recent
+              </Text>
+
+              <Ionicons
+                name={
+                  SelectedFilter == 'most_recent'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                size={25}
+                color={
+                  SelectedFilter == 'most_recent'
+                    ? COLORS.primaryColor
+                    : COLORS.blackColor
+                }
+              />
+            </TouchableOpacity>
+
+            {/* Oldest */}
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={styles._optionMain}
+              onPress={() => setSelectedFilter('oldest')}
+            >
+              <Text
+                style={{
+                  color:
+                    SelectedFilter == 'oldest'
+                      ? COLORS.primaryColor
+                      : COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 16,
+                }}
+              >
+                Oldest
+              </Text>
+
+              <Ionicons
+                name={
+                  SelectedFilter == 'oldest'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                size={25}
+                color={
+                  SelectedFilter == 'oldest'
+                    ? COLORS.primaryColor
+                    : COLORS.blackColor
+                }
+              />
+            </TouchableOpacity>
+
+            {/* Highest Amount */}
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={styles._optionMain}
+              onPress={() => setSelectedFilter('highest_amount')}
+            >
+              <Text
+                style={{
+                  color:
+                    SelectedFilter == 'highest_amount'
+                      ? COLORS.primaryColor
+                      : COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 16,
+                }}
+              >
+                Highest Amount
+              </Text>
+
+              <Ionicons
+                name={
+                  SelectedFilter == 'highest_amount'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                size={25}
+                color={
+                  SelectedFilter == 'highest_amount'
+                    ? COLORS.primaryColor
+                    : COLORS.blackColor
+                }
+              />
+            </TouchableOpacity>
+
+            {/* Least Amount */}
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={styles._optionMain}
+              onPress={() => setSelectedFilter('least_amount')}
+            >
+              <Text
+                style={{
+                  color:
+                    SelectedFilter == 'least_amount'
+                      ? COLORS.primaryColor
+                      : COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 16,
+                }}
+              >
+                Least Amount
+              </Text>
+
+              <Ionicons
+                name={
+                  SelectedFilter == 'least_amount'
+                    ? 'radio-button-on'
+                    : 'radio-button-off'
+                }
+                size={25}
+                color={
+                  SelectedFilter == 'least_amount'
+                    ? COLORS.primaryColor
+                    : COLORS.blackColor
+                }
+              />
+            </TouchableOpacity>
+          </View>
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={styles._resultBtn}
+            onPress={() => {
+              applyFilter(ExpenseCategories, SelectedFilter);
+              setSortModal(false);
+            }}
+          >
+            <Text
+              style={{
+                color: COLORS.whiteColor,
+                fontFamily: FONT_MEDIUM,
+                fontSize: 16,
+              }}
+            >
+              VIEW RESULT
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.whiteColor,
+    width: '100%',
+    alignSelf: 'center',
+  },
+
+  _searchMain: {
+    width: '95%',
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    flexDirection: 'row',
+    paddingVertical: 20,
+  },
+  _inputMain: {
+    width: '88%',
+  },
+  _filterMain: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 11,
+    paddingLeft: 10,
+  },
+  _filterBtn: {
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  billCard: {
+    flexDirection: 'row',
+    width: '95%',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.whiteColor,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.borderColor,
+    paddingVertical: 15,
+  },
+  iconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  infoContainer: {
+    flex: 1,
+    marginLeft: 10,
+  },
+  billTitle: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: TEXT_SIZES.CARD_AMOUNT,
+    color: '#000',
+  },
+  billDate: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+    color: COLORS.blackColor,
+    marginTop: 2,
+  },
+  amountContainer: {
+    alignItems: 'flex-end',
+  },
+  amountText: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 13,
+    color: COLORS.primaryColor,
+  },
+  _avatarText: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 16,
+    color: COLORS.primaryColor,
+  },
+  _avatarMain: {
+    width: 40,
+    height: 40,
+    backgroundColor: COLORS.lightGrey,
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _modalMain: {
+    width: '100%',
+    // height: 300,
+    backgroundColor: COLORS.backgroundColor,
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    paddingVertical: 20,
+  },
+  _modalTitle: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_BOLD,
+    fontSize: 18,
+  },
+  _optionsMain: {
+    width: '90%',
+    height: 250,
+    backgroundColor: COLORS.whiteColor,
+    marginVertical: 15,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+  },
+  _optionMain: {
+    width: '100%',
+    height: '25%',
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+  },
+  _resultBtn: {
+    width: '90%',
+    height: 50,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    backgroundColor: COLORS.primaryColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});