digikhata-mashreq-sdk 0.1.1 → 1.1.0

package/src/app/screens/Entry.js

@@ -1,658 +1,2628 @@
-import { View, Text, StyleSheet, TouchableOpacity, TextInput, Keyboard, ScrollView, Platform, PermissionsAndroid, Image, Dimensions } from 'react-native'
-import React, { useState } from 'react'
-import { COLORS, FONT_MEDIUM, FONT_NORMAL, HP, mergeDateTime, WP } from '../themes/config'
-import LinearGradient from 'react-native-linear-gradient'
-import Ionicons from "react-native-vector-icons/Ionicons"
-import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
-import { addTransaction, addTransactionImages } from '../database/clients';
-import { useSelector } from "react-redux";
-import Modal from "react-native-modal";
-import { launchCamera, launchImageLibrary } from "react-native-image-picker";
-import { pick } from "@react-native-documents/picker";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  Keyboard,
+  ScrollView,
+  Platform,
+  PermissionsAndroid,
+  Image,
+  Dimensions,
+  ActivityIndicator,
+  Alert,
+  StatusBar,
+  PixelRatio,
+  FlatList,
+} from 'react-native';
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  addCommas,
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  formatPhoneNumber,
+  fromJsDateToSql,
+  getAvatar,
+  HP,
+  Input_Field_SIZES,
+  isPdfFile,
+  mergeDateTime,
+  TEXT_SIZES,
+  toISOStringUTC,
+  WP,
+} from '../themes/config';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import {
+  addClient,
+  addTransaction,
+  addTransactionImages,
+  deleteTransactionImage,
+  deleteTransactionImagesByTrxId,
+  getClientDetails,
+  getClientsByType,
+  getClientTransactions,
+  updateTransaction,
+  updateTransactionImage,
+} from '../database/clients';
+import { useSelector } from 'react-redux';
+import Modal from 'react-native-modal';
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import { pick } from '@react-native-documents/picker';
+import Sound, {
+  AudioEncoderAndroidType,
+  AudioSourceAndroidType,
+  AVEncoderAudioQualityIOSType,
+  AVEncodingOption,
+  RecordBackType,
+  PlayBackType,
+  createSound,
+} from 'react-native-nitro-sound';
+import LottieView from 'lottie-react-native';
+import {
+  SafeAreaView,
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import { useDispatch } from 'react-redux';
+import Contacts from 'react-native-contacts';
+import {
+  CLIENT_DETAILS,
+  STATUS_BAR_COLOR,
+} from '../redux/reducers/client/client_types';
+import { CountryPhoneInput, FloatingInput, User } from '../components';
+import { addItemDetails, updateItemQty } from '../database/stock';
+
+const CustomStatusBar = () => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={{ height: insets.top, backgroundColor: 'red' }}>
+      <StatusBar
+        translucent
+        backgroundColor={COLORS.primaryColor}
+        barStyle="light-content"
+      />
+    </View>
+  );
+};
 
 export default function Entry({ navigation, route }) {
+  const animationRef = useRef(null);
+  const insets = useSafeAreaInsets();
+  const dispatch = useDispatch();
+
+  const ClientDetails = useSelector((state) => state.client.client_details);
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const clients = useSelector((state) => state.client.home_customers);
+  const suppliers = useSelector((state) => state.client.home_suppliers);
 
+  const type = route?.params?.type;
+  const item = route?.params?.item;
+  const pay_type = route?.params?.pay_type;
+  const amount = route?.params?.amount;
+  const mainColor = type;
 
-    const ClientDetails = useSelector(state => state.client.client_details);
-    const type = route?.params?.type;
-    const mainColor = type;
+  const [input, setInput] = useState(''); // only the current number
+  const [history, setHistory] = useState(''); // full expression
+  const [result, setResult] = useState('0'); // live evaluated result
+  const [CalculatorErr, setCalculatorErr] = useState('');
+  const [HeaderValue, setHeaderValue] = useState('0');
+  const [memory, setMemory] = useState([]);
+  const [Notes, setNotes] = useState('');
+  const [date, setDate] = useState(new Date());
+  const [showPicker, setShowPicker] = useState(false);
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [time, setTime] = useState(new Date());
+  const [MergedDate, setMergedDate] = useState('');
+  const [SuccessModal, setSuccessModal] = useState(false);
 
-    const [input, setInput] = useState('');
-    const [memory, setMemory] = useState(null);
-    const [Notes, setNotes] = useState("");
-    const [date, setDate] = useState(new Date());
-    const [time, setTime] = useState(new Date());
-    const [MergedDate, setMergedDate] = useState("");
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [attachments, setAttachments] = useState([]);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [IsSoundModal, setIsSoundModal] = useState(false);
+  const [RecordingTime, setRecordingTime] = useState('');
+  const [IsPlaying, setIsPlaying] = useState(false);
+  const [AudioFile, setAudioFile] = useState('');
+  const [PlayLoading, setPlayLoading] = useState(false);
+  const [BillNo, setBillNo] = useState('');
+  const [SelectedItems, setSelectedItems] = useState([]);
+  const [totalAmount, setTotalAmount] = useState(0);
+  const [Amount, setAmount] = useState('');
+  const [IsCash, setIsCash] = useState(false);
 
-    const [isModalVisible, setIsModalVisible] = useState(false);
-    const [attachments, setAttachments] = useState([]); // {type, uri, name}
+  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('');
 
+  // ✅ Add file in state (max 3)
+  const addAttachment = (file) => {
+    if (attachments.length >= 3) {
+      alert('You can only attach up to 3 files.');
+      return;
+    }
+    setAttachments([...attachments, file]);
+  };
 
-    // ✅ Add file in state (max 3)
-    const addAttachment = (file) => {
-        if (attachments.length >= 3) {
-            alert("You can only attach up to 3 files.");
-            return;
+  // ✅ Gallery
+  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);
+  };
+
+  // ✅ Camera with permission
+  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',
         }
-        setAttachments([...attachments, file]);
-    };
+      );
 
-    // ✅ Gallery
-    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);
+      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',
+          });
         }
-        setIsModalVisible(false);
+      } else {
+        alert('Camera permission denied');
+      }
+    } catch (err) {
+      console.log('Camera Error:', err);
+    }
+    setIsModalVisible(false);
+  };
+
+  // ✅ PDF Picker (using @react-native-documents/picker)
+  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));
+  };
+
+  // Calculator buttons
+  const buttons = [
+    ['AC', 'M+', 'M-', 'MR'],
+    ['%', '÷', 'x', '-'],
+    ['7', '8', '9', '+'],
+    ['4', '5', '6', '='],
+    ['1', '2', '3', '⌫'],
+    ['0', '.'],
+  ];
+
+  const operators = ['+', '-', '*', '/', 'x', '÷', '%'];
+
+  const handlePress = (key) => {
+    const limit = 9;
+    const currHist = history || '';
+    const currInput = input || '';
+
+    // --- helpers ---
+    const roundTo3 = (num) => Math.round(num * 1000) / 1000;
+
+    const evaluateLeftToRight = (expr) => {
+      if (!expr) return 0;
+      expr = expr.replace(/x/g, '*').replace(/÷/g, '/').replace(/%/g, '/100');
+      const tokens = expr.match(/(\d+(\.\d+)?|[+\-*/])/g);
+      if (!tokens) return 0;
+
+      let result = parseFloat(tokens[0]);
+      for (let i = 1; i < tokens.length; i += 2) {
+        const op = tokens[i];
+        const num = parseFloat(tokens[i + 1]);
+        if (isNaN(num)) return null;
+        if (op === '+') result += num;
+        else if (op === '-') result -= num;
+        else if (op === '*') result *= num;
+        else if (op === '/') result /= num;
+      }
+      return roundTo3(result);
     };
 
-    // ✅ Camera with permission
-    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"
-                }
-            );
+    const isOperator = (ch) => operators.includes(ch);
 
-            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 getLastNumber = (hist) => {
+      if (!hist) return '';
+      const parts = hist.split(/[\+\-\*\/x÷]/);
+      return parts[parts.length - 1] || '';
     };
 
-    // ✅ PDF Picker (using @react-native-documents/picker)
-    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 setSafeValues = (resValue, newHist = null, inputVal = null) => {
+      if (resValue < 0) {
+        setCalculatorErr && setCalculatorErr('Invalid Amount');
+        return;
+      }
+      setResult(resValue.toString());
+      if (newHist !== null) setHistory(newHist);
+      if (inputVal !== null) setInput(inputVal);
+      setCalculatorErr && setCalculatorErr('');
     };
 
-    const removeAttachment = (index) => {
-        setAttachments(attachments.filter((_, i) => i !== index));
+    // --- AC ---
+    if (key === 'AC') {
+      setInput('');
+      setHistory('');
+      setResult('0');
+      setMemory([])
+      setCalculatorErr && setCalculatorErr('');
+      return;
+    }
+
+    // --- BACKSPACE ---
+    if (key === '⌫') {
+      if (!currHist) return;
+      const newHist = currHist.slice(0, -1);
+      setHistory(newHist);
+
+      if (newHist && isOperator(newHist.slice(-1))) {
+        const beforeOp = newHist.slice(0, -1);
+        const res = evaluateLeftToRight(beforeOp);
+        const displayNum = !isNaN(res) ? res.toString() : getLastNumber(newHist) || '';
+        setSafeValues(res, newHist, displayNum + newHist.slice(-1));
+      } else {
+        const last = getLastNumber(newHist);
+        const res = newHist && !isOperator(newHist.slice(-1)) ? evaluateLeftToRight(newHist) : 0;
+        setSafeValues(res, newHist, last);
+      }
+      return;
+    }
+
+    // --- EQUAL ---
+    if (key === '=') {
+      if (!currHist) return;
+      let exprToEval = currHist.endsWith('=') ? currHist.slice(0, -1) : currHist;
+      if (exprToEval && isOperator(exprToEval.slice(-1))) {
+        exprToEval = exprToEval.slice(0, -1);
+      }
+      if (!exprToEval) return;
+      const res = evaluateLeftToRight(exprToEval);
+      if (res === null || isNaN(res)) {
+        setInput('');
+        setHistory('');
+        setResult('Error');
+      } else {
+        setSafeValues(res, exprToEval + '=', res.toString());
+      }
+      return;
+    }
+
+    // --- OPERATOR ---
+    if (isOperator(key)) {
+      if (!currHist && !currInput) return;
+
+      // --- Handle after '=' ---
+      if (currHist.endsWith('=')) {
+        const base = currInput || currHist.slice(0, -1);
+        if (typeof checkMaxValue === 'function' && checkMaxValue(base)) return;
+
+        const newHist = base + key;
+        const res = evaluateLeftToRight(base);
+        setSafeValues(res, newHist, base + key);
+        return;
+      }
+
+      // --- Replace operator ---
+      if (currHist && isOperator(currHist.slice(-1))) {
+        const newHist = currHist.slice(0, -1) + key;
+        const exprForRes = newHist.slice(0, -1);
+        const res = evaluateLeftToRight(exprForRes);
+        setSafeValues(res, newHist, (currInput && isOperator(currInput.slice(-1)) ? currInput.slice(0, -1) : res.toString()) + key);
+        return;
+      }
+
+      // --- Percentage ---
+      if (key === '%') {
+        const lastNum = getLastNumber(currHist);
+        if (!lastNum) return;
+        if (parseFloat(lastNum) < 1 && lastNum.includes('.')) return;
+
+        const percentValue = parseFloat(lastNum) / 100;
+        const newHist = currHist.slice(0, currHist.length - lastNum.length) + percentValue;
+        const res = evaluateLeftToRight(newHist);
+        setSafeValues(res, newHist, percentValue.toString());
+        return;
+      }
+
+      // --- Normal operator handling ---
+      const newHist = currHist + key;
+      const res = evaluateLeftToRight(currHist);
+      setSafeValues(res, newHist, res.toString() + key);
+      return;
+    }
+
+    // --- NUMBER / DOT ---
+    if (key === '.') {
+      const lastNum = getLastNumber(currHist);
+      if (!lastNum) return;
+      if (lastNum.includes('.')) return;
+    }
+
+    if (key === '0') {
+      const lastNum = getLastNumber(currHist);
+      if (!lastNum) return;
+      if (lastNum === '0') return;
+    }
+
+    if (key === 'M+' || key === 'M-') {
+
+      if (!currInput && (!result || result === '0')) return;
+
+      let exprToEval = currHist.endsWith('=') ? currHist.slice(0, -1) : currHist;
+
+      if (!exprToEval && currInput) {
+        exprToEval = currInput;
+      } else if (!exprToEval && result && result !== '0') {
+        exprToEval = result;
+      }
+
+      if (!exprToEval) return;
+
+      if (exprToEval && isOperator(exprToEval.slice(-1))) {
+        exprToEval = exprToEval.slice(0, -1);
+      }
+
+      const res = evaluateLeftToRight(exprToEval);
+      if (res === null || isNaN(res)) return;
+
+      const valueToStore = key === 'M+' ? res : -res;
+      setMemory(prev => [...prev, valueToStore]);
+      return;
+    }
+
+
+    const lastNum = getLastNumber(currHist);
+    if (lastNum.length >= limit) return;
+
+    const newHist = currHist + key;
+    const newLastNum = getLastNumber(newHist);
+    const res = evaluateLeftToRight(newHist);
+    setSafeValues(res, newHist, newLastNum.slice(0, limit));
+  };
+
+  const handleBackspace = () => {
+    const maxValue = 999999999;
+    const limit = 9;
+
+    const roundTo3 = (num) => Math.round(num * 1000) / 1000;
+
+    const evaluateLeftToRight = (expr) => {
+      expr = expr.replace(/x/g, '*').replace(/÷/g, '/').replace(/%/g, '/100');
+      const tokens = expr.match(/(\d+(\.\d+)?|[+\-*/])/g);
+      if (!tokens) return 0;
+
+      let result = parseFloat(tokens[0]);
+      for (let i = 1; i < tokens.length; i += 2) {
+        const op = tokens[i];
+        const num = parseFloat(tokens[i + 1]);
+        if (op === '+') result += num;
+        else if (op === '-') result -= num;
+        else if (op === '*') result *= num;
+        else if (op === '/') result /= num;
+      }
+
+      result = roundTo3(result);
+
+      if (result > maxValue) {
+        setCalculatorErr('Invalid Amount');
+        return null;
+      }
+      return result;
     };
 
-    // Calculator buttons
-    const buttons = [
-        ['AC', 'M+', 'M-', 'MR'],
-        ['%', '÷', 'x', '-'],
-        ['7', '8', '9', '+'],
-        ['4', '5', '6', '='],
-        ['1', '2', '3', '↵'],
-        ['0', '.']
-    ];
-
-    const handlePress = (key) => {
-        if (key === 'AC') {
-            setInput('');
-            setMemory(null);
-        } else if (key === 'M+') {
-            if (input) setMemory(Number(input));
-        } else if (key === 'M-') {
-            setMemory(null);
-        } else if (key === 'MR') {
-            if (memory !== null) setInput(prev => prev + memory.toString());
-        } else if (key === '=') {
+    // current state
+    const currHist = history || '';
+    if (!currHist) return;
+
+    // 🔹 remove the last char from history
+    const newHist = currHist.slice(0, -1);
+
+    // 🔹 find last operator and rebuild current input segment
+    const lastOpIndex = Math.max(
+      newHist.lastIndexOf('+'),
+      newHist.lastIndexOf('-'),
+      newHist.lastIndexOf('*'),
+      newHist.lastIndexOf('/'),
+      newHist.lastIndexOf('x'),
+      newHist.lastIndexOf('÷'),
+      newHist.lastIndexOf('%')
+    );
+
+    // 🔹 new input segment (after the last operator)
+    const newInputSegment =
+      lastOpIndex === -1 ? newHist : newHist.slice(lastOpIndex + 1);
+
+    setHistory(newHist);
+    setInput(newInputSegment);
+
+    // ✅ prepare expression for evaluation:
+    // if last char is operator, drop it before evaluating
+    let exprForEval = newHist;
+    if (exprForEval && operators.includes(exprForEval.slice(-1))) {
+      exprForEval = exprForEval.slice(0, -1);
+    }
+
+    // 🔹 update live result
+    if (exprForEval) {
+      const res = evaluateLeftToRight(exprForEval);
+
+      // ✅ set result and also update input to evaluated result
+      setResult(res !== null ? res.toString().slice(0, limit) : '0');
+      setInput(res !== null ? res.toString().slice(0, limit) : '0');
+    } else {
+      setResult('0');
+    }
+
+    setCalculatorErr('');
+  };
+
+  const onChangeDate = (event, selectedDate) => {
+    const currentDate = selectedDate || date;
+    setShowPicker(Platform.OS === 'ios'); // for iOS
+    setDate(currentDate);
+  };
+
+  const onChangeTime = (event, selectedDate) => {
+    const currentDate = selectedDate;
+    setShowTimePicker(Platform.OS === 'ios');
+    setTime(currentDate);
+  };
+
+  const showDate = () => {
+    if (Platform.OS === 'android') {
+      // Android dialog
+      DateTimePickerAndroid.open({
+        value: date,
+        onChange: onChangeDate,
+        mode: 'date',
+        is24Hour: false,
+      });
+    } else {
+      // iOS: just show inline picker
+      setShowPicker(true);
+    }
+  };
+
+  const showTime = () => {
+    if (Platform.OS === 'android') {
+      // Android dialog
+      DateTimePickerAndroid.open({
+        value: time,
+        onChange: onChangeTime,
+        mode: 'time',
+        is24Hour: false,
+      });
+    } else {
+      // iOS: show inline picker
+      setShowTimePicker(true);
+    }
+  };
+
+  const onSave = () => {
+    try {
+      const finalValue = Number(result);
+
+      // ✅ Validate number
+      if (
+        !finalValue ||
+        !isFinite(finalValue) ||
+        finalValue <= 0 ||
+        finalValue > 999999999 ||
+        CalculatorErr ||
+        CalculatorErr != ''
+      ) {
+        console.log('Invalid or non-positive result, not saving');
+        return;
+      }
+
+      const amountToSave = finalValue;
+      const creditLimit = Number(ClientDetails?.credit_limit || 0);
+
+      if (
+        (pay_type === 'receivable' || pay_type === undefined || pay_type == "none") &&
+        mainColor === 'red' &&
+        creditLimit > 0 &&
+        Number(amountToSave) + Number(amount) > creditLimit
+      ) {
+        Alert.alert(
+          'Credit Limit Warning',
+          `The customer balance will be greater than the assigned credit limit of Rs ${creditLimit}.\nAre you sure you want to continue?`,
+          [
+            { text: 'No', style: 'cancel' },
+            { text: 'Yes', onPress: () => saveTransaction(amountToSave) },
+          ],
+          { cancelable: true }
+        );
+      }
+      else {
+        saveTransaction(amountToSave);
+      }
+    } catch (err) {
+      console.log('Calculation Error:', err);
+    }
+  };
+
+  const saveTransaction = (finalValue) => {
+    addTransaction(
+      ClientDetails.id,
+      mainColor === 'red' ? String(finalValue) : '0', // red = debit
+      mainColor === 'green' ? String(finalValue) : '0', // green = credit
+      Notes + `_bill_${BillNo}`,
+      mergeDateTime({ date, time }),
+      AudioFile,
+      null,
+      SelectedItems?.length > 0 ? JSON.stringify(SelectedItems) : ''
+    )
+      .then(async (res) => {
+        console.log(res, 'Transaction Success');
+        const trxId = res.insertId; // ✅ new transaction ID
+
+        // If there are attachments, insert them
+        if (attachments && attachments.length > 0) {
+          for (const file of attachments) {
             try {
-                const expression = input
-                    .replace(/x/g, '*')
-                    .replace(/÷/g, '/')
-                    .replace(/%/g, '/100');
-                const result = eval(expression);
-                setInput(result.toString());
+              await addTransactionImages(trxId, file.uri);
+              console.log(`Attachment added: ${file.name}`);
             } catch (err) {
-                setInput('Error');
+              console.log('Attachment insert error:', err);
             }
-        } else if (key === '↵') {
-            Keyboard.dismiss();
-        } else {
-            setInput(prev => prev + key);
+          }
         }
-    };
 
-    const handleBackspace = () => {
-        setInput(prev => prev.slice(0, -1));
-    };
+        if (SelectedItems) {
+          const parsedItems = SelectedItems;
 
-    const onChangeDate = (event, selectedDate) => {
-        const currentDate = selectedDate;
-        setDate(currentDate);
-    };
+          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
+                Notes, // Details
+                AudioFile, // AudioFile
+                fromJsDateToSql(date), // date
+                selectBusiness // selectBusiness
+              );
+            })
+          );
+        }
 
-    const onChangeTime = (event, selectedDate) => {
-        const currentDate = selectedDate;
-        setTime(currentDate);
-    };
+        // ✅ Reset form
+        setInput('');
+        setMemory([]);
+        setNotes('');
+        setDate(new Date());
+        setTime(new Date());
+        setMergedDate('');
+        setAttachments([]);
 
-    const showDate = (currentMode) => {
-        DateTimePickerAndroid.open({
-            value: date,
-            onChange: onChangeDate,
-            mode: "date",
-            is24Hour: false,
-        });
+        let clients = await getClientsByType(
+          ClientDetails?.type,
+          null,
+          null,
+          selectBusiness?.id
+        );
+        let filteredClient = clients.find((c) => c.id === ClientDetails.id);
+
+        let amount =
+          filteredClient?.total_subamount - filteredClient?.total_amount;
+        let type = 'none';
+        if (amount > 0) type = 'payable';
+        else if (amount < 0) type = 'receivable';
+
+        filteredClient = {
+          ...filteredClient,
+          amount: Math.abs(amount),
+          pay_type: type,
+        };
+
+        setSuccessModal(true);
+
+        setTimeout(() => {
+          setSuccessModal(false);
+
+          // now after 4 seconds go back
+          route.params?.onGoBack(filteredClient); // send data back
+          navigation.goBack();
+        }, 2000);
+      })
+      .catch((err) => {
+        console.log(err, 'Transaction Error');
+      });
+  };
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardVisible(true);
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardVisible(false);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
     };
+  }, []);
+
+  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 showTime = (currentMode) => {
-        DateTimePickerAndroid.open({
-            value: time,
-            onChange: onChangeTime,
-            mode: "time",
-            is24Hour: false,
+  useEffect(() => {
+    dispatch({
+      type: STATUS_BAR_COLOR,
+      color: mainColor == "red" ? COLORS.redColor : COLORS.greenColor,
+    });
+    if (item) {
+      let arr = [];
+      item?.attachments?.map((i, index) => {
+        arr.push({
+          name: `pdf-test-${index + 1}.pdf`,
+          type: isPdfFile(i?.local_path) ? 'pdf' : 'image',
+          uri: i?.local_path,
+          attachment_id: i?.id,
         });
-    };
+      });
+
+      const value =
+        item?.amount === '0'
+          ? item?.subamount.toString()
+          : item?.amount.toString();
+
+      setInput(value);
+      setResult(value);
+      setHistory(value);
+
+      setAudioFile(item?.local_path);
+      setDate(new Date(toISOStringUTC(item?.date)));
+      setTime(new Date(toISOStringUTC(item?.date)));
+      setNotes(item?.notes?.split('_')[0]);
+      setBillNo(item?.notes?.split('_')[2]);
+      setAttachments(arr);
+      setSelectedItems(item?.items ? JSON.parse(item?.items) : []);
+    }
+  }, []);
+
+  const onUpdate = () => {
+    try {
+      // Use the calculated result directly
+      let finalValue = Number(result);
+
+      // ✅ Check if result is valid, finite, and positive
+      if (
+        typeof finalValue !== 'number' ||
+        !isFinite(finalValue) ||
+        finalValue <= 0
+      ) {
+        console.log('Invalid or non-positive result, not updating');
+        return;
+      }
+
+      const amountToSave = finalValue;
+      const creditLimit = Number(ClientDetails?.credit_limit || 0);
+      const currentBalance = Math.abs(item?.balance || 0);
+
+      const proceedUpdate = () => {
+        updateTransaction(
+          item?.id,
+          ClientDetails.id,
+          type === 'red' ? String(amountToSave) : '0',
+          type === 'green' ? String(amountToSave) : '0',
+          Notes + `_bill_${BillNo}`,
+          mergeDateTime({ date, time }),
+          AudioFile,
+          SelectedItems?.length > 0 ? JSON.stringify(SelectedItems) : ''
+        )
+          .then(async (res) => {
+            console.log(res, 'Transaction Update Success');
+            const trxId = item?.id;
+
+            // Handle attachments
+            if (attachments?.length > 0) {
+              try {
+                await deleteTransactionImagesByTrxId(trxId);
+                console.log(`Previous attachments deleted for trxId: ${trxId}`);
+              } catch (err) {
+                console.log('Error deleting attachments:', err);
+              }
 
-    const onSave = () => {
-        try {
-            let finalValue = input;
-
-            if (input) {
-                // Replace calculator symbols with JS operators
-                const expression = input
-                    .replace(/x/g, "*")
-                    .replace(/÷/g, "/")
-                    .replace(/%/g, "/100");
-
-                let result = eval(expression);
-
-                // ✅ Ensure result is a valid finite number
-                if (typeof result === "number" && isFinite(result)) {
-                    finalValue = result.toString();
-                } else {
-                    console.log("Invalid result, not saving");
-                    return; // stop here
+              for (const file of attachments) {
+                if (file?.uri) {
+                  try {
+                    await addTransactionImages(trxId, file.uri);
+                    console.log(`Attachment added: ${file.name || file.uri}`);
+                  } catch (err) {
+                    console.log('Attachment insert error:', err);
+                  }
                 }
+              }
             } else {
-                console.log("Empty input, not saving");
-                return;
+              try {
+                await deleteTransactionImagesByTrxId(trxId);
+                console.log(`No attachments — all deleted for trxId: ${trxId}`);
+              } catch (err) {
+                console.log('Error deleting attachments:', err);
+              }
             }
 
-            addTransaction(
-                ClientDetails.id,
-                type == "red" ? finalValue : 0,
-                type == "green" ? finalValue : 0,
-                Notes,
-                mergeDateTime({ date, time }),
-                ""
-            )
-                .then(async (res) => {
-                    console.log(res, "Transaction Success");
-                    const trxId = res.insertId; // ✅ new transaction ID
-
-                    // If there are attachments, insert them
-                    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);
-                            }
-                        }
-                    }
+            // Reset form
+            setInput('');
+            setMemory([]);
+            setNotes('');
+            setDate(new Date());
+            setTime(new Date());
+            setMergedDate('');
+            setAttachments([]);
 
-                    // ✅ Reset form
-                    setInput("");
-                    setMemory("");
-                    setNotes("");
-                    setDate(new Date());
-                    setTime(new Date());
-                    setMergedDate("");
-                    setAttachments([]);
-                    navigation?.navigate("HomeScreen", { screen: ClientDetails.type == 0 ? "Customers" : "Suppliers" });
-                })
-                .catch((err) => {
-                    console.log(err, "Transaction Error");
-                });
-        } catch (err) {
-            console.log("Calculation Error:", err);
+            const transactions = await getClientTransactions(ClientDetails?.id);
+            let balance = 0;
+            const reversed = [...transactions].reverse();
+            const withBalances = reversed.map((t) => {
+              const amount = parseFloat(t.amount) || 0;
+              const subamount = parseFloat(t.subamount) || 0;
+              balance += subamount - amount;
+              return { ...t, balance };
+            });
+
+            const filteredTransaction = withBalances.find(
+              (t) => t.id === item?.id
+            );
+
+            setSuccessModal(true);
+
+            setTimeout(() => {
+              setSuccessModal(false);
+              route.params?.onGoBack({ ...filteredTransaction, balance });
+              navigation.goBack();
+            }, 2000);
+          })
+          .catch((err) => console.log(err, 'Transaction Error'));
+      };
+
+      // ✅ Show credit limit popup if needed
+      if (
+        pay_type === 'payable' &&
+        mainColor === 'red' &&
+        creditLimit !== 0 &&
+        amountToSave + currentBalance > creditLimit
+      ) {
+        Alert.alert(
+          'Credit Limit Warning',
+          `The customer balance will be greater than assigned credit limit Rs ${creditLimit}.\nAre you sure you want to continue?`,
+          [
+            { text: 'No', style: 'cancel' },
+            { text: 'Yes', onPress: proceedUpdate },
+          ],
+          { cancelable: true }
+        );
+      } else {
+        proceedUpdate();
+      }
+    } catch (err) {
+      console.log('Calculation Error:', err);
+    }
+  };
+
+  useEffect(() => {
+    const maxValue = 999999999;
+
+    const numResult = Number(result);
+
+    // ✅ Only treat input as a number if it’s purely numeric (or decimal)
+    const isInputNumeric = /^-?\d*\.?\d+$/.test(input); // matches numbers like 123, -45.6
+    const numInput = isInputNumeric ? Number(input) : null;
+
+    // ✅ check for invalid conditions:
+    // 1. result > maxValue or Infinity
+    // 2. input > maxValue or Infinity (only if numeric)
+    if (
+      !isFinite(numResult) || // catches Infinity & NaN in result
+      numResult > maxValue ||
+      (numInput !== null && (!isFinite(numInput) || numInput > maxValue))
+    ) {
+      setCalculatorErr('Invalid Amount');
+    } else {
+      // clear error if values go back to normal
+      setCalculatorErr('');
+    }
+  }, [input, result, history]);
+
+  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);
+    }
+  };
+
+  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;
+      }
+    }
+  };
+
+  const filteredContacts = contacts.filter((item) => {
+    const name = item?.displayName?.toLowerCase() || '';
+    const rawNumber = item?.phoneNumbers?.[0]?.number || '';
+    const formattedNumber = formatPhoneNumber(rawNumber)?.toLowerCase() || '';
+
+    const searchLower = searchText.toLowerCase();
+
+    // Exclude if number matches ClientDetails.phone
+    const clientPhone = ClientDetails?.phone?.toLowerCase() || '';
+
+    // Optional: mapped client type (if needed)
+    const clientType = clientPhoneMap.get(formattedNumber);
+
+    // Skip this contact if it’s the same as ClientDetails
+    if (formattedNumber === clientPhone) return false;
 
+    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();
 
+    const clientPhone = ClientDetails?.phone?.toLowerCase() || '';
 
+    // Skip if phone matches ClientDetails.phone
+    if (phone === clientPhone) return false;
 
-    return (
-        <View style={Styles._mainContainers}>
-            <LinearGradient
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 0 }}
-                colors={[mainColor == "green" ? "darkgreen" : "darkred", mainColor]}
-                style={Styles._linearGradient}
+    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];
+
+    console.log({ normalizedPhone })
+
+    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(() => {
+    if (SelectedParty) {
+      setIsCash(false)
+    }
+  }, [SelectedParty])
+
+
+  const memorySum = (Array.isArray(memory) ? memory : []).reduce((acc, val) => acc + val, 0);
+
+
+
+  return (
+    <View style={Styles._mainContainers}>
+      <LinearGradient
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[mainColor == "red" ? COLORS.redColor : COLORS.greenColor, mainColor == "red" ? COLORS.redColor : COLORS.greenColor]}
+        style={Styles._linearGradient}
+      >
+        <View style={Styles._titleMain}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={{ padding: 5 }}
+            onPress={() => {
+              navigation.goBack();
+            }}
+          >
+            <Ionicons
+              name={'chevron-back'}
+              color={COLORS.whiteColor}
+              size={60 / PixelRatio.get()}
+            />
+          </TouchableOpacity>
+          {ClientDetails.type == 0 ? (
+            <Text numberOfLines={1} style={[Styles._title, { width: '90%' }]}>
+              You {mainColor == 'green' ? 'Got' : 'Gave'} Rs{' '}
+              {!isNaN(result) && isFinite(result) && result >= 0
+                ? addCommas(Number(result))
+                : 0}
+              {mainColor == 'green' ? ' from' : ' to'} {ClientDetails?.name}
+            </Text>
+          ) : ClientDetails?.type == 1 ? (
+            <Text numberOfLines={1} style={Styles._title}>
+              {mainColor == 'green' ? 'Purchase' : 'Payment'} of Rs{' '}
+              {!isNaN(result) && isFinite(result) && result >= 0
+                ? addCommas(Number(result))
+                : 0}{' '}
+              {mainColor == 'green' ? 'from' : ' to'} {ClientDetails?.name}
+            </Text>
+          ) : (
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[Styles._title, { width: '85%' }]} // fixed width + same styling
+            >
+              {ClientDetails?.phone} - {mainColor == 'red' ? 'In' : 'Out'}
+            </Text>
+          )}
+        </View>
+      </LinearGradient>
+
+      <View style={Styles._contentMain}>
+        <View style={{ width: '100%', alignItems: 'center', gap: 12 }}>
+          <ScrollView
+            contentContainerStyle={Styles._scrollMain}
+          // style={{ paddingBottom:1000 }}
+          >
+            {/* Input with backspace */}
+            <TouchableOpacity
+              style={Styles._inputMain}
+              activeOpacity={0.8}
+              onPress={() => Keyboard.dismiss()}
             >
-                <View style={Styles._titleMain}>
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 14,
+                  opacity: 0.6,
+                }}
+              >
+                Rs
+              </Text>
+              <TextInput
+                placeholder=""
+                style={[
+                  Styles._input,
+                  {
+                    color: mainColor == "red" ? COLORS.redColor : COLORS.greenColor,
+                  },
+                ]}
+                placeholderTextColor={COLORS.grey}
+                cursorColor={COLORS.primaryColor}
+                value={input}
+                editable={false}
+                onFocus={() => Keyboard.dismiss()}
+                maxLength={9}
+              />
+              <TouchableOpacity onPress={handleBackspace}>
+                <Text
+                  style={{ fontSize: 18, color: '#555', paddingHorizontal: 8 }}
+                >
+                  ⌫
+                </Text>
+              </TouchableOpacity>
+            </TouchableOpacity>
+
+            {(
+              (result && result !== null && result != 0 && history && (() => {
+                const lastOpIndex = Math.max(
+                  history.lastIndexOf('+'),
+                  history.lastIndexOf('-'),
+                  history.lastIndexOf('*'),
+                  history.lastIndexOf('/'),
+                  history.lastIndexOf('x'),
+                  history.lastIndexOf('÷'),
+                  history.lastIndexOf('%')
+                );
+                return lastOpIndex !== -1; // show if there's at least one operator
+              })()) || (memory && memory.length > 0)
+            ) && (
+                <View
+                  style={[
+                    Styles._memoryDisplay,
+                    {
+                      paddingRight: 15,
+                      paddingLeft: 15,
+                      minHeight: 60,
+                      height: "auto"
+                    },
+                  ]}
+                >
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      width: "100%",
+                      paddingVertical: 5,
+                      borderColor: COLORS.darkGrey,
+                      borderBottomWidth: 0.7
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: COLORS.darkGrey,
+                        fontFamily: FONT_NORMAL,
+                        fontSize: 11,
+                        width: '60%',
+                      }}
+                    >
+                      {history}
+                    </Text>
+                    <Text
+                      style={{
+                        color: COLORS.darkGrey,
+                        fontFamily: FONT_NORMAL,
+                        fontSize: 11,
+                      }}
+                    >
+                      ={result}
+                    </Text>
+                  </View>
+
+                  {memory?.map((mem, index) => (
+                    <Text
+                      style={{
+                        color: COLORS.darkGrey,
+                        fontFamily: FONT_NORMAL,
+                        fontSize: 11,
+                        width: '60%',
+                        marginTop: 5
+                      }}
+                      key={index}
+                    >
+                      (M) = {mem}
+                    </Text>
+                  ))}
+                </View>
+              )}
+
+            {CalculatorErr && CalculatorErr !== null && (
+              <View
+                style={[
+                  Styles._memoryDisplay,
+                  { borderColor: COLORS.redColor },
+                ]}
+              >
+                <Text
+                  style={[
+                    Styles._memoryText,
+                    {
+                      fontFamily: FONT_MEDIUM,
+                      color: COLORS.redColor,
+                      fontSize: 13,
+                    },
+                  ]}
+                >
+                  {CalculatorErr}
+                </Text>
+              </View>
+            )}
+
+            {/* Attach Voice Note */}
+            <TouchableOpacity
+              style={[Styles._inputMain, { paddingHorizontal: 12 }]}
+              activeOpacity={0.8}
+              onPress={() => {
+                !AudioFile && askAudioPermission();
+              }}
+            >
+              {AudioFile ? (
+                <>
+                  {PlayLoading ? (
+                    <ActivityIndicator
+                      color={mainColor == 'red' ? COLORS.redColor : COLORS.greenColor}
+                      size={'small'}
+                      animating
+                    />
+                  ) : (
                     <TouchableOpacity
-                        activeOpacity={0.8}
-                        onPress={() => { navigation.goBack() }}
+                      activeOpacity={0.8}
+                      onPress={() => {
+                        if (IsPlaying) {
+                          Sound.stopPlayer();
+                          Sound.removePlayBackListener();
+                          Sound.removePlaybackEndListener();
+                          setIsPlaying(false);
+                          animationRef.current?.pause();
+                        } else {
+                          onStartPlay(AudioFile);
+                        }
+                      }}
                     >
-                        <Ionicons
-                            name={"chevron-back"}
-                            color={COLORS.whiteColor}
-                            size={20}
-                        />
+                      <Ionicons
+                        color={mainColor == 'red' ? COLORS.redColor : COLORS.greenColor}
+                        size={22}
+                        name={IsPlaying ? 'pause' : 'play'}
+                      />
                     </TouchableOpacity>
-                    {
-                        ClientDetails.type == 0 ?
-                            (<Text style={Styles._title}>You {mainColor == "green" ? "Got" : "Gave"} Rs {input} {mainColor == "green" ? "from" : "to"} {ClientDetails?.name}</Text>) :
-                            (<Text style={Styles._title}>{mainColor == "green" ? "Purchase" : "Payment"} of Rs {input} {mainColor == "green" ? "from" : "to"} {ClientDetails?.name}</Text>)
-                    }
-                </View>
-            </LinearGradient>
+                  )}
+
+                  <LottieView
+                    source={require('../assets/animations/voice_visualization.json')}
+                    autoPlay={false}
+                    loop
+                    style={{ width: '80%', height: 42 }}
+                    ref={animationRef}
+                  />
+
+                  <TouchableOpacity
+                    activeOpacity={0.8}
+                    onPress={async () => {
+                      try {
+                        await onPauseRecord();
+                        setAudioFile('');
+                        setIsPlaying(false);
+                      } catch (err) {
+                        console.error(
+                          'Error stopping audio before clearing:',
+                          err
+                        );
+                      }
+                    }}
+                  >
+                    <Ionicons
+                      color={mainColor == 'red' ? COLORS.redColor : COLORS.greenColor}
+                      size={22}
+                      name={'close'}
+                    />
+                  </TouchableOpacity>
+                </>
+              ) : (
+                <>
+                  <Text
+                    style={{
+                      color: mainColor == 'red' ? COLORS.redColor : COLORS.greenColor,
+                      fontSize: 13,
+                      fontFamily: FONT_MEDIUM,
+                    }}
+                  >
+                    Attach Voice Note
+                  </Text>
+                  <Ionicons
+                    name={'mic-outline'}
+                    color={mainColor == 'red' ? COLORS.redColor : COLORS.greenColor}
+                    size={22}
+                  />
+                </>
+              )}
+            </TouchableOpacity>
 
-            <View style={Styles._contentMain}>
-                <View style={{ width: "100%", alignItems: "center", gap: 12 }}>
-                    <ScrollView
-                        contentContainerStyle={Styles._scrollMain}
-                        style={{ height: Platform.OS == "ios" ? 200 : Dimensions.get("screen").height - HP(74) }}
+            {/*Add Items */}
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={[Styles._inputMain, { paddingHorizontal: 12 }]}
+              // style={Styles._textInputParty}
+              onPress={() => {
+                navigation.navigate('AddItems', {
+                  selectedItems: SelectedItems,
+                  totalAmount: totalAmount,
+                  onSelect: (newSelectedItems, newTotalAmount) => {
+                    setSelectedItems(newSelectedItems);
+                    setTotalAmount(newTotalAmount);
+                    setAmount(String(newTotalAmount));
+                    setInput(String(newTotalAmount));
+                    setResult(String(newTotalAmount));
+                  },
+                });
+              }}
+            >
+              <Text
+                style={[
+                  Styles._inputText,
+                  { color: mainColor == "red" ? COLORS.redColor : COLORS.greenColor, fontFamily: FONT_MEDIUM },
+                ]}
+              >
+                Add Items
+              </Text>
+              <Ionicons
+                name={'chevron-forward'}
+                color={mainColor == "red" ? COLORS.redColor : COLORS.greenColor}
+                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,
+                      }}
                     >
-                        {/* Input with backspace */}
-                        <View style={Styles._inputMain}>
-                            <Text style={{ color: COLORS.blackColor, fontFamily: FONT_NORMAL, fontSize: 14, opacity: 0.6 }}>Rs</Text>
-                            <TextInput
-                                placeholder=''
-                                style={[Styles._input, { color: mainColor }]}
-                                placeholderTextColor={COLORS.grey}
-                                cursorColor={COLORS.primaryColor}
-                                value={input}
-                                editable={false}
-                                onFocus={() => Keyboard.dismiss()}
-                            />
-                            <TouchableOpacity onPress={handleBackspace}>
-                                <Text style={{ fontSize: 18, color: '#555', paddingHorizontal: 8 }}>⌫</Text>
-                            </TouchableOpacity>
-                        </View>
-
-                        {/* Memory display */}
-                        {memory !== null && (
-                            <View style={Styles._memoryDisplay}>
-                                <Text style={Styles._memoryText}>Memory: {memory}</Text>
-                            </View>
+                      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, index) => (
+                  <View key={index} 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>
+            )}
+            {input && (
+              <View style={Styles._hidableMain}>
+                {/* <View style={Styles._hidableRow}> */}
+                <View style={Styles._hidableRow}>
+                  <TouchableOpacity
+                    style={[Styles._cellMains, { width: '49%' }]}
+                  // activeOpacity={0.8}
+                  // onPress={showDate}
+                  >
+                    <FloatingInput
+                      label="Date"
+                      value={date.toDateString()}
+                      editable={false}
+                      placeholder="Select City"
+                      iconName="calendar-outline"
+                      iconPosition="right"
+                      onPress={showDate} // 👈 opens modal
+                      inputStyle={{ fontSize: 11, fontFamily: FONT_MEDIUM }} // 👈 customize font
+                      iconColor={mainColor == 'red' ? COLORS.redColor : COLORS.greenColor}
+                    />
+                  </TouchableOpacity>
+
+                  <TouchableOpacity
+                    style={[Styles._cellMains, { width: '49%' }]}
+                    activeOpacity={0.8}
+                  // onPress={showTime}
+                  >
+                    {/* <Text style={Styles._cellText}>
+                      {time.toLocaleTimeString()}
+                    </Text>
+                    <Ionicons
+                      name={'time-outline'}
+                      color={
+                        mainColor == 'red' ? COLORS.redColor : COLORS.greenColor
+                      }
+                      size={22}
+                    /> */}
+
+                    <FloatingInput
+                      label="Time"
+                      value={time.toLocaleTimeString()}
+                      editable={false}
+                      placeholder="Time"
+                      iconName="time-outline"
+                      iconPosition="right"
+                      onPress={showTime} // 👈 opens modal
+                      inputStyle={{ fontSize: 11, fontFamily: FONT_MEDIUM }} // 👈 customize font
+                      iconColor={mainColor == 'red' ? COLORS.redColor : COLORS.greenColor}
+                    />
+                  </TouchableOpacity>
+                </View>
+                {/* </View> */}
 
-                        {/* Attach Voice Note */}
+                {/* <TextInput
+                  style={Styles._detailMain}
+                  placeholder="Enter Details"
+                  placeholderTextColor={COLORS.grey}
+                  multiline
+                  value={Notes}
+                  onChangeText={(text) => setNotes(text)}
+                  maxLength={300}
+                /> */}
+
+                <View style={{ width: '90%' }}>
+                  <FloatingInput
+                    label="Enter Details"
+                    iconName=""
+                    iconPosition="right"
+                    value={Notes}
+                    onChangeText={(text) => setNotes(text)}
+
+                  // allowedChars={/[^A-Za-z0-9\s]/g}
+                  // maxLength={15}
+                  />
+                </View>
+
+                {/* <TextInput
+                  placeholder="Bill No"
+                  style={Styles._billNoMain}
+                  placeholderTextColor={COLORS.gray}
+                  value={BillNo}
+                  onChangeText={(text) => setBillNo(text)}
+                  maxLength={10}
+                /> */}
+
+                <View style={{ width: '90%' }}>
+                  <FloatingInput
+                    label="Bill No"
+                    iconName=""
+                    iconPosition="right"
+                    value={BillNo}
+                    onChangeText={(text) => setBillNo(text)}
+                  // allowedChars={/[^A-Za-z0-9\s]/g}
+                  // maxLength={15}
+                  />
+                </View>
+
+                {/* Attachments */}
+                <View style={Styles._hidableRow}>
+                  <TouchableOpacity
+                    style={Styles._cellMain}
+                    activeOpacity={0.8}
+                    onPress={() => setIsModalVisible(true)}
+                  >
+                    <Text style={Styles._cellText}>PDF/Photos</Text>
+                    <Ionicons
+                      name={'attach'}
+                      color={mainColor == "red" ? COLORS.redColor : COLORS.greenColor}
+                      size={23}
+                    />
+                  </TouchableOpacity>
+
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      flexWrap: 'wrap',
+                      alignItems: 'center',
+                    }}
+                  >
+                    {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={40}
+                            color={COLORS.primaryColor}
+                          />
+                        )}
+                        {/* delete cross */}
                         <TouchableOpacity
-                            style={[Styles._inputMain, { paddingHorizontal: 12 }]}
-                            activeOpacity={0.8}
+                          onPress={() => removeAttachment(index)}
+                          style={{
+                            position: 'absolute',
+                            top: -5,
+                            right: -5,
+                            backgroundColor: 'white',
+                            borderRadius: 10,
+                            padding: 2,
+                          }}
                         >
-                            <Text style={{ color: mainColor, fontFamily: FONT_NORMAL, fontSize: 12 }}>Attach Voice Note</Text>
-                            <Ionicons
-                                name={"mic-outline"}
-                                color={mainColor}
-                                size={22}
-                            />
+                          <Ionicons
+                            name="close-circle"
+                            size={18}
+                            color={COLORS.redColor}
+                          />
                         </TouchableOpacity>
-                        {
-                            input &&
-                            <View style={Styles._hidableMain}>
-                                <View style={Styles._hidableRow}>
-                                    <TouchableOpacity
-                                        style={Styles._cellMain}
-                                        activeOpacity={0.8}
-                                        onPress={showDate}
-                                    >
-                                        <Ionicons
-                                            name={"calendar-outline"}
-                                            color={mainColor}
-                                            size={22}
-                                        />
-                                        <Text style={Styles._cellText}>{date.toDateString()}</Text>
-                                    </TouchableOpacity>
-
-                                    <TouchableOpacity
-                                        style={Styles._cellMain}
-                                        activeOpacity={0.8}
-                                        onPress={showTime}
-                                    >
-                                        <Ionicons
-                                            name={"time-outline"}
-                                            color={mainColor}
-                                            size={22}
-                                        />
-                                        <Text style={Styles._cellText}>{time.toLocaleTimeString()}</Text>
-                                    </TouchableOpacity>
-                                </View>
-
-                                <TextInput
-                                    style={Styles._detailMain}
-                                    placeholder='Enter Details'
-                                    placeholderTextColor={COLORS.grey}
-                                    multiline
-                                    value={Notes}
-                                    onChangeText={(text) => setNotes(text)}
-                                />
-
-                                {/* Attachments */}
-                                <View style={Styles._hidableRow}>
-                                    <TouchableOpacity
-                                        style={Styles._cellMain}
-                                        activeOpacity={0.8}
-                                        onPress={() => setIsModalVisible(true)}
-                                    >
-                                        <Ionicons name={"attach"} color={mainColor} size={23} />
-                                        <Text style={Styles._cellText}>PDF/Photos</Text>
-                                    </TouchableOpacity>
-
-                                    <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center" }}>
-                                        {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={mainColor} />
-                                                )}
-                                                {/* 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={mainColor} />
-                                                </TouchableOpacity>
-                                            </View>
-                                        ))}
-                                    </View>
-                                </View>
-                            </View>
-                        }
-                    </ScrollView>
+                      </View>
+                    ))}
+                  </View>
+                </View>
 
-                    {/* Save button (non-functional) */}
+                <View style={Styles._hidableRow}>
+                  <View style={[Styles._cellMain, { flexDirection: "row", backgroundColor: COLORS.whiteColor, paddingHorizontal: 0, overflow: "hidden" }]}>
                     <TouchableOpacity
-                        activeOpacity={0.8}
-                        style={[Styles._continueBtn, { backgroundColor: mainColor }]}
-                        onPress={onSave}
+                      activeOpacity={0.8}
+                      onPress={() => setIsCash(true)}
+                      style={{
+                        width: "50%",
+                        height: "100%",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        backgroundColor: IsCash ? COLORS.primaryBase : COLORS.whiteColor
+                      }}
+                    >
+                      <Text style={{ color: COLORS.blackColor, fontFamily: FONT_NORMAL, fontSize: 12 }}>
+                        Cash
+                      </Text>
+                      <View
+                        style={{
+                          position: "absolute",
+                          right: 0,
+                          height: "60%",
+                          width: 1,
+                          backgroundColor: COLORS.darkGrey,
+                        }}
+                      />
+                    </TouchableOpacity>
+
+                    <TouchableOpacity
+                      activeOpacity={0.8}
+                      style={{
+                        width: "50%",
+                        height: "100%",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        backgroundColor: SelectedParty ? COLORS.primaryBase : COLORS.whiteColor
+                      }}
+                      onPress={onPartyPress}
                     >
-                        <Text style={Styles._continueBtnTxt}>Save</Text>
+                      <Text style={{ color: COLORS.blackColor, fontFamily: FONT_NORMAL, fontSize: 12 }}>
+                        Party
+                      </Text>
                     </TouchableOpacity>
+                  </View>
+                  {
+                    SelectedParty &&
+                    <View style={[Styles._cellMain, { flexDirection: "row", backgroundColor: COLORS.whiteColor, overflow: "hidden", paddingHorizontal: 10 }]}>
+                      <Ionicons
+                        name={"person-circle-outline"}
+                        color={COLORS.primaryColor}
+                        size={25}
+                      />
 
-                    {/* Calculator */}
-                    <View style={Styles._calculatorMain}>
-                        {buttons.map((row, rowIndex) => (
-                            <View style={Styles._calculatorRow} key={rowIndex}>
-                                {row.map((key) => (
-                                    <TouchableOpacity
-                                        key={key}
-                                        activeOpacity={0.8}
-                                        style={[
-                                            Styles._key,
-                                            key === '0' && { flex: 2 },
-                                            (['AC', 'M+', 'M-', 'MR'].includes(key)) && { backgroundColor: '#ccc' },
-                                            (['=', '↵'].includes(key)) && { backgroundColor: COLORS.primaryColor },
-                                            (['÷', 'x', '-', '+', '%'].includes(key)) && { backgroundColor: "#ccc" }
-                                        ]}
-                                        onPress={() => handlePress(key)}
-                                    >
-                                        <Text style={Styles._keyText}>{key}</Text>
-                                    </TouchableOpacity>
-                                ))}
-                            </View>
-                        ))}
+                      <Text
+                        style={{ color: COLORS.blackColor, fontFamily: FONT_NORMAL, fontSize: 12, textAlign: "center", maxWidth: "60%", }}
+                        numberOfLines={1}
+                      >{SelectedParty?.name}</Text>
+
+                      <TouchableOpacity
+                        activeOpacity={0.8}
+                        onPress={() => setSelectedParty(null)}
+                      >
+                        <Ionicons
+                          name={"close"}
+                          color={COLORS.blackColor}
+                          size={22}
+                        />
+                      </TouchableOpacity>
                     </View>
+                  }
                 </View>
-            </View>
 
-            {/* Modal */}
-            <Modal
-                isVisible={isModalVisible}
-                onBackdropPress={() => setIsModalVisible(false)}
-                onBackButtonPress={() => setIsModalVisible(false)}
+              </View>
+            )}
+          </ScrollView>
+        </View>
+      </View>
+
+      {/* Calculator */}
+      <View
+        style={{
+          width: '92%',
+          alignItems: 'center',
+          gap: 20,
+          position: 'absolute',
+          bottom: insets.bottom,
+          paddingBottom: 10,
+          backgroundColor: COLORS.whiteColor,
+        }}
+      >
+        {
+          memory?.length > 0 ?
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={[
+                Styles._continueBtn,
+                {
+                  backgroundColor: mainColor == "red" ? COLORS.redColor : COLORS.greenColor,
+                },
+              ]}
+              onPress={() => {
+                setInput(String(Math.abs(memorySum)))
+                setResult(String(Math.abs(memorySum)))
+                setHistory('')
+                setMemory([])
+              }}
             >
-                <View style={{ backgroundColor: "white", padding: 20, borderRadius: 12 }}>
-                    <Text style={{ fontSize: 16, fontFamily: FONT_MEDIUM, marginBottom: 12 }}>Choose Option</Text>
+              <Text style={Styles._continueBtnTxt}>MR = {memorySum}</Text>
+            </TouchableOpacity> :
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={[
+                Styles._continueBtn,
+                {
+                  backgroundColor: mainColor == "red" ? COLORS.redColor : COLORS.greenColor,
+                },
+              ]}
+              onPress={item ? onUpdate : onSave}
+            >
+              <Text style={Styles._continueBtnTxt}>Save</Text>
+            </TouchableOpacity>
 
-                    <TouchableOpacity style={Styles._modalBtn} onPress={handleGallery}>
-                        <Ionicons name="image-outline" size={20} color="red" />
-                        <Text style={Styles._modalText}>Gallery</Text>
-                    </TouchableOpacity>
+        }
+        {!keyboardVisible && (
+          <View style={Styles._calculatorMain}>
+            {buttons.map((row, rowIndex) => (
+              <View style={Styles._calculatorRow} key={rowIndex}>
+                {row.map((key) => (
+                  <TouchableOpacity
+                    key={key}
+                    activeOpacity={0.8}
+                    style={[
+                      Styles._key,
+                      key === '0' && { flex: 2 },
+                      ['AC', 'M+', 'M-', 'MR'].includes(key) && {
+                        backgroundColor: '#ccc',
+                      },
+                      ['=', '⌫'].includes(key) && {
+                        backgroundColor: COLORS.gray,
+                      },
+                      ['÷', 'x', '-', '+', '%'].includes(key) && {
+                        backgroundColor: '#ccc',
+                      },
+                    ]}
+                    onPress={() => {
+                      handlePress(key)
+                    }}
+                  >
+                    <Text style={Styles._keyText}>{key}</Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
 
-                    <TouchableOpacity style={Styles._modalBtn} onPress={handleCamera}>
-                        <Ionicons name="camera-outline" size={20} color="red" />
-                        <Text style={Styles._modalText}>Camera</Text>
-                    </TouchableOpacity>
+      {/* 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._modalBtn} onPress={handlePDF}>
-                        <Ionicons name="document-outline" size={20} color="red" />
-                        <Text style={Styles._modalText}>PDF</Text>
-                    </TouchableOpacity>
+          <TouchableOpacity style={Styles._modalBtn} onPress={handleGallery}>
+            <Ionicons name="image-outline" size={20} color="red" />
+            <Text style={Styles._modalText}>Gallery</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={Styles._modalBtn} onPress={handleCamera}>
+            <Ionicons name="camera-outline" size={20} color="red" />
+            <Text style={Styles._modalText}>Camera</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={Styles._modalBtn} onPress={handlePDF}>
+            <Ionicons name="document-outline" size={20} color="red" />
+            <Text style={Styles._modalText}>PDF</Text>
+          </TouchableOpacity>
+        </View>
+      </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
+        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.primaryColor}
+              placeholder={
+                ShowNewBtn
+                  ? filteredContacts?.length && filteredContacts.length != 0
+                    ? 'Search Contacts'
+                    : 'Type Customer Names'
+                  : 'Search Clients'
+              }
+              value={searchText}
+              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.primaryColor}
+                    size={22}
+                  />
                 </View>
-            </Modal>
 
+                <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: '90%' }}
+                      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 () => {
+                      if (highlight) {
+                        setChangeModal(false);
+                        console.log("highlight")
+                      } else {
+                        console.log(item?.displayName, formattedNumber)
+                        await onContinue(item?.displayName, formattedNumber);
+                      }
+                    }}
+                  >
+                    <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>
+
+      {Platform.OS === 'ios' && showPicker && (
+        <DateTimePicker
+          value={date}
+          mode="date"
+          is24Hour={false}
+          onChange={onChangeDate}
+        />
+      )}
+
+      {Platform.OS === 'ios' && showTimePicker && (
+        <DateTimePicker
+          value={time}
+          mode="time"
+          is24Hour={false}
+          onChange={onChangeTime}
+        />
+      )}
+    </View>
+  );
 }
 
 const Styles = StyleSheet.create({
-    _mainContainers: {
-        flex: 1,
-        backgroundColor: COLORS.backgroundColor,
-        alignItems: "center"
-    },
-    _linearGradient: {
-        width: WP(100),
-        height: 80,
-        alignItems: "center",
-    },
-    _titleMain: {
-        width: WP(94),
-        height: 30,
-        flexDirection: "row",
-        alignItems: "center",
-        marginTop: 10
+  _mainContainers: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+    alignItems: 'center',
+  },
+  _linearGradient: {
+    width: WP(100),
+    height: 80,
+    alignItems: 'center',
+  },
+  _titleMain: {
+    width: WP(94),
+    height: 30,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  _title: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 15,
+    marginLeft: 15,
+  },
+  _contentMain: {
+    width: WP(94),
+    height: '95%',
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 50,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+  },
+  _input: {
+    flex: 1,
+    height: '100%',
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    fontFamily: FONT_MEDIUM,
+    color: 'red',
+    paddingLeft: 13,
+  },
+  _inputMain: {
+    width: '95%',
+    height: 60,
+    flexDirection: 'row',
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    backgroundColor: COLORS.whiteColor,
+  },
+  _memoryDisplay: {
+    width: WP(85),
+    height: 60,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingLeft: 12,
+    // paddingVertical: 4,
+    backfaceVisibility: COLORS.whiteColor,
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+  },
+  _memoryText: {
+    fontSize: 12,
+    fontFamily: FONT_NORMAL,
+    color: '#333',
+  },
+  _continueBtn: {
+    width: '95%',
+    height: 50,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius:100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _continueBtnTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: TEXT_SIZES.BUTTON_TEXT,
+  },
+  _calculatorMain: {
+    width: '95%',
+    // height: 350,
+    // backgroundColor: "red"
+  },
+  _calculatorRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    // marginBottom: 3
+  },
+  _key: {
+    flex: 1,
+    margin: 5,
+    backgroundColor: COLORS.whiteColor,
+    paddingVertical: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+    marginHorizontal: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    _title: {
-        color: COLORS.whiteColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 15,
-        marginLeft: 15
-    },
-    _contentMain: {
-        width: WP(94),
-        height: "95%",
-        backgroundColor: COLORS.whiteColor,
-        position: "absolute",
-        top: 50,
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.2,
-        shadowRadius: 3.84,
-        elevation: 5,
-        borderRadius: 10,
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingVertical: 12,
-    },
-    _input: {
-        flex: 1,
-        height: "100%",
-        fontFamily: FONT_MEDIUM,
-        fontSize: 15,
-        color: "red",
-        paddingLeft: 13,
-    },
-    _inputMain: {
-        width: "95%",
-        height: 50,
-        flexDirection: "row",
-        borderColor: COLORS.grey,
-        borderWidth: 1,
-        borderRadius: 15,
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: 12,
-        backgroundColor: COLORS.whiteColor
-    },
-    _memoryDisplay: {
-        width: WP(85),
-        height: 50,
-        alignItems: "flex-start",
-        justifyContent: "center",
-        paddingLeft: 12,
-        // paddingVertical: 4,
-        backfaceVisibility: COLORS.whiteColor,
-        borderColor: COLORS.grey,
-        borderWidth: 1,
-        borderRadius: 15,
-    },
-    _memoryText: {
-        fontSize: 12,
-        fontFamily: FONT_NORMAL,
-        color: '#333'
-    },
-    _continueBtn: {
-        width: "95%",
-        height: 50,
-        backgroundColor: "red",
-        borderRadius: 100,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    _continueBtnTxt: {
-        color: COLORS.whiteColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 17
-    },
-    _calculatorMain: {
-        width: "95%",
-        // height: 350,
-        // backgroundColor: "red"
-    },
-    _calculatorRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        // marginBottom: 3
-    },
-    _key: {
-        flex: 1,
-        margin: 5,
-        backgroundColor: COLORS.whiteColor,
-        paddingVertical: 10,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 8,
-        marginHorizontal: 10,
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.2,
-        shadowRadius: 3.84,
-        elevation: 5,
-    },
-    _keyText: {
-        fontSize: 15,
-        color: COLORS.blackColor,
-        fontFamily: FONT_MEDIUM
-    },
-    _scrollMain: {
-        width: "95%",
-        alignItems: "center",
-        gap: 12,
-        // backgroundColor: "green",
-        // maxHeight: Platform.OS == "ios" ? 200 : 250,
-    },
-    _hidableMain: {
-        width: WP(94),
-        height: 300,
-        // backgroundColor: "green",
-        alignItems: "center",
-        gap: 12
-    },
-    _hidableRow: {
-        width: "95%",
-        // height:30,
-        // backgroundColor: "red",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: 9
-    },
-    _cellMain: {
-        width: "48%",
-        height: 50,
-        // backgroundColor: "pink",
-        borderColor: COLORS.grey,
-        borderWidth: 1,
-        borderRadius: 15,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: WP(4)
-    },
-    _cellText: {
-        color: COLORS.blackColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 10,
-    },
-    _detailMain: {
-        minHeight: 50,
-        width: "91%",
-        borderColor: COLORS.grey,
-        borderWidth: 1,
-        borderRadius: 15,
-        paddingHorizontal: 15,
-        color: COLORS.blackColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 13
-    },
-    _modalBtn: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingVertical: 12,
-        borderBottomColor: "#eee",
-        borderBottomWidth: 1
-    },
-    _modalText: {
-        marginLeft: 10,
-        fontSize: 14,
-        fontFamily: FONT_NORMAL,
-        color: COLORS.blackColor
-    }
-})
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 2,
+  },
+  _keyText: {
+    fontSize: 15,
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+  },
+  _scrollMain: {
+    width: '95%',
+    alignItems: 'center',
+    gap: 12,
+    paddingBottom: HP(70),
+    // backgroundColor: "green",
+    // maxHeight: Platform.OS == "ios" ? 200 : 250,
+  },
+  _hidableMain: {
+    width: WP(94),
+    height: 300,
+    // backgroundColor: "green",
+    alignItems: 'center',
+    gap: 12,
+  },
+  _hidableRow: {
+    width: '95%',
+    // height:30,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 9,
+  },
+  _cellMain: {
+    width: '48%',
+    height: 60,
+    // backgroundColor: "pink",
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: WP(4),
+  },
+  _cellText: {
+    color: COLORS.blackColor,
+    fontSize: 11,
+    fontFamily: FONT_MEDIUM,
+  },
+  _detailMain: {
+    minHeight: 60,
+    maxHeight: 150,
+    width: '91%',
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 15,
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _modalBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomColor: '#eee',
+    borderBottomWidth: 1,
+  },
+  _modalText: {
+    marginLeft: 10,
+    fontSize: 14,
+    fontFamily: FONT_NORMAL,
+    color: COLORS.blackColor,
+  },
+  _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',
+  },
+  _billNoMain: {
+    width: '91%',
+    height: 60,
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 15,
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _itemHeaderMain: {
+    width: '91%',
+    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
+  },
+  _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: 45,
+    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,
+  },
+});