digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/CreateBill.js

@@ -0,0 +1,2504 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  SafeAreaView,
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+  ScrollView,
+  TextInput,
+  Alert,
+  ActivityIndicator,
+  Keyboard,
+} 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,
+  formatPhoneNumber,
+  formatShortDate,
+  fromJsDateToSql,
+  getAvatar,
+  HP,
+  ICON_SIZES,
+  Input_Field_SIZES,
+  isPdfFile,
+  mergeDateTime,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import LottieView from 'lottie-react-native';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  addClient,
+  addTransaction,
+  addTransactionImages,
+  changeClientType,
+  getClientDetails,
+  getClientsByType,
+  getClientTransactions,
+  insertPhoneNum,
+  setClientAddress,
+  setClientCnic,
+  setClientName,
+  setClientPhone,
+  setPayDate,
+  setProfilePic,
+  softDeleteClient,
+  softDeleteTransaction,
+  switchClientToSupplier,
+  updateBankProfile,
+  updateClientCreditLimit,
+  updateClientInstallmentDetails,
+} from '../database/clients';
+import {
+  BottomView,
+  CountryPhoneInput,
+  FloatingInput,
+  Header,
+  PickerModal,
+  SearchBar,
+  Transaction,
+  User,
+} 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 PartyModal from '../components/PartyModal';
+import Sound, {
+  AudioEncoderAndroidType,
+  AudioSourceAndroidType,
+  AVEncoderAudioQualityIOSType,
+  AVEncodingOption,
+  RecordBackType,
+  PlayBackType,
+  createSound,
+} from 'react-native-nitro-sound';
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import { pick } from '@react-native-documents/picker';
+import { addCashEntry, addCashImages } from '../database/cash';
+import Contacts from 'react-native-contacts';
+import {
+  addInvoiceImages,
+  createBill,
+  deleteInvoiceImagesByInvoiceId,
+  getInvoiceEntries,
+  updateBill,
+} from '../database/bill';
+import { addItemDetails, updateItemQty } from '../database/stock';
+
+export default function Profile({ navigation, route }) {
+  const dispatch = useDispatch();
+  const animationRef = useRef(null);
+
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const invoiceId = route?.params?.invoiceId || null;
+  const clients = useSelector((state) => state.client.home_customers);
+  const suppliers = useSelector((state) => state.client.home_suppliers);
+
+  const [date, setDate] = useState(new Date());
+  const [IsPicker, setIsPicker] = useState(false);
+  const [Amount, setAmount] = useState('');
+  const [Discount, setDiscount] = useState('');
+  const [Tax, setTax] = useState('');
+  const [IsSoundModal, setIsSoundModal] = useState(false);
+  const [RecordingTime, setRecordingTime] = useState('');
+  const [IsPlaying, setIsPlaying] = useState(false);
+  const [AudioFile, setAudioFile] = useState('');
+  const [PlayLoading, setPlayLoading] = useState(false);
+  const [Details, setDetails] = useState('');
+  const [attachments, setAttachments] = useState([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [PaymentMode, setPaymentMode] = useState(null);
+  const [BalanceDue, setBalanceDue] = useState(0);
+  const [ReceivedAmount, setReceivedAmount] = useState(0);
+  const [CalculatedAmount, setCalculatedAmount] = useState('');
+  const [BillId, setBillId] = useState(0);
+  const [SuccessModal, setSuccessModal] = useState(false);
+  const [ChangeModal, setChangeModal] = useState(false);
+  const [SelectedParty, setSelectedParty] = useState(null);
+  const [Clients, setClients] = useState([]);
+  const [ShowNewBtn, setShowNewBtn] = useState(false);
+  const [contacts, setContacts] = useState([]);
+  const [Name, setName] = useState('');
+  const [clientPhoneSet, setClientPhoneSet] = useState(new Set());
+  const [clientPhoneMap, setClientPhoneMap] = useState(new Map());
+  const [searchText, setSearchText] = useState('');
+  const [PhoneNum, setPhoneNum] = useState('');
+  const [keyboardPadding, setKeyboardPadding] = useState(0);
+  const [SelectedItems, setSelectedItems] = useState([]);
+  const [totalAmount, setTotalAmount] = useState(0);
+
+  // Demo customer list
+  const [customerList, setCustomerList] = useState([
+    {
+      id: '1',
+      name: 'Ali Traders',
+      time: 'Today, 2:30 PM',
+      amount: '₨ 12,000',
+    },
+    {
+      id: '2',
+      name: 'Babar Store',
+      time: 'Yesterday, 6:00 PM',
+      amount: '₨ 8,450',
+    },
+    { id: '3', name: 'Saleem Sons', time: '2 days ago', amount: '₨ 3,200' },
+  ]);
+
+  const onChangeDate = (event, selectedDate) => {
+    const currentDate = selectedDate;
+    setDate(currentDate);
+  };
+
+  const showDate = () => {
+    DateTimePickerAndroid.open({
+      value: date || new Date(),
+      onChange: onChangeDate,
+      mode: 'date',
+      is24Hour: false,
+    });
+  };
+
+  const togglePicker = () => {
+    setIsPicker(!IsPicker);
+  };
+
+  useEffect(() => {
+    dispatch({
+      type: STATUS_BAR_COLOR,
+      color: COLORS.redColor,
+    });
+  }, []);
+
+  const askAudioPermission = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+          {
+            title: 'Audio Recording Permission',
+            message:
+              'DigiKhata needs access to your microphone to record audio.',
+            buttonNeutral: 'Ask Me Later',
+            buttonNegative: 'Cancel',
+            buttonPositive: 'OK',
+          }
+        );
+
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          console.log('Recording permission granted');
+          onStartRecord();
+        } else {
+          console.log('Recording permission denied');
+          return;
+        }
+      } catch (err) {
+        console.warn(err);
+        return;
+      }
+    } else {
+      onStartRecord();
+    }
+  };
+
+  const onStartRecord = async () => {
+    setIsSoundModal(true);
+    Sound.addRecordBackListener((e) => {
+      console.log('Recording progress:', e.currentPosition, e.currentMetering);
+      console.log(e.currentPosition);
+      console.log(Sound.mmssss(Math.floor(e.currentPosition)));
+      setRecordingTime(Sound.mmssss(Math.floor(e.currentPosition)));
+    });
+
+    const result = await Sound.startRecorder();
+    console.log('Recording started:', result);
+  };
+
+  const onStopRecord = async (flag) => {
+    try {
+      const result = await Sound.stopRecorder();
+      Sound.removeRecordBackListener();
+      console.log('Recording stopped:', result);
+
+      setAudioFile(flag ? '' : result);
+
+      setTimeout(() => {
+        setIsSoundModal(false);
+      }, 350);
+    } catch (err) {
+      console.error('Error stopping recorder:', err);
+    }
+  };
+
+  const onStartPlay = async (fileUrl) => {
+    setPlayLoading(true);
+    // Set up playback progress listener
+    Sound.addPlayBackListener((e) => {
+      console.log('Playback progress:', e.currentPosition, e.duration);
+      setIsPlaying(true);
+      animationRef.current?.play();
+      // setCurrentPosition(e.currentPosition);
+      // setTotalDuration(e.duration);
+      // setPlayTime(Sound.mmssss(Math.floor(e.currentPosition)));
+      // setDuration(Sound.mmssss(Math.floor(e.duration)));
+    });
+
+    // Set up playback end listener
+    Sound.addPlaybackEndListener((e) => {
+      console.log('Playback completed:', e);
+      // Handle playback completion
+      setIsPlaying(false);
+      animationRef.current?.pause();
+      // setCurrentPosition(0);
+    });
+
+    const result = await Sound.startPlayer(fileUrl);
+    setPlayLoading(false);
+    console.log('Playback started:', result);
+  };
+
+  const onPauseRecord = async () => {
+    Sound.stopPlayer();
+    Sound.removePlayBackListener();
+    Sound.removePlaybackEndListener();
+  };
+
+  const handleDeleteAudio = () => {
+    Alert.alert(
+      'Delete Recording',
+      'Do you want to delete?',
+      [
+        {
+          text: 'No',
+          style: 'cancel',
+        },
+        {
+          text: 'Yes',
+          onPress: async () => {
+            try {
+              await onPauseRecord();
+              setAudioFile('');
+              setIsPlaying(false);
+            } catch (err) {
+              console.error('Error stopping audio before clearing:', err);
+            }
+          },
+          style: 'destructive',
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  const addAttachment = (file) => {
+    if (attachments.length >= 3) {
+      alert('You can only attach up to 3 files.');
+      return;
+    }
+    setAttachments([...attachments, file]);
+  };
+
+  const handleGallery = async () => {
+    try {
+      const result = await launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets.length > 0) {
+        addAttachment({
+          type: 'image',
+          uri: result.assets[0].uri,
+          name: result.assets[0].fileName || 'gallery_image.jpg',
+        });
+      }
+    } catch (err) {
+      console.log('Gallery Error:', err);
+    }
+    setIsModalVisible(false);
+  };
+
+  const handleCamera = async () => {
+    try {
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.CAMERA,
+        {
+          title: 'Camera Permission',
+          message: 'This app needs camera access to take photos',
+          buttonNeutral: 'Ask Me Later',
+          buttonNegative: 'Cancel',
+          buttonPositive: 'OK',
+        }
+      );
+
+      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+        const result = await launchCamera({ mediaType: 'photo' });
+        if (result.assets && result.assets.length > 0) {
+          addAttachment({
+            type: 'image',
+            uri: result.assets[0].uri,
+            name: result.assets[0].fileName || 'camera_image.jpg',
+          });
+        }
+      } else {
+        alert('Camera permission denied');
+      }
+    } catch (err) {
+      console.log('Camera Error:', err);
+    }
+    setIsModalVisible(false);
+  };
+
+  const handlePDF = async () => {
+    try {
+      const res = await pick({ type: ['application/pdf'] });
+      if (res && res.length > 0) {
+        addAttachment({
+          type: 'pdf',
+          uri: res[0].uri,
+          name: res[0].name || 'document.pdf',
+        });
+      }
+    } catch (err) {
+      if (err.message !== 'DOCUMENT_PICKER_CANCELED') {
+        console.log('PDF Error:', err);
+      }
+    }
+    setIsModalVisible(false);
+  };
+
+  const removeAttachment = (index) => {
+    setAttachments(attachments.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    const amount = parseFloat(Amount) || 0;
+    const discount = parseFloat(Discount) || 0;
+    const tax = parseFloat(Tax) || 0;
+
+    // Calculate discount as a percentage
+    const discountedAmount = (amount * discount) / 100;
+
+    // Tax is a fixed value
+    const finalAmount = amount - discountedAmount + tax;
+
+    setCalculatedAmount(finalAmount.toFixed(2));
+  }, [Amount, Discount, Tax]);
+
+  const onCreateBill = async () => {
+    try {
+      const finalValue = Number(CalculatedAmount);
+
+      // ✅ Validate value (ignore CalculatorErr)
+      if (
+        !finalValue || // empty, null, undefined, 0
+        !isFinite(finalValue) || // NaN, Infinity
+        finalValue <= 0 || // must be positive
+        finalValue > 999999999 // too large
+      ) {
+        console.log('❌ Invalid or non-positive result, not saving');
+        return;
+      }
+
+      const invoices =
+        (await getInvoiceEntries(null, null, selectBusiness?.id)) || [];
+      const test_id = invoices.length + 1;
+
+      // ✅ Prepare debit/credit
+      const bill = Number(BillId || test_id);
+      const bId = Number(selectBusiness?.id);
+      const entryDate = fromJsDateToSql(date);
+      const amount = Number(Amount);
+      const subamount = Number(CalculatedAmount);
+      const note = Details;
+      const local_path = AudioFile;
+      const tax = Number(Tax);
+      const discount = Number(Discount);
+      const payment_mode = Number(PaymentMode);
+      const advance = Number(ReceivedAmount);
+      const customerId = SelectedParty ? Number(SelectedParty?.id) : null;
+
+      console.log({
+        bill,
+        bId,
+        entryDate,
+        amount,
+        subamount,
+        note,
+        local_path,
+        tax,
+        discount,
+        payment_mode,
+        advance,
+      });
+
+      // ✅ Save main transaction
+      const res = await createBill(
+        bill,
+        bId,
+        entryDate,
+        amount,
+        subamount,
+        note,
+        local_path,
+        tax,
+        discount,
+        payment_mode,
+        advance,
+        customerId,
+        SelectedItems?.length > 0 ? JSON.stringify(SelectedItems) : ''
+      );
+
+      console.log(res, '✅ Bill Add Success');
+      const invoiceId = res.insertId;
+
+      // ✅ Save attachments (if any)
+      if (attachments && attachments.length > 0) {
+        for (const file of attachments) {
+          try {
+            await addInvoiceImages(invoiceId, file.uri);
+            console.log(`📎 Bill Attachment added: ${file.name}`);
+          } catch (err) {
+            console.log('⚠️ Bill Attachment insert error:', err);
+          }
+        }
+      }
+
+      const trxId = res.insertId;
+
+      SelectedParty && (await addPartyTransaction(CalculatedAmount, trxId));
+
+      if (SelectedItems) {
+        const parsedItems = SelectedItems;
+
+        await Promise.all(
+          parsedItems.map(async (i) => {
+            await addStockEntry(
+              i?.id, // itemId
+              i?.addedQty, // stockOUT
+              Number(i?.addedQty) * Number(i?.addedRate), // amount
+              Number(i?.addedRate), // rateSale
+              trxId, // billNo
+              i?.qty, // oldQuantity
+              i?.addedQty, // addedQuantity
+              Details, // Details
+              AudioFile, // AudioFile
+              fromJsDateToSql(date), // date
+              selectBusiness // selectBusiness
+            );
+          })
+        );
+      }
+
+      // ✅ Add party transaction (if any)
+      // if (SelectedParty) {
+      //   await addPartyTransaction(finalValue, trxId);
+      // }
+
+      // ✅ Reset UI state
+      setAmount('');
+      setDiscount('');
+      setTax('');
+      setDetails('');
+      setAudioFile('');
+      setAttachments([]);
+      setPaymentMode(null);
+      setBalanceDue(0);
+      setReceivedAmount(0);
+      setCalculatedAmount('');
+      setBillId(0);
+      setDate(new Date());
+
+      // ✅ Show success modal and navigate back
+      setSuccessModal(true);
+      setTimeout(() => {
+        setSuccessModal(false);
+        navigation.replace('PreviewBill', { invoiceId: trxId });
+      }, 2000);
+    } catch (err) {
+      console.log('💥 Bill Creation Error:', err);
+    }
+  };
+
+  const calculateFinalAmount = (amount, discount, tax) => {
+    const amt = parseFloat(amount) || 0;
+    const disc = parseFloat(discount) || 0;
+    const tx = parseFloat(tax) || 0;
+
+    // Apply discount (percentage) and tax (fixed amount)
+    const discountedAmount = (amt * disc) / 100;
+
+    const finalAmount = amt - discountedAmount + tx;
+
+    // Return as a number (rounded to 2 decimals)
+    return parseFloat(finalAmount.toFixed(2));
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getInvoiceEntries(null, null, selectBusiness?.id).then((res) => {
+        let length = res.length;
+        if (!invoiceId) {
+          setBillId(String(length + 1));
+        }
+      });
+    });
+
+    return () => unsubscribe();
+  }, [navigation]);
+
+  useEffect(() => {
+    if (!invoiceId) return;
+
+    const fetchData = async () => {
+      const res = await getInvoiceEntries(null, null, selectBusiness?.id);
+      let filtered = res?.find((i) => i.id == invoiceId);
+
+      const arr =
+        filtered?.attachments?.map((i, index) => ({
+          name: `pdf-test-${index + 1}.pdf`,
+          type: isPdfFile(i?.local_path) ? 'pdf' : 'image',
+          uri: i?.local_path,
+          attachment_id: i?.invoiceId,
+        })) || [];
+
+      if (filtered?.cId) {
+        let details = await getClientDetails(filtered?.cId);
+        setSelectedParty(details);
+      }
+
+      setBillId(String(filtered?.bill));
+      setDate(new Date(filtered?.entryDate));
+      setAmount(filtered?.amount?.toString());
+      setTotalAmount(Number(filtered?.amount));
+      setDiscount(filtered?.discount?.toString());
+      setTax(filtered?.tax?.toString());
+      setAudioFile(filtered?.local_path);
+      setDetails(filtered?.details);
+      setAttachments(arr);
+      setPaymentMode(Number(filtered?.payment_mode));
+      setCalculatedAmount(filtered?.subamount?.toString());
+      setReceivedAmount(filtered?.advance?.toString());
+      setBalanceDue(
+        (Number(filtered?.subamount) - Number(filtered?.advance)).toFixed(2)
+      );
+      setSelectedItems(filtered?.status ? JSON.parse(filtered?.status) : []);
+    };
+
+    fetchData();
+  }, [invoiceId]);
+
+  const onUpdateBill = async () => {
+    try {
+      const finalValue = Number(CalculatedAmount);
+
+      // ✅ Validate value
+      if (
+        !finalValue ||
+        !isFinite(finalValue) ||
+        finalValue <= 0 ||
+        finalValue > 999999999
+      ) {
+        console.log('❌ Invalid or non-positive result, not updating');
+        return;
+      }
+
+      const invoices =
+        (await getInvoiceEntries(null, null, selectBusiness?.id)) || [];
+      const test_id = invoices.length + 1;
+
+      const bill = Number(BillId || test_id);
+      const bId = Number(selectBusiness?.id);
+      const entryDate = fromJsDateToSql(date);
+      const amount = Number(Amount);
+      const subamount = Number(CalculatedAmount);
+      const note = Details;
+      const local_path = AudioFile;
+      const tax = Number(Tax);
+      const discount = Number(Discount);
+      const payment_mode = Number(PaymentMode);
+      const advance = Number(ReceivedAmount);
+      const customerId = SelectedParty ? Number(SelectedParty?.id) : null;
+
+      console.log({
+        bill,
+        bId,
+        entryDate,
+        amount,
+        subamount,
+        note,
+        local_path,
+        tax,
+        discount,
+        payment_mode,
+        advance,
+      });
+
+      if (!SelectedParty) {
+        const response = await getInvoiceEntries('', '', selectBusiness?.id);
+        let filteredInvoice = response?.find((i) => i.id == invoiceId);
+
+        let allClientTransactions = await getClientTransactions(
+          filteredInvoice?.cId
+        );
+        let linkedTransaction = allClientTransactions?.find((t) => {
+          let splitted = t?.cash_type?.split('_')[1];
+          const billId = Number(splitted.replace(/\D/g, ''));
+
+          return Number(billId) === Number(invoiceId);
+        });
+
+        console.log(linkedTransaction, 'linkedTransaction');
+        // return
+        if (linkedTransaction) {
+          await softDeleteTransaction(linkedTransaction?.id);
+          console.log('Transaction Deleted');
+        }
+      }
+
+      // ✅ Update the main bill
+      const res = await updateBill(
+        String(invoiceId),
+        bill, // existing bill id
+        bId,
+        customerId,
+        entryDate,
+        amount,
+        subamount,
+        note,
+        local_path,
+        tax,
+        discount,
+        payment_mode,
+        advance,
+        SelectedItems?.length > 0 ? JSON.stringify(SelectedItems) : ''
+      );
+
+      console.log(res, '✅ Bill Update Success'); // same id (since we’re updating)
+
+      // ✅ Handle attachments
+      try {
+        // First delete old attachments
+        await deleteInvoiceImagesByInvoiceId(invoiceId);
+        console.log(`🗑️ Deleted old attachments for invoiceId: ${invoiceId}`);
+
+        // Then re-add new attachments (if any)
+        if (attachments?.length > 0) {
+          for (const file of attachments) {
+            if (file?.uri) {
+              try {
+                await addInvoiceImages(invoiceId, file.uri);
+                console.log(`📎 Added attachment: ${file.name || file.uri}`);
+              } catch (err) {
+                console.log('⚠️ Attachment insert error:', err);
+              }
+            }
+          }
+        } else {
+          console.log('ℹ️ No new attachments added');
+        }
+      } catch (err) {
+        console.log('💥 Attachment update error:', err);
+      }
+
+      // ✅ Reset UI and show success
+      setAmount('');
+      setDiscount('');
+      setTax('');
+      setDetails('');
+      setAudioFile('');
+      setAttachments([]);
+      setPaymentMode(null);
+      setBalanceDue(0);
+      setReceivedAmount(0);
+      setCalculatedAmount('');
+      setBillId(0);
+      setDate(new Date());
+
+      setSuccessModal(true);
+      setTimeout(() => {
+        setSuccessModal(false);
+        navigation.goBack();
+      }, 2000);
+    } catch (err) {
+      console.log('💥 Bill Update Error:', err);
+    }
+  };
+
+  const getAllClientTypes = async () => {
+    try {
+      const [customers, suppliers, banks] = await Promise.all([
+        getClientsByType(0, null, null, selectBusiness?.id),
+        getClientsByType(1, null, null, selectBusiness?.id),
+        getClientsByType(2, null, null, selectBusiness?.id),
+      ]);
+
+      const allClients = [...customers, ...suppliers, ...banks];
+
+      // sort
+      const sortedClients = allClients.sort((a, b) => a.type - b.type);
+      setClients(sortedClients);
+
+      // Map phone -> full client info
+      const phoneMap = new Map();
+      allClients.forEach((c) => {
+        const formatted = formatPhoneNumber(c.phone || '')?.toLowerCase();
+        if (formatted) {
+          phoneMap.set(formatted, {
+            id: c.id,
+            type: c.type,
+            name: c.name,
+            phone: c.phone,
+          });
+        }
+      });
+      setClientPhoneMap(phoneMap);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getAllContacts = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
+          {
+            title: 'Contacts',
+            message: 'This app would like to view your contacts.',
+            buttonPositive: 'Please accept bare mortal',
+          }
+        );
+
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          console.log('Contacts permission granted');
+          Contacts.getAll().then((contacts) => {
+            setContacts(contacts);
+          });
+        } else {
+          console.log('Contacts permission denied');
+          return;
+        }
+      } catch (err) {
+        console.warn(err);
+        return;
+      }
+    }
+    setIsModalVisible(false);
+  };
+
+  const filteredContacts = contacts.filter((item) => {
+    const name = item?.displayName?.toLowerCase() || '';
+    const rawNumber = item?.phoneNumbers[0]?.number || '';
+    const formattedNumber = formatPhoneNumber(rawNumber)?.toLowerCase() || '';
+
+    // 🔹 use your searchText state (from TextInput)
+    const searchLower = searchText.toLowerCase();
+
+    // (optional) client type
+    const clientType = clientPhoneMap.get(formattedNumber);
+
+    return name.includes(searchLower) || formattedNumber.includes(searchLower);
+  });
+
+  const filteredClients = Clients.filter((c) => {
+    const name = c.name?.toLowerCase() || '';
+    const phone = c.phone?.toLowerCase() || '';
+    const searchLower = searchText.toLowerCase();
+
+    return name.includes(searchLower) || phone.includes(searchLower);
+  });
+
+  const onPartyPress = async () => {
+    await getAllContacts();
+    await getAllClientTypes();
+    setChangeModal(true);
+  };
+
+  const onContinue = async (name, phoneNUmer) => {
+    // normalize phone
+    const normalizedPhone = phoneNUmer ? String(phoneNUmer).trim() : '';
+    let data = [...clients, ...suppliers];
+
+    try {
+      let clientId;
+      let homeDetails = null;
+
+      // If phone exists → check if already in clients array
+      const isExist =
+        normalizedPhone !== ''
+          ? data?.find((item) => {
+            const itemPhone = item?.phone ? String(item.phone).trim() : '';
+            return itemPhone === normalizedPhone && itemPhone !== '';
+          })
+          : undefined; // no phone → force new client
+
+      if (isExist) {
+        // Existing client found
+        clientId = isExist.id;
+        homeDetails = isExist;
+      } else {
+        console.log('else');
+        // No existing client or no phone given → always create new
+        const res = await addClient(
+          name,
+          normalizedPhone,
+          0,
+          selectBusiness?.id
+        );
+        setName('');
+        setPhoneNum('');
+        clientId = res?.insertId;
+      }
+
+      const resp = await getClientDetails(clientId);
+      dispatch({ type: CLIENT_DETAILS, payload: resp });
+
+      setSelectedParty(resp);
+      setChangeModal(false);
+
+      // navigation.replace('CustomerEntries', homeDetails ? { homeDetails } : {});
+    } catch (err) {
+      console.log('Error:', err);
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      if (!invoiceId) {
+        getInvoiceEntries(null, null, selectBusiness?.id).then((res) => {
+          let length = res.length;
+          setBillId(String(length + 1));
+        });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [navigation]);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', (e) => {
+      const height = e?.endCoordinates?.height || 0;
+      console.log('Keyboard Shown, height:', height);
+      setKeyboardPadding(height + 20); // Add a small safe margin
+    });
+
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      console.log('Keyboard Hidden');
+      setKeyboardPadding(0);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  const addPartyTransaction = async (finalValue, oldId) => {
+    try {
+      const res = await addTransaction(
+        SelectedParty.id,
+        String(finalValue),
+        '0',
+        Details,
+        fromJsDateToSql(date),
+        AudioFile,
+        `Bill_billId${String(oldId)}`
+      );
+
+      console.log(res, 'Transaction Success');
+      const trxId = res.insertId; // ✅ new transaction ID
+
+      if (attachments && attachments.length > 0) {
+        for (const file of attachments) {
+          try {
+            await addTransactionImages(trxId, file.uri);
+            console.log(`Attachment added: ${file.name}`);
+          } catch (err) {
+            console.log('Attachment insert error:', err);
+          }
+        }
+      }
+    } catch (err) {
+      console.log(err, 'Transaction Error');
+    }
+  };
+
+  const calculateQuantity = (existingQty, newQty, type) => {
+    const current = Number(existingQty) || 0;
+    const input = Number(newQty) || 0;
+
+    if (type === 'IN') {
+      return current + input; // Add stock
+    } else if (type === 'OUT') {
+      return current - input; // Reduce stock
+    } else {
+      return current; // No change if type is invalid
+    }
+  };
+
+  const addStockEntry = async (
+    itemId,
+    stockOUT,
+    amount,
+    rateSale,
+    billNo,
+    oldQuantity,
+    addedQuantity,
+    Details,
+    AudioFile,
+    date,
+    selectBusiness
+  ) => {
+    try {
+      debugger;
+      const res = await addItemDetails(
+        itemId,
+        '0', // stockIN (since this is stockOUT)
+        stockOUT,
+        amount,
+        rateSale,
+        `${Details}_bill_${String(billNo)}`,
+        AudioFile,
+        fromJsDateToSql(date),
+        selectBusiness?.id,
+        String(billNo)
+      );
+
+      console.log('✅ Transaction Success:', res);
+
+      const updatedQty = calculateQuantity(oldQuantity, addedQuantity, 'OUT');
+      await updateItemQty(itemId, updatedQty);
+
+      const trxId = res?.insertId;
+      console.log('🆔 New Transaction ID:', trxId);
+
+      return trxId; // optional return if you want to use it later
+    } catch (error) {
+      console.error('❌ Error adding entry:', error);
+    }
+  };
+
+  return (
+    <>
+      <View style={Styles._mainContainer}>
+        <Header
+          navigation={navigation}
+          title={'Create New Bill'}
+          firstColor={COLORS.redColor}
+          secondColor={COLORS.redColor}
+        />
+        <LinearGradient
+          style={[Styles._headerMain, { height: 30 }]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          colors={[COLORS.redColor, COLORS.redColor]}
+        />
+        <ScrollView
+          style={{
+            width: WP(100),
+            position: 'absolute',
+            top: 45,
+            height: HP(95),
+          }}
+          contentContainerStyle={{ paddingBottom: 600 }}
+        >
+          <View
+            style={[
+              Styles._contentMain,
+              { marginTop: 15, paddingHorizontal: 10, gap: 10 },
+            ]}
+          >
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                width: '100%',
+                justifyContent: 'space-between',
+                marginTop: 12,
+              }}
+            >
+              <FloatingInput
+                label="Bill Number"
+                // iconName="receipt-outline"
+                keyboardType="number-pad"
+                iconPosition="right"
+                value={BillId}
+                onChangeText={(text) => setBillId(text)}
+                allowedChars={/[^0-9]/g}
+                maxLength={10}
+                containerStyle={{ width: '47.5%' }}
+              />
+
+              <FloatingInput
+                label="Date"
+                iconName="calendar-outline"
+                iconPosition="left"
+                editable={false}
+                onPress={showDate}
+                value={date ? date?.toDateString() : 'Date'}
+                // onChangeText={(text) => setForm({ ...form, amount: text })}
+                containerStyle={{ width: '47.5%' }}
+                // iconColor={COLORS.greenColor}
+                inputStyle={{ fontSize: 10 }}
+              />
+            </View>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._textInputParty}
+              onPress={async () => await onPartyPress()}
+            >
+              {SelectedParty ? (
+                <Text
+                  style={[
+                    Styles._inputText,
+                    { color: COLORS.redColor, fontFamily: FONT_MEDIUM },
+                  ]}
+                >
+                  {SelectedParty?.name}
+                </Text>
+              ) : (
+                <Text
+                  style={[
+                    Styles._inputText,
+                    { color: COLORS.redColor, fontFamily: FONT_MEDIUM },
+                  ]}
+                >
+                  Add Party
+                </Text>
+              )}
+
+              {SelectedParty ? (
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  onPress={() => setSelectedParty(null)}
+                >
+                  <Ionicons
+                    name={'close-circle'}
+                    color={COLORS.redColor}
+                    size={25}
+                  />
+                </TouchableOpacity>
+              ) : (
+                <Ionicons
+                  name={'chevron-forward'}
+                  color={COLORS.redColor}
+                  size={20}
+                />
+              )}
+            </TouchableOpacity>
+
+            <View
+              style={[
+                Styles._textInputParty,
+                { height: 'auto', flexDirection: 'column' },
+              ]}
+            >
+              <TouchableOpacity
+                activeOpacity={0.8}
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  height: 60,
+                  alignItems: 'center',
+                }}
+                // style={Styles._textInputParty}
+                onPress={() => {
+                  navigation.navigate('AddItems', {
+                    selectedItems: SelectedItems,
+                    totalAmount: totalAmount,
+                    onSelect: (newSelectedItems, newTotalAmount) => {
+                      setSelectedItems(newSelectedItems);
+                      setTotalAmount(newTotalAmount);
+                      setAmount(String(newTotalAmount));
+                    },
+                  });
+                }}
+              >
+                <Text
+                  style={[
+                    Styles._inputText,
+                    { color: COLORS.redColor, fontFamily: FONT_MEDIUM },
+                  ]}
+                >
+                  Add Items
+                </Text>
+                <Ionicons
+                  name={'chevron-forward'}
+                  color={COLORS.redColor}
+                  size={20}
+                />
+              </TouchableOpacity>
+              {SelectedItems?.length > 0 && (
+                <View style={{ width: '100%' }}>
+                  <View style={Styles._itemHeaderMain}>
+                    <View style={{ width: '30%' }}>
+                      <Text
+                        style={{
+                          color: COLORS.gray,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 12,
+                        }}
+                      >
+                        ITEM
+                      </Text>
+                    </View>
+
+                    <View style={{ width: '20%', alignItems: 'flex-end' }}>
+                      <Text
+                        style={{
+                          color: COLORS.gray,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 12,
+                        }}
+                      >
+                        QTY
+                      </Text>
+                    </View>
+
+                    <View style={{ width: '20%', alignItems: 'flex-end' }}>
+                      <Text
+                        style={{
+                          color: COLORS.gray,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 12,
+                        }}
+                      >
+                        RATE
+                      </Text>
+                    </View>
+
+                    <View style={{ width: '20%', alignItems: 'flex-end' }}>
+                      <Text
+                        style={{
+                          color: COLORS.gray,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 12,
+                        }}
+                      >
+                        AMOUNT
+                      </Text>
+                    </View>
+                  </View>
+                  {SelectedItems?.map((i) => (
+                    <View style={Styles._itemHeaderMain}>
+                      <View style={{ width: '30%' }}>
+                        <Text
+                          style={{
+                            color: COLORS.blackColor,
+                            fontFamily: FONT_NORMAL,
+                            fontSize: 12,
+                          }}
+                        >
+                          {i?.name}
+                        </Text>
+                      </View>
+
+                      <View style={{ width: '20%', alignItems: 'flex-end' }}>
+                        <Text
+                          style={{
+                            color: COLORS.blackColor,
+                            fontFamily: FONT_NORMAL,
+                            fontSize: 12,
+                          }}
+                        >
+                          {addCommas(Number(i?.addedQty))}
+                        </Text>
+                      </View>
+
+                      <View style={{ width: '20%', alignItems: 'flex-end' }}>
+                        <Text
+                          style={{
+                            color: COLORS.blackColor,
+                            fontFamily: FONT_NORMAL,
+                            fontSize: 12,
+                          }}
+                        >
+                          {addCommas(Number(i?.addedRate))}
+                        </Text>
+                      </View>
+
+                      <View style={{ width: '20%', alignItems: 'flex-end' }}>
+                        <Text
+                          style={{
+                            color: COLORS.blackColor,
+                            fontFamily: FONT_NORMAL,
+                            fontSize: 12,
+                          }}
+                        >
+                          {addCommas(
+                            Number(i?.addedQty) * Number(i?.addedRate)
+                          )}
+                        </Text>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              )}
+            </View>
+
+
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                width: '100%',
+                justifyContent: 'space-between',
+                marginTop: 12,
+              }}
+            >
+              <FloatingInput
+                label="Disc. %"
+                // iconName="pricetags-outline"
+                keyboardType="number-pad"
+                iconPosition="right"
+                value={Discount}
+                onChangeText={(text) => {
+                  // Remove any non-numeric characters
+                  let numericText = text
+                    .replace(/[^0-9.]/g, '')
+                    .replace(/(\..*)\./g, '$1');
+
+                  // Convert to number and cap at 99
+                  if (parseInt(numericText) > 99) {
+                    numericText = '99';
+                  }
+
+                  setDiscount(numericText);
+                }}
+                allowedChars={/[^0-9.]/g}
+                maxLength={10}
+                containerStyle={{ width: '47.5%' }}
+              />
+
+              <FloatingInput
+                label="Tax"
+                // iconName="pricetags-outline"
+                keyboardType="number-pad"
+                iconPosition="right"
+                value={Tax}
+                onChangeText={(text) => {
+                  let numericText = text
+                    .replace(/[^0-9.]/g, '')
+                    .replace(/^(\d*\.\d*).*$/, '$1');
+                  setTax(numericText);
+                }}
+                allowedChars={/[^0-9.]/g}
+                maxLength={10}
+                containerStyle={{ width: '47.5%' }}
+              />
+            </View>
+
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                width: '100%',
+                justifyContent: 'space-between',
+              }}
+            >
+              <TouchableOpacity
+                style={[Styles.InvoiceAmountText]}
+                activeOpacity={0.8}
+                onPress={() => setDuration('monthly')}
+              >
+                <Text style={Styles.InvoiceAmountText}>Invoice Amount</Text>
+              </TouchableOpacity>
+
+              <FloatingInput
+                label="Enter Amount"
+                // iconName="cash-outline"
+                iconPosition="right"
+                value={Amount}
+                editable={!totalAmount > 0}
+                onChangeText={(text) => {
+                  setPaymentMode('');
+                  let numericText = text
+                    .replace(/[^0-9.]/g, '')
+                    .replace(/(\..*)\./g, '$1');
+                  setAmount(numericText);
+                }}
+                // allowedChars={/[^A-Za-z0-9\s]/g}
+                maxLength={8}
+                containerStyle={{ width: '47.5%' }}
+                inputStyle={{ fontSize: 14, fontFamily: FONT_BOLD }}
+                keyboardType="number-pad"
+              />
+            </View>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._textInputParty}
+              onPress={() => {
+                !AudioFile && askAudioPermission();
+              }}
+            >
+              {AudioFile ? (
+                <>
+                  {PlayLoading ? (
+                    <ActivityIndicator
+                      color={COLORS.redColor}
+                      size={'small'}
+                      animating
+                    />
+                  ) : (
+                    <TouchableOpacity
+                      activeOpacity={0.8}
+                      onPress={() => {
+                        if (IsPlaying) {
+                          Sound.stopPlayer();
+                          Sound.removePlayBackListener();
+                          Sound.removePlaybackEndListener();
+                          setIsPlaying(false);
+                          animationRef.current?.pause();
+                        } else {
+                          onStartPlay(AudioFile);
+                        }
+                      }}
+                    >
+                      <Ionicons
+                        color={COLORS.redColor}
+                        size={22}
+                        name={IsPlaying ? 'pause' : 'play'}
+                      />
+                    </TouchableOpacity>
+                  )}
+
+                  <LottieView
+                    source={require('../assets/animations/voice_visualization.json')}
+                    autoPlay={false}
+                    loop
+                    style={{ width: '65%', height: 42 }}
+                    ref={animationRef}
+                  />
+
+                  <TouchableOpacity
+                    activeOpacity={0.8}
+                    onPress={handleDeleteAudio}
+                  >
+                    <Ionicons
+                      color={COLORS.redColor}
+                      size={22}
+                      name={'close'}
+                    />
+                  </TouchableOpacity>
+                </>
+              ) : (
+                <>
+                  <Text
+                    style={{
+                      color: COLORS.redColor,
+                      fontSize: 13,
+                      fontFamily: FONT_MEDIUM,
+                    }}
+                  >
+                    Attach Voice Note
+                  </Text>
+                  <Ionicons
+                    name={'mic-outline'}
+                    color={COLORS.redColor}
+                    size={22}
+                  />
+                </>
+              )}
+            </TouchableOpacity>
+
+            <FloatingInput
+              label="Enter details."
+              // iconName="list-outline"
+              iconPosition="right"
+              value={Details}
+              onChangeText={(text) => setDetails(text)}
+              allowedChars={/[^A-Za-z0-9\s]/g}
+              maxLength={300}
+              containerStyle={{ width: '100%' }}
+            />
+            {/* <Text style={Styles._inputText}>Enter details...</Text> */}
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._textInputAttathcment}
+              onPress={() => setIsModalVisible(true)}
+            >
+              <Ionicons name={'attach'} color={COLORS.redColor} size={22} />
+
+              <Text style={Styles._inputText}>
+                Attachment Photo & PDF Files
+              </Text>
+            </TouchableOpacity>
+
+            {attachments && attachments.length > 0 && (
+              <View style={Styles._textInputAttathcment}>
+                {attachments.map((file, index) => (
+                  <View
+                    key={index}
+                    style={{ marginLeft: 8, alignItems: 'center' }}
+                  >
+                    {file.type === 'image' ? (
+                      <Image
+                        source={{ uri: file.uri }}
+                        style={{ width: 40, height: 40, borderRadius: 5 }}
+                      />
+                    ) : (
+                      <Ionicons
+                        name="document-text-outline"
+                        size={30}
+                        color={COLORS.redColor}
+                      />
+                    )}
+                    {/* delete cross */}
+                    <TouchableOpacity
+                      onPress={() => removeAttachment(index)}
+                      style={{
+                        position: 'absolute',
+                        top: -5,
+                        right: -5,
+                        backgroundColor: 'white',
+                        borderRadius: 10,
+                        padding: 2,
+                      }}
+                    >
+                      <Ionicons
+                        name="close-circle"
+                        size={18}
+                        color={COLORS.redColor}
+                      />
+                    </TouchableOpacity>
+                  </View>
+                ))}
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      </View>
+
+      {/* Sound Modal */}
+      <Modal
+        isVisible={IsSoundModal}
+      // onBackdropPress={() => setIsSoundModal(false)}
+      // onBackButtonPress={() => setIsSoundModal(false)}
+      >
+        <View style={Styles._voiceModalMain}>
+          <Text
+            style={{
+              color: COLORS.blackColor,
+              fontFamily: FONT_MEDIUM,
+              fontSize: 18,
+            }}
+          >
+            DigiKhata
+          </Text>
+
+          <LottieView
+            style={{ width: 130, height: 130 }}
+            source={require('../assets/animations/recording.json')}
+            autoPlay
+            loop
+          />
+
+          <Text
+            style={{
+              color: COLORS.blackColor,
+              fontFamily: FONT_NORMAL,
+              fontSize: 13,
+              opacity: 0.6,
+            }}
+          >
+            Recording
+          </Text>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              width: '50%',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <TouchableOpacity
+              style={Styles._voiceBtn}
+              activeOpacity={0.8}
+              onPress={() => {
+                onStopRecord(true);
+              }}
+            >
+              <Ionicons
+                name={'trash-outline'}
+                color={COLORS.blackColor}
+                size={22}
+              />
+            </TouchableOpacity>
+
+            <Text>{RecordingTime}</Text>
+
+            <TouchableOpacity
+              style={Styles._voiceBtn}
+              activeOpacity={0.8}
+              onPress={() => {
+                onStopRecord(false);
+              }}
+            >
+              <Ionicons name={'stop'} color={COLORS.blackColor} size={22} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
+      {/* Modal */}
+      <Modal
+        isVisible={isModalVisible}
+        onBackdropPress={() => setIsModalVisible(false)}
+        onBackButtonPress={() => setIsModalVisible(false)}
+      >
+        <View
+          style={{ backgroundColor: 'white', padding: 20, borderRadius: 12 }}
+        >
+          <Text
+            style={{ fontSize: 16, fontFamily: FONT_MEDIUM, marginBottom: 12 }}
+          >
+            Choose Option
+          </Text>
+
+          <TouchableOpacity style={Styles._modalBtn2} onPress={handleGallery}>
+            <Ionicons name="image-outline" size={20} color="red" />
+            <Text style={Styles._modalText}>Gallery</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={Styles._modalBtn2} onPress={handleCamera}>
+            <Ionicons name="camera-outline" size={20} color="red" />
+            <Text style={Styles._modalText}>Camera</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={Styles._modalBtn2} onPress={handlePDF}>
+            <Ionicons name="document-outline" size={20} color="red" />
+            <Text style={Styles._modalText}>PDF</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+
+      {/* Success Modal */}
+      <Modal
+        isVisible={SuccessModal}
+        coverScreen
+        style={{ margin: 0, padding: 0 }}
+        animationInTiming={100}
+        animationOutTiming={100}
+      >
+        <View
+          style={{
+            width: WP(100),
+            height: HP(100),
+            backgroundColor: COLORS.whiteColor,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <LottieView
+            source={require('../assets/animations/success.json')}
+            style={{ width: 120, height: 120 }}
+            autoPlay
+            loop={false}
+          />
+
+          <Text
+            style={{ color: '#00C985', fontFamily: FONT_MEDIUM, fontSize: 15 }}
+          >
+            Transaction Saved
+          </Text>
+        </View>
+      </Modal>
+
+      <Modal
+        isVisible={ChangeModal}
+        onBackButtonPress={() => {
+          setShowNewBtn(false);
+          setChangeModal(false);
+        }}
+        onBackdropPress={() => {
+          setShowNewBtn(false);
+          setChangeModal(false);
+        }}
+        avoidKeyboard={false}
+      >
+        <View style={Styles._changeModalMain}>
+          <View style={Styles._changeModalHeader}>
+            <Text style={Styles._changeModalHeaderTxt}>Select Party</Text>
+          </View>
+          <View style={Styles._modalSearchMain}>
+            <TextInput
+              style={Styles._modalSearch}
+              cursorColor={COLORS.redColor}
+              placeholder={
+                ShowNewBtn
+                  ? filteredContacts?.length && filteredContacts.length != 0
+                    ? 'Search Contacts'
+                    : 'Type Customer Name'
+                  : 'Search Clients'
+              }
+              value={searchText}
+              maxLength={25}
+              onChangeText={setSearchText}
+              placeholderTextColor={COLORS.gray}
+            />
+          </View>
+
+          <View style={Styles._modalSearchMain}>
+            {!ShowNewBtn ? (
+              <TouchableOpacity
+                style={Styles._addContactBtn}
+                activeOpacity={0.8}
+                onPress={() => setShowNewBtn(true)}
+              >
+                <View style={Styles._avatarMain}>
+                  <Ionicons
+                    name="person-add-outline"
+                    color={COLORS.redColor}
+                    size={22}
+                  />
+                </View>
+
+                <View style={{ width: '70%' }}>
+                  <Text
+                    style={{
+                      color: COLORS.primaryColor,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 12,
+                    }}
+                  >
+                    Add New Customer
+                  </Text>
+                </View>
+
+                <Ionicons
+                  name="chevron-forward"
+                  color={COLORS.primaryColor}
+                  size={22}
+                />
+              </TouchableOpacity>
+            ) : (
+              <View style={Styles._phoneInputMain}>
+                <CountryPhoneInput
+                  contentContainerStyle={{ width: '100%' }}
+                  onChange={(text) => {
+                    setPhoneNum(text?.fullNumber);
+                  }}
+                />
+
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    if (searchText.trim()) {
+                      onContinue(searchText, PhoneNum);
+                    }
+                  }}
+                  style={[
+                    Styles._modalBtn,
+                    {
+                      backgroundColor: searchText?.trim()
+                        ? COLORS.primaryColor
+                        : COLORS.gray,
+                      width: '100%',
+                      justifyContent: 'center',
+                      paddingVertical: 15,
+                    },
+                  ]}
+                >
+                  <Text
+                    style={{
+                      color: COLORS.whiteColor,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 12,
+                    }}
+                  >
+                    CONTINUE
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            )}
+          </View>
+          {!ShowNewBtn ? (
+            <ScrollView
+              contentContainerStyle={{
+                alignItems: 'center',
+              }}
+            >
+              {filteredClients?.length === 0 ? (
+                <View
+                  style={{
+                    height: 300,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: COLORS.blackColor,
+                      fontFamily: FONT_MEDIUM,
+                      fontSize: 13,
+                    }}
+                  >
+                    No Records Found
+                  </Text>
+                </View>
+              ) : (
+                filteredClients.map((item, index) => {
+                  let amount = item?.total_subamount - item?.total_amount;
+
+                  let type = 'none';
+                  if (amount > 0) {
+                    type = 'receivable';
+                  } else if (amount < 0) {
+                    type = 'payable';
+                  }
+
+                  amount = Math.abs(amount);
+
+                  return (
+                    <User
+                      key={index}
+                      name={item?.name}
+                      addedAt={formatDateTime(
+                        item?.latest_transaction_date || item?.created_at
+                      )}
+                      amount={amount}
+                      type={type}
+                      avatarColor={item?.type == 0 ? 'red' : 'green'}
+                      clientType={item?.type}
+                      icon={item?.local_path}
+                      mainContainer={{ width: '100%' }}
+                      onPress={() => {
+                        setShowNewBtn(false);
+                        setChangeModal(false);
+                        setSelectedParty(item);
+                      }}
+                    />
+                  );
+                })
+              )}
+            </ScrollView>
+          ) : (
+            <FlatList
+              data={filteredContacts} // 🔹 now using filtered contacts
+              keyExtractor={(item, index) => index.toString()}
+              contentContainerStyle={{ paddingBottom: HP(20) }}
+              renderItem={({ item }) => {
+                const rawNumber = item?.phoneNumbers[0]?.number;
+                const formattedNumber =
+                  formatPhoneNumber(rawNumber)?.toLowerCase();
+
+                const clientInfo = clientPhoneMap.get(formattedNumber);
+
+                const clientId = clientInfo?.id;
+                const clientType = clientInfo?.type;
+
+                let typeLabel = '';
+                if (clientType === 0) typeLabel = 'Customer';
+                else if (clientType === 1) typeLabel = 'Supplier';
+                const highlight = clientType === 0 || clientType === 1;
+
+                return (
+                  <TouchableOpacity
+                    style={[Styles._contactsCardMain]}
+                    activeOpacity={0.8}
+                    onPress={async () => {
+                      onContinue(
+                        item?.displayName,
+                        item?.phoneNumbers[0]?.number
+                      );
+                    }}
+                  >
+                    <View style={Styles._avatarMain}>
+                      <Text style={Styles._avatarText}>
+                        {getAvatar(item?.displayName)}
+                      </Text>
+                    </View>
+                    <View style={{ width: '55%' }}>
+                      <Text
+                        style={{
+                          color: COLORS.blackColor,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 13,
+                        }}
+                      >
+                        {item?.displayName}
+                      </Text>
+                      <Text
+                        style={{
+                          color: COLORS.blackColor,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 12,
+                          opacity: 0.6,
+                        }}
+                      >
+                        {formattedNumber}
+                      </Text>
+                    </View>
+
+                    <View
+                      style={{
+                        width: '27%',
+                        height: '100%',
+                        justifyContent: 'center',
+                        alignItems: 'flex-end',
+                      }}
+                    >
+                      <Text
+                        style={{
+                          color: COLORS.darkGrey,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 11,
+                        }}
+                      >
+                        {typeLabel}
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
+                );
+              }}
+            />
+          )}
+        </View>
+      </Modal>
+
+      <BottomView
+        style={{
+          justifyContent: 'center',
+          height: 'auto',
+          backgroundColor: COLORS.whiteColor,
+          paddingVertical: 10,
+          flexDirection: 'column',
+          gap: 10,
+          bottom: keyboardPadding,
+        }}
+      >
+        {Amount?.toString() != '' && (
+          <View style={Styles._paymentOptionsMain}>
+            <View style={Styles._radioMain}>
+              {/* Unpaid */}
+              <TouchableOpacity
+                activeOpacity={0.8}
+                style={Styles._radioBtn}
+                onPress={() => {
+                  setPaymentMode(0);
+                  setBalanceDue(Number(CalculatedAmount));
+                }}
+              >
+                <Ionicons
+                  name={
+                    PaymentMode === 0 ? 'radio-button-on' : 'radio-button-off'
+                  }
+                  color={
+                    PaymentMode === 0 ? COLORS.primaryColor : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+                <Text style={Styles._radioText}>Unpaid</Text>
+              </TouchableOpacity>
+
+              {/* Cash */}
+              <TouchableOpacity
+                activeOpacity={0.8}
+                style={Styles._radioBtn}
+                onPress={() => {
+                  setPaymentMode(1);
+                  setBalanceDue(0);
+                  setReceivedAmount(String(CalculatedAmount));
+                }}
+              >
+                <Ionicons
+                  name={
+                    PaymentMode === 1 ? 'radio-button-on' : 'radio-button-off'
+                  }
+                  color={
+                    PaymentMode === 1 ? COLORS.primaryColor : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+                <Text style={Styles._radioText}>Cash</Text>
+              </TouchableOpacity>
+
+              {/* Online */}
+              <TouchableOpacity
+                activeOpacity={0.8}
+                style={Styles._radioBtn}
+                onPress={() => {
+                  setPaymentMode(2);
+                  setBalanceDue(0);
+                  setReceivedAmount(String(CalculatedAmount));
+                }}
+              >
+                <Ionicons
+                  name={
+                    PaymentMode === 2 ? 'radio-button-on' : 'radio-button-off'
+                  }
+                  color={
+                    PaymentMode === 2 ? COLORS.primaryColor : COLORS.darkGrey
+                  }
+                  size={25}
+                />
+                <Text style={Styles._radioText}>Online</Text>
+              </TouchableOpacity>
+            </View>
+
+            <View
+              style={[
+                Styles._radioMain,
+                {
+                  height: 'auto',
+                  paddingVertical: 10,
+                  justifyContent: 'flex-end',
+                },
+              ]}
+            >
+              {(PaymentMode === 1 || PaymentMode === 2) && (
+                <View
+                  style={[
+                    Styles._textInpustMain,
+                    { width: '45%', justifyContent: 'center' },
+                  ]}
+                >
+                  {/* <View style={Styles._capsuleMain}>
+                    <Text style={Styles._capsuleText}>Received</Text>
+                  </View>
+
+                  <TextInput
+                    placeholder="0"
+                    style={[Styles._textInput, { width: '100%' }]}
+                    cursorColor={COLORS.primaryColor}
+                    placeholderTextColor={COLORS.grey}
+                    keyboardType="number-pad"
+                    value={ReceivedAmount}
+                    onChangeText={(text) => {
+                      // Remove all non-numeric and non-decimal characters
+                      let numericText = text
+                        .replace(/[^0-9.]/g, '')
+                        .replace(/(\..*)\./g, '$1');
+
+                      // Update states
+                      setReceivedAmount(numericText);
+                      setBalanceDue(
+                        (
+                          Number(CalculatedAmount) - Number(numericText)
+                        ).toFixed(2)
+                      );
+                    }}
+                  /> */}
+
+                  <FloatingInput
+                    label="Received"
+                    editable={false}
+                    placeholder="Received"
+                    // iconName="business-outline"
+                    keyboardType="number-pad"
+                    iconPosition="right"
+                    value={ReceivedAmount}
+                    onChangeText={(text) => {
+                      // Remove all non-numeric and non-decimal characters
+                      let numericText = text
+                        .replace(/[^0-9.]/g, '')
+                        .replace(/(\..*)\./g, '$1');
+
+                      // Update states
+                      setReceivedAmount(numericText);
+                      setBalanceDue(
+                        (
+                          Number(CalculatedAmount) - Number(numericText)
+                        ).toFixed(2)
+                      );
+                    }}
+                  />
+                </View>
+              )}
+            </View>
+
+            <View
+              style={[
+                Styles._radioMain,
+                {
+                  borderBottomColor: COLORS.lightGray,
+                  borderBottomWidth: 1,
+                  borderTopColor: COLORS.lightGray,
+                  borderTopWidth: 1,
+                },
+              ]}
+            >
+              <Text style={Styles._radioText}>Balance Due</Text>
+              <Text style={[Styles._radioText, { color: COLORS.blackColor }]}>
+                Rs {BalanceDue}
+              </Text>
+            </View>
+          </View>
+        )}
+
+        <BottomView style={[Styles.bottomBar]}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={[
+              Styles.totalButton,
+              {
+                width: '100%',
+                opacity:
+                  Number(Amount) > 0 &&
+                    PaymentMode != null &&
+                    PaymentMode !== ''
+                    ? 1
+                    : 0.6,
+              },
+            ]}
+            onPress={() => {
+              // ✅ Only allow if conditions are met
+              if (
+                Number(Amount) > 0 &&
+                PaymentMode != null &&
+                PaymentMode !== ''
+              ) {
+                invoiceId ? onUpdateBill() : onCreateBill();
+              } else {
+                console.log('⚠️ Invalid input: Amount or Payment mode missing');
+              }
+            }}
+          >
+            <Text style={Styles.totalText}>
+              {invoiceId ? 'UPDATE' : 'SAVE'}
+            </Text>
+          </TouchableOpacity>
+        </BottomView>
+      </BottomView>
+    </>
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 15,
+  },
+  _headerTitle: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 15,
+  },
+  _contentMain: {
+    width: WP(94),
+    // height: "90%",
+    backgroundColor: COLORS.whiteColor,
+    // position: "absolute",
+    // top: 55,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    // paddingTop: 30
+  },
+  _picMain: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    backgroundColor: '#f2f2f2',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  _pic: {
+    width: 60,
+    height: 60,
+  },
+  _selectMain: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    backgroundColor: '#F44336',
+    width: 45,
+    height: 45,
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: '#fff',
+  },
+  _input: {
+    width: '95%',
+    height: 60,
+    // backgroundColor:"red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 15,
+  },
+  _inputIconMain: {
+    width: 38,
+    height: 38,
+    backgroundColor: COLORS.lightGrey,
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _inputText: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _inputsMain: {
+    marginTop: 60,
+    gap: 15,
+  },
+  _switchToSupplier: {
+    width: WP(94),
+    height: 60,
+    // height: "90%",
+    backgroundColor: COLORS.whiteColor,
+    // position: "absolute",
+    // top: 55,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    borderColor: COLORS.borderColor,
+    borderWidth: 1,
+    elevation: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    marginTop: 15,
+    flexDirection: 'row',
+    paddingHorizontal: 10,
+  },
+  _smallText: {
+    color: COLORS.blackColor,
+    fontSize: 12,
+    fontFamily: FONT_NORMAL,
+  },
+  _durationMain: {
+    height: 60,
+    width: '40%',
+    // backgroundColor:"red",
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    paddingLeft: 10,
+  },
+  _textInputMain: {
+    width: '100%',
+    height: 60,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    gap: 15,
+  },
+  _textInputParty: {
+    width: '100%',
+    height: 60,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    gap: 15,
+  },
+  _textInputAttathcment: {
+    width: '100%',
+    height: 60,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    gap: 15,
+  },
+  _textInput: {
+    height: '100%',
+    color: COLORS.blackColor,
+    fontSize: 13,
+    fontFamily: FONT_NORMAL,
+    width: '85%',
+  },
+  _capsuleMain: {
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    // right:0,
+    width: '60%',
+    alignSelf: 'center',
+    top: -10,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    alignItems: 'center',
+  },
+  _capsuleText: {
+    color: COLORS.gray,
+    fontFamily: FONT_NORMAL,
+    fontSize: 10,
+  },
+  _editModalMain: {
+    width: WP(90),
+    // height: HP(25),r
+    backgroundColor: COLORS.whiteColor,
+    alignSelf: 'center',
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    gap: 30,
+  },
+  _modalInput: {
+    width: '95%',
+    height: 48,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    paddingLeft: 10,
+  },
+  _modalBtn: {
+    // width: '45%',
+    height: 50,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    backgroundColor: COLORS.primaryColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    bottom: 0,
+  },
+  _modalBtnText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 14,
+  },
+  _bottomBtn: {
+    width: '100%',
+    height: '90%',
+    backgroundColor: COLORS.primaryColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: 'red',
+    borderWidth: 1,
+    paddingHorizontal: 20,
+    gap: 10,
+  },
+  _bankName: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+    marginTop: 15,
+  },
+  InvoiceAmountText: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _paymentOptionsMain: {
+    width: '100%',
+    // height: 100,
+    // backgroundColor: "red"
+  },
+  _radioMain: {
+    width: '100%',
+    height: 50,
+    // backgroundColor: COLORS.greenColor,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _radioBtn: {
+    width: '30%',
+    height: '100%',
+    flexDirection: 'row',
+    // justifyContent: "space-between",
+    alignItems: 'center',
+    // backgroundColor: "pink",
+    gap: 10,
+    // paddingHorizontal: 17
+  },
+  _radioText: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 13,
+    color: COLORS.darkGrey,
+  },
+  _voiceModalMain: {
+    width: WP(90),
+    height: HP(30),
+    backgroundColor: COLORS.whiteColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 15,
+  },
+  _voiceBtn: {
+    width: 35,
+    height: 35,
+    borderColor: COLORS.blackColor,
+    borderWidth: 1,
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _modalText: {
+    marginLeft: 10,
+    fontSize: 14,
+    fontFamily: FONT_NORMAL,
+    color: COLORS.blackColor,
+  },
+  _modalBtn2: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomColor: '#eee',
+    borderBottomWidth: 1,
+  },
+  _changeModalMain: {
+    width: WP(90),
+    maxHeight: HP(75),
+    backgroundColor: COLORS.whiteColor,
+  },
+  _changeModalHeader: {
+    width: '100%',
+    height: HP(6),
+    backgroundColor: COLORS.primaryColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _changeModalHeaderTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  _modalSearchMain: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 7.5,
+  },
+  _modalSearch: {
+    width: '92%',
+    height: 50,
+    borderWidth: 1,
+    borderColor: COLORS.gray,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingLeft: 10,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+    color: COLORS.blackColor,
+  },
+  _avatarText: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 16,
+    color: COLORS.primaryColor,
+  },
+  _addContactBtn: {
+    width: '92%',
+    height: 50,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _contactsCardMain: {
+    width: '92%',
+    height: 50,
+    // backgroundColor: "red",
+    marginVertical: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  _phoneInputMain: {
+    width: '92%',
+    // height:60,
+    // backgroundColor:"red",
+    alignItems: 'center',
+    gap: 15,
+  },
+
+  bottomBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    elevation: 10,
+  },
+
+  totalButton: {
+    borderWidth: 1,
+    marginBottom: 10,
+    borderColor: COLORS.primaryColor,
+    backgroundColor: COLORS.redColor,
+    borderRadius:100,
+    width: '100%',
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  totalText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _itemHeaderMain: {
+    width: '100%',
+    height: 40,
+    borderTopColor: COLORS.gray,
+    borderBottomColor: COLORS.gray,
+    borderTopWidth: 0.5,
+    borderBottomWidth: 0.5,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    // paddingVertical:5
+  },
+});