digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/CustomerEntries.js

@@ -1,402 +1,1630 @@
-import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
-import React, { useState, useEffect } from 'react'
-import LinearGradient from 'react-native-linear-gradient'
-import Ionicons from "react-native-vector-icons/Ionicons"
-import { COLORS, FONT_MEDIUM, FONT_NORMAL, formatDateTime, HP, WP } from '../themes/config'
-import { useSelector } from "react-redux";
-import { getClientTransactions } from '../database/clients'
-import { SearchBar, Transaction } from '../components'
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  SafeAreaView,
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+  Linking,
+  Alert,
+  PixelRatio,
+} from 'react-native';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+  addCommas,
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  formatDateTimeShort,
+  formatShortDate,
+  getCurrentMonthName,
+  HP,
+  ICON_SIZES,
+  mergeDateTime,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  changeClientType,
+  getClientDetails,
+  getClientTransactions,
+  insertPhoneNum,
+  setPayDate,
+  softDeleteClient,
+  switchClientToSupplier,
+} from '../database/clients';
+import {
+  BottomView,
+  CountryPhoneInput,
+  SearchBar,
+  Transaction,
+} from '../components';
+import Modal from 'react-native-modal';
+import {
+  CLIENT_DETAILS,
+  STATUS_BAR_COLOR,
+} from '../redux/reducers/client/client_types';
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import ViewShot from 'react-native-view-shot';
+import Share from 'react-native-share';
+import {
+  Menu,
+  MenuOptions,
+  MenuOption,
+  MenuTrigger,
+} from 'react-native-popup-menu';
+
+let deviceH = Dimensions.get('screen').height;
+let windowH = Dimensions.get('window').height;
+
+let bottomNavBarH = deviceH - windowH;
 
 export default function CustomerEntries({ navigation, route }) {
+  const dispatch = useDispatch();
+  const ref = useRef();
+  let monthName = getCurrentMonthName();
+
+  const ClientDetails = useSelector((state) => state.client.client_details);
+  // const homeDetails = route?.params?.homeDetails;
+  const [homeDetails, sethomeDetails] = useState(route?.params?.homeDetails);
+  let amount = Number(homeDetails?.total_subamount) - Number(homeDetails?.total_amount);
+  // let amount = Number(homeDetails?.subamount) - Number(homeDetails?.amount);
 
-    const ClientDetails = useSelector(state => state.client.client_details);
-    const homeDetails = route?.params?.homeDetails;
+  // Variant 2: Only current month
+  const currentDate = new Date();
+  const currentMonth = currentDate.getMonth();
+  const currentYear = currentDate.getFullYear();
 
-    let amount = homeDetails?.total_subamount - homeDetails?.total_amount;
+  const dateStr =
+    homeDetails?.latest_transaction_date || homeDetails?.created_at;
+  let amountCurrentMonth = 0;
 
-    let type = "none";
-    if (amount > 0) {
-        type = "receivable";
-    } else if (amount < 0) {
-        type = "payable";
+  if (dateStr) {
+    const date = new Date(dateStr.replace(' ', 'T'));
+    if (
+      date.getMonth() === currentMonth &&
+      date.getFullYear() === currentYear
+    ) {
+      amountCurrentMonth = Number(homeDetails?.total_subamount) - Number(homeDetails?.total_amount);
     }
+  }
+
+  const [Entries, setEntries] = useState([]);
+  const [DateModal, setDateModal] = useState(false);
+  const [PaymentDate, setPaymentDate] = useState(new Date());
+  const [SelectedDateOption, setSelectedDateOption] = useState('');
+  const [ReminderModal, setReminderModal] = useState(false);
+  const [NumberModal, setNumberModal] = useState(false);
+  const [PhoneNum, setPhoneNum] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [refresh, setRefresh] = useState(false);
+
+  const today = new Date();
+
+  const nextWeek = new Date();
+  nextWeek.setDate(today.getDate() + 7);
+
+  const nextMonth = new Date();
+  nextMonth.setMonth(today.getMonth() + 1);
+
+  const formatDate = (date) => {
+    return date
+      .toLocaleDateString('en-GB', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+      })
+      .replace(',', '');
+  };
+
+  const dateOptions = [
+    {
+      id: 1,
+      name: 'Next Week',
+      date: formatDate(nextWeek),
+      rawDate: nextWeek,
+    },
+    {
+      id: 2,
+      name: 'Next Month',
+      date: formatDate(nextMonth),
+      rawDate: nextMonth,
+    },
+    {
+      id: 3,
+      name: 'Calender',
+    },
+  ];
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      dispatch({
+        type: STATUS_BAR_COLOR,
+        color: COLORS.primaryColor,
+      });
+      setSelectedDateOption(ClientDetails?.fb_id);
+      getClientTransactions(ClientDetails.id).then((res) => {
+        setEntries(res);
+      });
+      // setEntries(ClientDetails?.transactions);
+    });
+    return () => unsubscribe();
+  }, [navigation]);
+
+  let type = 'none';
+  if (amount > 0) {
+    type = 'receivable';
+  } else if (amount < 0) {
+    type = 'payable';
+  }
+
+  amount = Math.abs(amount);
+
+  const options = [
+    {
+      name: 'Report',
+      icon: 'document-outline',
+      disabled: false,
+      isVisible: true,
+      onPress: () => navigation.navigate('Report', { homeDetails }),
+    },
+    {
+      name: 'Set Date',
+      icon: 'calendar-outline',
+      disabled: false,
+      onPress: () => setDateModal(true),
+      isVisible: ClientDetails?.type == 0 ? true : false,
+    },
+    {
+      name: 'Reminder',
+      icon: 'logo-whatsapp',
+      disabled: type == 'payable' ? false : true,
+      isVisible: true,
+      onPress: () => {
+        ClientDetails?.phone ? setReminderModal(true) : setNumberModal(true);
+      },
+    },
+    {
+      name: 'SMS',
+      icon: 'chatbox-ellipses-outline',
+      disabled: type == 'payable' ? false : true,
+      isVisible: true,
+      onPress: () => sendSms(),
+    },
+  ];
+
+  const calculateBalances = (transactions) => {
+    let balance = 0;
+    const reversed = [...transactions].reverse();
 
-    amount = Math.abs(amount);
+    const withBalances = reversed.map((t) => {
+      const amount = parseFloat(t.amount) || 0;
+      const subamount = parseFloat(t.subamount) || 0;
+      balance += subamount - amount;
+      return { ...t, balance };
+    });
 
+    return withBalances.reverse();
+  };
 
-    const [Entries, setEntries] = useState([]);
+  const balancesData = calculateBalances(Entries);
 
-    useEffect(() => {
-        const unsubscribe = navigation.addListener('focus', () => {
-            getClientTransactions(ClientDetails.id).then((res) => {
-                setEntries(res)
-            })
+  const totalAmount = balancesData?.reduce((sum, item) => {
+    return sum + Number(item.amount);
+  }, 0);
+
+  const showDate = (item) => {
+    DateTimePickerAndroid.open({
+      value: PaymentDate,
+      onChange: (event, selectedDate) =>
+        onChangeDate(event, selectedDate, item),
+      mode: 'date',
+      is24Hour: false,
+    });
+  };
+
+  const onChangeDate = async (event, selectedDate, item) => {
+    const currentDate = selectedDate;
+    setPaymentDate(currentDate);
+
+    let date = new Date(currentDate);
+    let time = new Date(currentDate);
+    let formatted = mergeDateTime({ date, time });
+
+    await onSelectDate(formatted, ClientDetails?.id, item?.id);
+  };
+
+  const onSelectDate = async (date, id, optionId) => {
+    setPayDate(date, id, optionId)
+      .then((res) => {
+        console.log('Paydate updated:', res.rowsAffected);
+      })
+      .catch((err) => console.log('Update failed', err));
+
+    getClientDetails(ClientDetails?.id).then((resp) => {
+      dispatch({
+        type: CLIENT_DETAILS,
+        payload: resp,
+      });
+    });
+
+    setSelectedDateOption(optionId);
+    setDateModal(false);
+  };
+
+  const onCapture = useCallback((uri) => {
+    ref.current
+      .capture()
+      .then((uri) => {
+        console.log('Captured URI:', uri);
+        sendToWhatsApp(uri, ClientDetails?.phone?.split('+')[1]);
+      })
+      .catch((err) => console.error('Capture failed', err));
+  }, []);
+
+  const sendToWhatsApp = async (uri, phoneNumber) => {
+    try {
+      await Share.open({
+        url: uri, // the captured image uri
+        social: Share.Social.WHATSAPP,
+        whatsAppNumber: phoneNumber, // e.g. '923001234567'
+        filename: 'reminder.jpg', // optional
+        type: 'image/jpeg',
+      });
+    } catch (err) {
+      console.log('Error sharing to WhatsApp:', err);
+    }
+  };
+
+  const onNumSave = async () => {
+    if (PhoneNum) {
+      await insertPhoneNum(PhoneNum, ClientDetails?.id);
+
+      getClientDetails(ClientDetails?.id).then((resp) => {
+        dispatch({
+          type: CLIENT_DETAILS,
+          payload: resp,
         });
-        return () => unsubscribe();
-    }, [navigation]);
+      });
+
+      setNumberModal(false);
+    }
+  };
+
+  const searchBalances = (balancesData, searchTerm) => {
+    if (!searchTerm) return balancesData;
+
+    const lower = searchTerm.toLowerCase();
+
+    return balancesData.filter((item) => {
+      // combine whatever fields you want to search
+      return (
+        (item.notes && item.notes.toLowerCase().includes(lower)) ||
+        (item.customer_id && item.customer_id.toString().includes(lower)) ||
+        (item.amount && item.amount.toString().includes(lower)) ||
+        (item.subamount && item.subamount.toString().includes(lower))
+      );
+    });
+  };
+
+  const makeCall = async (phoneNumber) => {
+    const url = `tel:${phoneNumber}`;
+
+    // Check if device can handle this URL (some simulators cannot)
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      await Linking.openURL(url);
+    } else {
+      Alert.alert('Error', 'Calling not supported on this device');
+    }
+  };
 
-    const options = [
+  const sendSms = async () => {
+    let phoneNumber = ClientDetails?.phone;
+    const message = `Payment Request
+
+Dear,
+Balance Rs ${amount} is outstanding in your ledger.
+Thanks for your cooperation.`;
+
+    const separator = Platform.OS === 'ios' ? '&' : '?';
+    const url = `sms:${phoneNumber}${separator}body=${encodeURIComponent(message)}`;
+
+    const supported = await Linking.canOpenURL(url);
+    if (supported) {
+      await Linking.openURL(url);
+    } else {
+      Alert.alert('Error', 'SMS not supported on this device');
+    }
+  };
+
+  const onToggleClientTypePress = (client) => {
+    const fromType = client.type === 0 ? 'Customer' : 'Supplier';
+    const toType = client.type === 0 ? 'Supplier' : 'Customer';
+
+    Alert.alert(
+      'Change Client Type',
+      `${client.name} and all related records will be safely changed from ${fromType} to ${toType}. Do you want to continue?`,
+      [
         {
-            name: "Report",
-            icon: "document-outline",
-            disabled: true,
+          text: 'Cancel',
+          onPress: () => console.log('Cancelled changing client type'),
+          style: 'cancel',
         },
         {
-            name: "Set Date",
-            icon: "calendar-outline",
-            disabled: true,
+          text: 'Change',
+          onPress: async () => {
+            try {
+              const newType = client.type === 0 ? 1 : 0;
+              await changeClientType(client.id, newType);
+              console.log(`Client type changed to ${newType}`);
+              navigation.reset({
+                index: 0, // active screen
+                routes: [
+                  {
+                    name: 'HomeScreen',
+                    state: {
+                      routes: [{ name: 'Customers' }], // nested screen
+                    },
+                  },
+                ],
+              });
+            } catch (err) {
+              console.log('Error changing client type:', err);
+            }
+          },
         },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  const onDeleteClient = () => {
+    const typeLabel =
+      ClientDetails?.type === 0
+        ? 'Customer'
+        : ClientDetails?.type === 1
+          ? 'Supplier'
+          : 'Bank';
+    const routeName =
+      ClientDetails?.type === 0
+        ? 'Customers'
+        : ClientDetails?.type === 1
+          ? 'Suppliers'
+          : 'Banks';
+
+    Alert.alert(
+      `Delete ${typeLabel}`, // Title
+      `Are you sure you want to delete this ${typeLabel}?`,
+      [
         {
-            name: "Reminder",
-            icon: "logo-whatsapp",
-            disabled: true,
+          text: 'Cancel',
+          onPress: () => console.log('Cancel'),
+          style: 'cancel',
         },
         {
-            name: "SMS",
-            icon: "chatbox-ellipses-outline",
-            disabled: true,
+          text: 'Delete',
+          style: 'destructive', // optional: shows in red on iOS
+          onPress: async () => {
+            try {
+              await softDeleteClient(ClientDetails?.id);
+              navigation.reset({
+                index: 0, // active screen
+                routes: [
+                  {
+                    name: 'HomeScreen',
+                    state: {
+                      routes: [{ name: routeName }], // nested screen
+                    },
+                  },
+                ],
+              });
+            } catch (err) {
+              console.log('Error soft deleting transaction:', err);
+            }
+          },
         },
-    ]
+      ],
+      { cancelable: true }
+    );
+  };
 
-    const calculateBalances = (transactions) => {
-        let balance = 0
-        const reversed = [...transactions].reverse()
+  const finalData = searchBalances(balancesData, searchTerm);
 
-        const withBalances = reversed.map((t) => {
-            const amount = parseFloat(t.amount) || 0
-            const subamount = parseFloat(t.subamount) || 0
-            balance += (subamount - amount)
-            return { ...t, balance }
-        })
 
-        return withBalances.reverse()
-    }
+  return (
+    <SafeAreaView style={Styles._mainContainer}>
+      <LinearGradient
+        style={[Styles._headerMain, { justifyContent: 'space-between' }]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+      >
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={() => navigation?.goBack()}
+          style={{
+            // height: '100%',
+            // width: '10%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 5,
+            // marginLeft
+          }}
+        >
+          <Ionicons
+            name={'chevron-back'}
+            color={COLORS.whiteColor}
+            size={60 / PixelRatio.get()}
+          />
+        </TouchableOpacity>
 
-    const balancesData = calculateBalances(Entries)
+        {ClientDetails?.phone && ClientDetails?.type != 2 && (
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => makeCall(ClientDetails?.phone)}
+            style={{
+              height: '100%',
+              width: '10%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              position: 'absolute',
+              left: '80%',
+            }}
+          >
+            <Ionicons
+              name={'call-outline'}
+              color={COLORS.whiteColor}
+              size={25}
+            />
+          </TouchableOpacity>
+        )}
+        {ClientDetails?.local_path && (
+          <View style={{ position: 'absolute', left: '11%' }}>
+            <Image
+              source={{ uri: ClientDetails?.local_path }}
+              style={[
+                Styles._icon,
+                {
+                  borderRadius: ClientDetails?.type == 2 ? 0 : 100,
+                  marginHorizontal: 0,
+                },
+              ]}
+              resizeMode="cover"
+            />
+          </View>
+        )}
 
-    // console.log(Entries)
+        <TouchableOpacity
+          style={[
+            Styles._dataMain,
+            {
+              width: '50%',
+              position: 'absolute',
+              left: !ClientDetails?.local_path ? '10%' : '25%',
+            },
+          ]}
+          activeOpacity={0.8}
+          onPress={() => navigation.navigate('Profile', { amount, type })}
+        >
+          <View style={Styles._nameMain}>
+            <Text numberOfLines={1} style={Styles._nameTxt}>
+              {ClientDetails?.type == 2
+                ? ClientDetails?.name
+                : ClientDetails?.name}
+            </Text>
+            {ClientDetails?.type != 2 && (
+              <View style={Styles._badge}>
+                <Text style={Styles._badgeText}>
+                  {ClientDetails.type == 0 ? 'Customer' : 'Supplier'}
+                </Text>
+              </View>
+            )}
+          </View>
+          <Text style={Styles._clickText}>Click here to view settings</Text>
+        </TouchableOpacity>
 
-    return (
-        <View style={Styles._mainContainer}>
-            <LinearGradient
-                style={Styles._headerMain}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 0 }}
-                colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+        <Menu style={{ height: '100%', width: '10%' }}>
+          <MenuTrigger
+            style={{
+              width: '100%',
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Ionicons
+              name={'ellipsis-vertical'}
+              color={COLORS.whiteColor}
+              size={25}
+            />
+          </MenuTrigger>
+
+          <MenuOptions>
+            <MenuOption
+              style={{
+                backgroundColor: COLORS.whiteColor,
+                height: 40,
+                justifyContent: 'center',
+              }}
+              onSelect={() => navigation.navigate('Profile', { amount, type })}
             >
-                <TouchableOpacity
-                    activeOpacity={0.8}
-                    onPress={() => navigation?.goBack()}
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 14,
+                }}
+              >
+                {ClientDetails?.type === 0
+                  ? 'Customer'
+                  : ClientDetails?.type === 1
+                    ? 'Supplier'
+                    : 'Bank'}{' '}
+                Profile
+              </Text>
+            </MenuOption>
+            {ClientDetails?.type != 2 && (
+              <MenuOption
+                style={{
+                  backgroundColor: COLORS.whiteColor,
+                  height: 40,
+                  justifyContent: 'center',
+                }}
+                onSelect={() => onToggleClientTypePress(ClientDetails)}
+              >
+                <Text
+                  style={{
+                    color: COLORS.blackColor,
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 14,
+                  }}
                 >
-                    <Ionicons
-                        name={"chevron-back"}
-                        color={COLORS.whiteColor}
-                        size={25}
-                    />
-                </TouchableOpacity>
+                  Switch to {ClientDetails?.type == 0 ? 'Supplier' : 'Customer'}
+                </Text>
+              </MenuOption>
+            )}
 
-                <View style={Styles._dataMain}>
-                    <View style={Styles._nameMain}>
-                        <Text style={Styles._nameTxt}>{ClientDetails?.name}</Text>
-                        <View style={Styles._badge}>
-                            <Text style={Styles._badgeText}>{ClientDetails.type == 0 ? "Customer" : "Supplier"}</Text>
-                        </View>
-                    </View>
-                    <Text style={Styles._clickText}>Click here to view settings</Text>
+            <MenuOption
+              style={{
+                backgroundColor: COLORS.whiteColor,
+                height: 40,
+                justifyContent: 'center',
+              }}
+              onSelect={() => navigation.navigate('Report', { homeDetails })}
+            >
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 14,
+                }}
+              >
+                Report
+              </Text>
+            </MenuOption>
+
+            <MenuOption
+              style={{
+                backgroundColor: COLORS.whiteColor,
+                height: 40,
+                justifyContent: 'center',
+              }}
+              onSelect={() => onDeleteClient()}
+            >
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 14,
+                }}
+              >
+                Delete{' '}
+                {ClientDetails?.type === 0
+                  ? 'Customer'
+                  : ClientDetails?.type === 1
+                    ? 'Supplier'
+                    : 'Bank Account'}
+              </Text>
+            </MenuOption>
+          </MenuOptions>
+        </Menu>
+      </LinearGradient>
+
+      {
+        !Entries?.length && (
+          <View style={Styles._privacyMain}>
+            <Ionicons name={'lock-closed'} color={'green'} size={20} />
+
+            <Text style={Styles._privacyText}>
+              Only you can see these entries
+            </Text>
+          </View>
+        )
+      }
+      {
+        !!Entries.length && (
+          <View style={Styles._contentMain}>
+            <LinearGradient
+              style={[Styles._headerMain, { height: 40 }]}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+            />
+            {ClientDetails?.type == 2 ? (
+              <View style={Styles._calculationMainBank}>
+                <View
+                  style={{
+                    width: '45%',
+                    height: '60%',
+                    justifyContent: 'center',
+                    borderRightColor: COLORS.blackColor,
+                    borderRightWidth: 0.7,
+                  }}
+                >
+                  <Text
+                    style={{
+                      color: COLORS.blackColor,
+                      fontFamily: FONT_MEDIUM,
+                      fontSize: 14,
+                    }}
+                  >
+                    Rs {addCommas(Math.abs(totalAmount))}
+                  </Text>
+                  <Text
+                    style={{
+                      color: COLORS.blackColor,
+                      opacity: 0.6,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 12,
+                    }}
+                  >
+                    Total in for {monthName}
+                  </Text>
                 </View>
 
-                <Ionicons
-                    name={"ellipsis-vertical"}
-                    color={COLORS.whiteColor}
-                    size={25}
+                <View
+                  style={{
+                    width: '40%',
+                    height: '60%',
+                    justifyContent: 'center',
+                    borderRightColor: COLORS.blackColor,
+                    borderRightWidth: 0.7,
+                    alignItems: 'center',
+                    marginRight: 0,
+                  }}
+                >
+                  <Text
+                    style={{
+                      color: COLORS.blackColor,
+                      fontFamily: FONT_MEDIUM,
+                      fontSize: 14,
+                    }}
+                  >
+                    Rs {addCommas(Math.abs(amountCurrentMonth))}
+                  </Text>
+                  <Text
+                    style={{
+                      color: COLORS.blackColor,
+                      opacity: 0.6,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 12,
+                    }}
+                  >
+                    Balance
+                  </Text>
+                </View>
+
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  style={{
+                    height: '100%',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: '15%',
+                  }}
+                  onPress={() => navigation.navigate('Report', { homeDetails })}
+                >
+                  <Ionicons
+                    name={'chevron-forward'}
+                    color={COLORS.primaryColor}
+                    size={20}
+                  />
+                </TouchableOpacity>
+              </View>
+            ) : (
+              <View style={Styles._calculationMain}>
+                <Text
+                  style={{
+                    color: type == "payable" ? COLORS.redColor : COLORS.greenColor,
+                    fontFamily: FONT_BOLD,
+                    fontSize: 14,
+                  }}
+                >
+                  Rs {addCommas(amount)}
+                </Text>
+                <Text
+                  style={{
+                    color: COLORS.blackColor,
+                    opacity: 0.6,
+                    fontFamily: FONT_MEDIUM,
+                    fontSize: 12,
+                  }}
+                >
+                  {type == 'receivable'
+                    ? "You will give"
+                    : type == 'payable'
+                      ? ClientDetails.type == 0
+                        ? "You will get"
+                        : 'Received'
+                      : 'Settled Up'}
+                </Text>
+              </View>
+            )}
+
+            {ClientDetails?.type !== 2 && (
+              <View style={Styles._optionsMain}>
+                <FlatList
+                  data={options.filter((item) => item.isVisible)}
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  scrollEnabled={false}
+                  keyExtractor={(item, index) => index.toString()}
+                  contentContainerStyle={{
+                    width: '100%',
+                    justifyContent: 'space-between',
+                    paddingHorizontal: '2.5%',
+                  }}
+                  renderItem={({ item, index }) => (
+                    <TouchableOpacity
+                      onPress={() => {
+                        !item?.disabled && item?.onPress();
+                      }}
+                      activeOpacity={0.8}
+                      style={[
+                        Styles._listItem,
+                        {
+                          width: ClientDetails?.type == 0 ? HP(9) : HP(13),
+                        },
+                      ]}
+                      key={index}
+                    >
+                      <Ionicons
+                        name={item.icon}
+                        size={25}
+                        color={item?.disabled ? COLORS.gray : COLORS.yellowColor}
+                      />
+                      <Text
+                        style={{
+                          color: COLORS.blackColor,
+                          fontSize: 11,
+                          fontFamily: FONT_MEDIUM,
+                          textAlign: 'center',
+                        }}
+                      >
+                        {item.name == 'Set Date' && ClientDetails?.paydate
+                          ? formatShortDate(ClientDetails?.paydate)
+                          : item?.name}
+                      </Text>
+                    </TouchableOpacity>
+                  )}
                 />
-            </LinearGradient>
+              </View>
+            )}
 
-            {
-                !Entries?.length &&
-                <View style={Styles._privacyMain}>
-                    <Ionicons
-                        name={"lock-closed"}
-                        color={"green"}
-                        size={20}
-                    />
-
-                    <Text style={Styles._privacyText}>Only you can see these entries</Text>
+            <View
+              style={[
+                Styles._entriesMain,
+                { marginTop: ClientDetails?.type == 2 ? 60 : 0 },
+              ]}
+            >
+              <SearchBar onChangeText={(text) => setSearchTerm(text)} />
+              <View style={Styles._tableHeader}>
+                <View style={[Styles._headerCell, { width: '50%' }]}>
+                  <Text style={Styles._headerCellText}>Entries</Text>
                 </View>
-            }
-            {
-                !!Entries.length &&
-                <View style={Styles._contentMain}>
-                    <LinearGradient
-                        style={[Styles._headerMain, { height: 40 }]}
-                        start={{ x: 0, y: 0 }}
-                        end={{ x: 1, y: 0 }}
-                        colors={[COLORS.primaryColor, COLORS.secondaryColor]}
-                    />
-                    <View style={Styles._calculationMain}>
-                        <Text style={{ color: type == "receivable" ? "green" : type == "payable" ? "red" : COLORS.blackColor, fontFamily: FONT_MEDIUM, fontSize: 14 }}>Rs {amount}</Text>
-                        <Text style={{ color: COLORS.blackColor, opacity: 0.6, fontFamily: FONT_NORMAL, fontSize: 12 }}>{type == "receivable" ? "You'll Give" : type == "payable" ? (ClientDetails.type == 0 ? "You'll Get" : "Received") : "Settled Up"}</Text>
+                {ClientDetails?.type == 1 || ClientDetails?.type == 2 ? (
+                  <>
+                    <View
+                      style={[Styles._headerCell, { alignItems: 'flex-end' }]}
+                    >
+                      <Text style={Styles._headerCellText}>
+                        {ClientDetails.type == 0
+                          ? 'You Got'
+                          : ClientDetails?.type == 1
+                            ? 'Purchase'
+                            : 'Out'}
+                      </Text>
                     </View>
 
-                    <View style={Styles._optionsMain}>
-                        <FlatList
-                            data={options}
-                            horizontal
-                            showsHorizontalScrollIndicator={false}
-                            scrollEnabled={false}
-                            keyExtractor={(item, index) => index.toString()}
-                            contentContainerStyle={{ justifyContent: "space-between", width: "100%" }}
-                            renderItem={({ item, index }) => (
-                                <TouchableOpacity activeOpacity={0.8} style={Styles._listItem} key={index}>
-                                    <Ionicons name={item.icon} size={25} color={COLORS.yellowColor} />
-                                    <Text style={{ color: COLORS.blackColor, fontSize: 11, fontFamily: FONT_NORMAL, textAlign: "center" }}>{item.name}</Text>
-                                </TouchableOpacity>
-                            )}
-                        />
+                    <View
+                      style={[Styles._headerCell, { alignItems: 'flex-end' }]}
+                    >
+                      <Text style={Styles._headerCellText}>
+                        {ClientDetails.type == 0
+                          ? 'You Gave'
+                          : ClientDetails?.type == 1
+                            ? 'Payment'
+                            : 'In'}
+                      </Text>
+                    </View>
+                  </>
+                ) : (
+                  <>
+                    <View
+                      style={[Styles._headerCell, { alignItems: 'flex-end' }]}
+                    >
+                      <Text style={Styles._headerCellText}>
+                        {ClientDetails.type == 0
+                          ? 'You Gave'
+                          : ClientDetails?.type == 1
+                            ? 'Payment'
+                            : 'In'}
+                      </Text>
                     </View>
 
-                    <View style={Styles._entriesMain}>
-                        <SearchBar />
-                        <View style={Styles._tableHeader}>
-                            <View style={[Styles._headerCell, { width: "50%" }]}>
-                                <Text style={Styles._headerCellText}>Entries</Text>
-                            </View>
-
-                            <View style={[Styles._headerCell, { alignItems: "flex-end" }]}>
-                                <Text style={Styles._headerCellText}>{ClientDetails.type == 0 ? "You Gave" : "Payment"}</Text>
-                            </View>
-
-                            <View style={[Styles._headerCell, { alignItems: "flex-end" }]}>
-                                <Text style={Styles._headerCellText}>{ClientDetails.type == 0 ? "You Got" : "Purchase"}</Text>
-                            </View>
-                        </View>
-
-                        <FlatList
-                            data={balancesData}
-                            keyExtractor={(item, index) => index.toString()}
-                            scrollEnabled
-                            contentContainerStyle={{ paddingBottom: 150 }}
-                            renderItem={({ item, index }) => (
-                                <Transaction
-                                    balance={item.balance}
-                                    isAttachment={item?.attachments?.length ? true : false}
-                                    notes={item?.notes}
-                                    date={formatDateTime(item?.date)}
-                                    firstCell={item?.amount}
-                                    secondCell={item?.subamount}
-                                    onPress={() => navigation.navigate("TransactionDetails", { item })}
-                                />
-                            )}
-                        />
+                    <View
+                      style={[Styles._headerCell, { alignItems: 'flex-end' }]}
+                    >
+                      <Text style={Styles._headerCellText}>
+                        {ClientDetails.type == 0
+                          ? 'You Got'
+                          : ClientDetails?.type == 1
+                            ? 'Purchase'
+                            : 'Out'}
+                      </Text>
                     </View>
+                  </>
+                )}
+              </View>
+
+              <FlatList
+                data={searchBalances(balancesData, searchTerm)}
+                keyExtractor={(item, index) => index.toString()}
+                scrollEnabled
+                contentContainerStyle={{ paddingBottom: 150 }}
+                renderItem={({ item, index }) => (
+                  <Transaction
+                    item={item}
+                    balance={item.balance}
+                    isAttachment={
+                      item?.attachments?.length || item?.local_path ? true : false
+                    }
+                    notes={item?.notes}
+                    date={formatDateTimeShort(item?.date)}
+                    firstCell={item?.amount}
+                    secondCell={item?.subamount}
+                    onPress={() =>
+                      navigation.navigate('TransactionDetails', {
+                        item,
+                        onGoBack: (homeDetails) => {
+                          sethomeDetails(homeDetails);
+                        },
+                      })
+                    }
+                    swap={
+                      ClientDetails?.type == 1 || ClientDetails?.type == 2
+                        ? true
+                        : false
+                    }
+                  />
+                )}
+              />
+            </View>
+          </View>
+        )
+      }
+
+      <BottomView style={{ paddingHorizontal: '2.5%', width: '100%' }}>
+        {ClientDetails?.type != 1 ? (
+          <>
+            <TouchableOpacity
+              style={Styles._btn}
+              activeOpacity={0.8}
+              onPress={() => {
+                navigation.navigate('Entry', {
+                  type: 'red',
+                  amount,
+                  pay_type: homeDetails?.pay_type,
+                  onGoBack: (homeDetails) => {
+                    sethomeDetails(homeDetails);
+                  },
+                });
+              }}
+            >
+              <LinearGradient
+                colors={[COLORS.redColor, COLORS.gradient_red]}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                  gap: 5,
+                }}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+              >
+                {ClientDetails?.type == 2 && (
+                  <Ionicons color={COLORS.whiteColor} name={'add-circle'} size={25} />
+                )}
+                <Text style={Styles._btnTitle}>
+                  {ClientDetails.type == 0
+                    ? 'YOU GAVE'
+                    : ClientDetails?.type == 1
+                      ? 'PAYMENT'
+                      : 'IN'}{' '}
+                  {ClientDetails?.type !== 2 && 'Rs'}
+                </Text>
+              </LinearGradient>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={Styles._btn}
+              activeOpacity={0.8}
+              onPress={() => {
+                navigation.navigate('Entry', {
+                  type: 'green',
+                  onGoBack: (homeDetails) => {
+                    sethomeDetails(homeDetails);
+                  },
+                });
+              }}
+            >
+              <LinearGradient
+                colors={[COLORS.greenColor, COLORS.gradient_green]}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                  gap: 5,
+                }}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+              >
+                {ClientDetails?.type == 2 && (
+                  <Ionicons
+                    color={COLORS.whiteColor}
+                    name={'remove-circle'}
+                    size={25}
+                  />
+                )}
+                <Text style={Styles._btnTitle}>
+                  {ClientDetails.type == 0
+                    ? 'YOU GOT'
+                    : ClientDetails?.type == 1
+                      ? 'PURCHASE'
+                      : 'OUT'}{' '}
+                  {ClientDetails?.type !== 2 && 'Rs'}
+                </Text>
+              </LinearGradient>
+            </TouchableOpacity>
+          </>
+        ) : (
+          <>
+            <TouchableOpacity
+              style={Styles._btn}
+              activeOpacity={0.8}
+              onPress={() => {
+                navigation.navigate('Entry', {
+                  type: 'green',
+                  onGoBack: (homeDetails) => {
+                    sethomeDetails(homeDetails);
+                  },
+                });
+              }}
+            >
+              <LinearGradient
+                colors={[COLORS.greenColor, COLORS.greenColor]}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                  gap: 5,
+                }}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+              >
+                {ClientDetails?.type == 2 && (
+                  <Ionicons
+                    color={COLORS.whiteColor}
+                    name={'remove'}
+                    size={20}
+                  />
+                )}
+                <Text style={Styles._btnTitle}>
+                  {ClientDetails.type == 0
+                    ? 'YOU GOT'
+                    : ClientDetails?.type == 1
+                      ? 'PURCHASE'
+                      : 'OUT'}{' '}
+                  {ClientDetails?.type !== 2 && 'Rs'}
+                </Text>
+              </LinearGradient>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={Styles._btn}
+              activeOpacity={0.8}
+              onPress={() => {
+                navigation.navigate('Entry', {
+                  type: 'red',
+                  amount,
+                  pay_type: 'payable',
+                  onGoBack: (homeDetails) => {
+                    sethomeDetails(homeDetails);
+                  },
+                });
+              }}
+            >
+              <LinearGradient
+                colors={[COLORS.redColor, COLORS.redColor]}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                  gap: 5,
+                }}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+              >
+                {ClientDetails?.type == 2 && (
+                  <Ionicons color={COLORS.whiteColor} name={'add'} size={20} />
+                )}
+                <Text style={Styles._btnTitle}>
+                  {ClientDetails.type == 0
+                    ? 'YOU GAVE'
+                    : ClientDetails?.type == 1
+                      ? 'PAYMENT'
+                      : 'IN'}{' '}
+                  {ClientDetails?.type !== 2 && 'Rs'}
+                </Text>
+              </LinearGradient>
+            </TouchableOpacity>
+          </>
+        )}
+      </BottomView>
+
+      <Modal
+        isVisible={DateModal}
+        style={Styles._modal}
+        onBackButtonPress={() => setDateModal(false)}
+        onBackdropPress={() => setDateModal(false)}
+      >
+        <View style={Styles._modalMain}>
+          <View
+            style={{
+              gap: 10,
+              borderBottomColor: COLORS.gray,
+              borderBottomWidth: 1,
+              paddingBottom: 10,
+              marginBottom: 25,
+            }}
+          >
+            <Text
+              style={{
+                fontFamily: FONT_MEDIUM,
+                fontSize: 13,
+                color: COLORS.blackColor,
+              }}
+            >
+              Set Date for {ClientDetails?.name}
+            </Text>
+
+            <Text
+              style={{
+                fontFamily: FONT_NORMAL,
+                fontSize: 13,
+                color: COLORS.blackColor,
+              }}
+            >
+              DigiKhata will remind customer on selected Date.
+            </Text>
+          </View>
+          {dateOptions?.map((item, index) => (
+            <TouchableOpacity
+              key={index}
+              activeOpacity={0.8}
+              style={Styles._dateOption}
+              onPress={() => {
+                if (item?.id == 3) {
+                  showDate(item);
+                } else {
+                  let date = new Date(item?.rawDate);
+                  let time = new Date(item?.rawDate);
+                  let formatted = mergeDateTime({ date, time });
+
+                  onSelectDate(formatted, ClientDetails?.id, item?.id);
+                }
+              }}
+            >
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
+              >
+                <Ionicons
+                  name={
+                    SelectedDateOption == item?.id
+                      ? 'radio-button-on'
+                      : 'radio-button-off'
+                  }
+                  color={
+                    SelectedDateOption == item?.id
+                      ? COLORS.primaryColor
+                      : COLORS.blackColor
+                  }
+                  size={22}
+                />
+
+                <Text>{item?.name}</Text>
+              </View>
+              {item?.date && (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                  }}
+                >
+                  <Ionicons
+                    name={'calendar-outline'}
+                    color={COLORS.darkGrey}
+                    size={18}
+                  />
+
+                  <Text
+                    style={{
+                      color: COLORS.darkGrey,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 11,
+                    }}
+                  >
+                    {item?.date}
+                  </Text>
                 </View>
-            }
+              )}
+            </TouchableOpacity>
+          ))}
+        </View>
+      </Modal>
 
-            <View style={Styles._btnsMain}>
-                <TouchableOpacity
-                    style={Styles._btn}
-                    activeOpacity={0.8}
-                    onPress={() => navigation.navigate("Entry", { type: "red" })}
+      <Modal
+        isVisible={ReminderModal}
+        style={Styles._modal}
+        onBackButtonPress={() => setReminderModal(false)}
+        onBackdropPress={() => setReminderModal(false)}
+      >
+        <View style={Styles._modalMain}>
+          <Text
+            style={{
+              fontFamily: FONT_MEDIUM,
+              fontSize: 14,
+              color: COLORS.blackColor,
+              marginBottom: 40,
+            }}
+          >
+            Send Reminder to {ClientDetails?.name}
+          </Text>
+
+          <ViewShot
+            ref={ref}
+            options={{
+              fileName: 'Your-File-Name',
+              format: 'jpg',
+              quality: 0.9,
+            }}
+            style={{ backgroundColor: COLORS.whiteColor, paddingVertical: 20 }}
+          >
+            <View
+              style={{ alignSelf: 'center', alignItems: 'center', gap: 40 }}
+            >
+              <View
+                style={{ alignSelf: 'center', alignItems: 'center', gap: 2 }}
+              >
+                <Text
+                  style={{
+                    fontFamily: FONT_MEDIUM,
+                    fontSize: 15,
+                    color: COLORS.blackColor,
+                  }}
                 >
-                    <LinearGradient
-                        colors={["darkred", "red"]}
-                        style={{ width: "100%", height: "100%", justifyContent: "center", alignItems: "center" }}
-                        start={{ x: 0, y: 0 }}
-                        end={{ x: 1, y: 0 }}
-                    >
-                        <Text style={Styles._btnTitle}>{ClientDetails.type == 0 ? "YOU GAVE" : "PAYMENT"} Rs</Text>
-                    </LinearGradient>
-                </TouchableOpacity>
+                  Payment Reminder for
+                </Text>
+                <Text
+                  style={{
+                    fontFamily: FONT_MEDIUM,
+                    fontSize: 15,
+                    color: 'red',
+                  }}
+                >
+                  Rs {amount}
+                </Text>
+                <Text
+                  style={{
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 10,
+                    color: COLORS.blackColor,
+                    opacity: 0.8,
+                  }}
+                >
+                  {new Date().toDateString()}
+                </Text>
+              </View>
 
-                <TouchableOpacity
-                    style={Styles._btn}
-                    activeOpacity={0.8}
-                    onPress={() => navigation.navigate("Entry", { type: "green" })}
+              <View
+                style={{ alignSelf: 'center', alignItems: 'center', gap: 2 }}
+              >
+                <Text
+                  style={{
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 12,
+                    color: COLORS.blackColor,
+                    opacity: 0.8,
+                  }}
                 >
-                    <LinearGradient
-                        colors={["darkgreen", "green"]}
-                        style={{ width: "100%", height: "100%", justifyContent: "center", alignItems: "center" }}
-                        start={{ x: 0, y: 0 }}
-                        end={{ x: 1, y: 0 }}
-                    >
-                        <Text style={Styles._btnTitle}>{ClientDetails.type == 0 ? "YOU GOT" : "PURCHASE"} Rs</Text>
-                    </LinearGradient>
-                </TouchableOpacity>
+                  Sent by Saud Rehan
+                </Text>
+                <Text
+                  style={{
+                    fontFamily: FONT_NORMAL,
+                    fontSize: 10,
+                    color: COLORS.blackColor,
+                    opacity: 0.6,
+                  }}
+                >
+                  +92123456789
+                </Text>
+              </View>
             </View>
+          </ViewShot>
+
+          <TouchableOpacity
+            style={{
+              width: '100%',
+              height: 45,
+              backgroundColor: COLORS.primaryColor,
+              alignSelf: 'center',
+              marginTop: 40,
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderRadius: 50,
+            }}
+            activeOpacity={0.8}
+            onPress={onCapture}
+          >
+            <Text
+              style={{
+                color: COLORS.whiteColor,
+                fontFamily: FONT_MEDIUM,
+                fontSize: 13,
+              }}
+            >
+              SEND REMINDER
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+
+      <Modal
+        isVisible={NumberModal}
+        onBackButtonPress={() => setNumberModal(false)}
+        onBackdropPress={() => setNumberModal(false)}
+      >
+        <View
+          style={{
+            width: WP(90),
+            // height: HP(30),
+            backgroundColor: COLORS.whiteColor,
+            borderRadius: 15,
+            paddingHorizontal: 20,
+            paddingVertical: 15,
+            gap: 25,
+          }}
+        >
+          <Text
+            style={{
+              color: COLORS.blackColor,
+              fontFamily: FONT_MEDIUM,
+              fontSize: 16,
+            }}
+          >
+            Enter Mobile Number
+          </Text>
+
+          <CountryPhoneInput
+            contentContainerStyle={{ width: '100%' }}
+            onChange={(text) => {
+              setPhoneNum(text?.fullNumber);
+            }}
+          />
+
+          <View
+            style={{
+              width: '100%',
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+              flexDirection: 'row',
+              gap: 10,
+            }}
+          >
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._numberBtn}
+              onPress={() => {
+                setPhoneNum('');
+                setNumberModal(false);
+              }}
+            >
+              <Text style={Styles._numberTxt}>Cancel</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._numberBtn}
+              onPress={onNumSave}
+            >
+              <Text style={Styles._numberTxt}>Save</Text>
+            </TouchableOpacity>
+          </View>
         </View>
-    )
+      </Modal>
+    </SafeAreaView >
+  );
 }
 
 const Styles = StyleSheet.create({
-    _mainContainer: {
-        flex: 1,
-        backgroundColor: COLORS.backgroundColor,
-    },
-    _headerMain: {
-        width: WP(100),
-        height: 60,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between"
-    },
-    _dataMain: {
-        width: "80%",
-        height: "100%",
-        // backgroundColor: "red",
-        justifyContent: "center"
-    },
-    _nameMain: {
-        width: "100%",
-        height: "50%",
-        // backgroundColor: "pink",
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 10
-    },
-    _badge: {
-        // height:10,
-        backgroundColor: COLORS.whiteColor,
-        paddingVertical: 2,
-        paddingHorizontal: 5,
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: 50
-    },
-    _badgeText: {
-        fontFamily: FONT_NORMAL,
-        fontSize: 10,
-        color: COLORS.primaryColor
-    },
-    _nameTxt: {
-        color: COLORS.whiteColor,
-        fontFamily: FONT_MEDIUM,
-        fontSize: 15
-    },
-    _clickText: {
-        color: COLORS.whiteColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 13
-    },
-    _btnsMain: {
-        width: WP(100),
-        height: 60,
-        backgroundColor: COLORS.whiteColor,
-        position: "absolute",
-        bottom: 0,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: 25
-    },
-    _btn: {
-        width: "47%",
-        height: "75%",
-        overflow: "hidden",
-        borderRadius: 100,
-    },
-    _btnTitle: {
-        color: COLORS.whiteColor,
-        fontFamily: FONT_MEDIUM,
-        fontSize: 14
-    },
-    _privacyMain: {
-        // width: "70%",
-        // height: 40,
-        backgroundColor: COLORS.whiteColor,
-        alignSelf: "center",
-        marginTop: 15,
-        borderRadius: 10,
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 10,
-        paddingVertical: 10,
-        gap: 10
-    },
-    _privacyText: {
-        color: COLORS.blackColor,
-        opacity: 0.6,
-        fontFamily: FONT_NORMAL,
-        fontSize: 13
-    },
-    _contentMain: {
-        flex: 1,
-        width: "100%",
-        // height: "85%",
-        // backgroundColor: "red",
-        alignItems: "center"
-    },
-    _calculationMain: {
-        width: "95%",
-        height: 80,
-        backgroundColor: COLORS.whiteColor,
-        position: "absolute",
-        top: 10,
-        borderRadius: 12,
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.2,
-        shadowRadius: 3.84,
-        elevation: 5,
-        justifyContent: "center",
-        paddingLeft: 20,
-        gap: 2,
-    },
-    _optionsMain: {
-        width: "95%",
-        // height: 80,
-        // backgroundColor: "red",
-        marginTop: 60,
-    },
-    _listItem: {
-        width: HP(9),
-        height: 65,
-        backgroundColor: COLORS.whiteColor,
-        justifyContent: "center",
-        alignItems: "center",
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.2,
-        shadowRadius: 3.84,
-        elevation: 5,
-        margin: 5,
-        borderRadius: 12,
-        gap: 5,
-    },
-    _entriesMain: {
-        flex: 1,
-        width: "100%",
-        // height: 40,
-        backgroundColor: COLORS.whiteColor,
-        paddingHorizontal: 10,
-        marginTop: 10,
-        paddingTop: 10,
-    },
-    _tableHeader: {
-        width: "100%",
-        height: 30,
-        // backgroundColor: "red",
-        flexDirection: "row",
-        marginTop: 10,
-        borderBottomColor: COLORS.darkGrey,
-        borderBottomWidth: 0.7,
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  _dataMain: {
+    width: '80%',
+    height: '100%',
+    // backgroundColor: "red",
+    justifyContent: 'center',
+  },
+  _nameMain: {
+    width: '100%',
+    height: '50%',
+    // backgroundColor: "pink",
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  _badge: {
+    // height:10,
+    backgroundColor: COLORS.whiteColor,
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 50,
+  },
+  _badgeText: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 10,
+    color: COLORS.primaryColor,
+  },
+  _nameTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 19,
+  },
+  _clickText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _btnsMain: {
+    width: WP(100),
+    height: 60,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 25,
+  },
+  _btn: {
+    width: '49%',
+    height: 50,
+    overflow: 'hidden',
+    borderRadius: 100,
+  },
+  _btnTitle: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  _privacyMain: {
+    // width: "70%",
+    // height: 40,
+    backgroundColor: COLORS.whiteColor,
+    alignSelf: 'center',
+    marginTop: 15,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    gap: 10,
+  },
+  _privacyText: {
+    color: COLORS.blackColor,
+    opacity: 0.6,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _contentMain: {
+    flex: 1,
+    width: '100%',
+    // height: "85%",
+    // backgroundColor: "red",
+    alignItems: 'center',
+  },
+  _calculationMain: {
+    width: '95%',
+    height: 80,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 10,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    _headerCell: {
-        width: "25%",
-        height: "100%",
-        // backgroundColor: "pink",
-        justifyContent: "center",
-        paddingLeft: 5,
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    justifyContent: 'center',
+    paddingLeft: 20,
+    gap: 2,
+  },
+  _optionsMain: {
+    width: '100%',
+    // height: 80,
+    // backgroundColor: "red",
+    marginTop: 60,
+    marginBottom: 10,
+  },
+  _listItem: {
+    width: HP(9),
+    // height: 65,
+    backgroundColor: COLORS.whiteColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    _headerCellText: {
-        color: COLORS.blackColor,
-        opacity: 0.5,
-        fontFamily: FONT_MEDIUM,
-        fontSize: 12
+    shadowOpacity: 0.2,
+    shadowRadius: TEXT_SIZES.BORDER_RADIUS,
+    elevation: 5,
+    marginVertical: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    gap: 5,
+    paddingVertical: 5,
+    // marginHorizontal:3
+  },
+  _entriesMain: {
+    flex: 1,
+    width: '100%',
+    // height: 40,
+    backgroundColor: COLORS.whiteColor,
+    // paddingHorizontal: 10,
+    marginTop: 10,
+    paddingTop: 10,
+    paddingHorizontal: '2.5%',
+  },
+  _tableHeader: {
+    width: '100%',
+    height: 30,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    marginTop: 10,
+    borderBottomColor: COLORS.gray,
+    borderBottomWidth: 0.5,
+  },
+  _headerCell: {
+    width: '25%',
+    height: '100%',
+    // backgroundColor: "pink",
+    justifyContent: 'center',
+    paddingLeft: 5,
+  },
+  _headerCellText: {
+    color: COLORS.blackColor,
+    opacity: 0.5,
+    fontFamily: FONT_BOLD,
+    fontSize: TEXT_SIZES.TABLE_LABELS,
+  },
+  _icon: {
+    width: 40,
+    height: 40,
+    marginHorizontal: 15,
+  },
+  _calculationMainBank: {
+    width: '95%',
+    height: 65,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 10,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-})
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    // justifyContent: "center",
+    paddingLeft: 20,
+    gap: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  _modalMain: {
+    width: WP(100),
+    // height: HP(30),
+    backgroundColor: COLORS.whiteColor,
+    alignSelf: 'center',
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+  },
+  _modal: {
+    padding: 0,
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  _dateOption: {
+    width: '100%',
+    height: 40,
+    // backgroundColor: "red",
+    marginVertical: 5,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _numberBtn: {
+    width: 70,
+    height: 40,
+    // backgroundColor:"red",
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _numberTxt: {
+    color: COLORS.primaryColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+  },
+});