digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/SaleItemDetail.js

@@ -0,0 +1,1187 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  Alert,
+  Platform,
+  TextInput,
+  ScrollView,
+  PermissionsAndroid,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import LinearGradient from 'react-native-linear-gradient';
+import { BottomView, CountryPhoneInput, SalePaymentModal, User } from '../components';
+import {
+  addCommas,
+  COLORS,
+  FONT_BOLD,
+  FONT_NORMAL,
+  formatDateTime,
+  formatPhoneNumber,
+  getAvatar,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import DiscountTaxModal from '../components/DiscountTaxModal';
+import Modal from 'react-native-modal';
+import { HP, FONT_MEDIUM } from '../themes/config';
+import LottieView from 'lottie-react-native';
+import { useSelector, useDispatch } from 'react-redux';
+import { addClient, getClientDetails, getClientsByType } from '../database/clients';
+import Contacts from 'react-native-contacts';
+import { CLIENT_DETAILS } from '../redux/reducers/client/client_types';
+
+const SaleItemDetail = ({ navigation, route }) => {
+
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const dispatch = useDispatch();
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalType, setModalType] = useState('Discount');
+  const [paymentVisible, setPaymentVisible] = useState(false);
+  const [items, setItems] = useState([]);
+  const [Discount, setDiscount] = useState(0);
+  const [DiscountType, setDiscountType] = useState('amt');
+  const [Tax, setTax] = useState(0);
+  const [TaxType, setTaxType] = useState('amt');
+  const [SuccessModal, setSuccessModal] = useState(false);
+  const [amount, setAmount] = useState(0);
+  const [ChangeModal, setChangeModal] = useState(false);
+  const [SelectedParty, setSelectedParty] = useState(null);
+  const [Clients, setClients] = useState([]);
+  const [ShowNewBtn, setShowNewBtn] = useState(false);
+  const [contacts, setContacts] = useState([]);
+  const [Name, setName] = useState('');
+  const [clientPhoneSet, setClientPhoneSet] = useState(new Set());
+  const [clientPhoneMap, setClientPhoneMap] = useState(new Map());
+  const [searchText, setSearchText] = useState('');
+  const [PhoneNum, setPhoneNum] = useState('');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [banks, setBanks] = useState([])
+
+  const clients = useSelector((state) => state.client.home_customers);
+  const suppliers = useSelector((state) => state.client.home_suppliers);
+
+  const { cartedItems } = route.params;
+
+  useEffect(() => {
+    setItems(cartedItems);
+  }, [cartedItems]);
+
+  const handleAddToCart = (id) => {
+    const updated = items.map((item) =>
+      item.id === id ? { ...item, qty: 1 } : item
+    );
+    setItems(updated);
+  };
+
+  const handleIncrease = (id) => {
+    const updated = items.map((item) =>
+      item.id === id ? { ...item, qty: item.qty + 1 } : item
+    );
+    setItems(updated);
+  };
+
+  const handleDecrease = (id) => {
+    const updated = items.map((item) =>
+      item.id === id ? { ...item, qty: item.qty > 1 ? item.qty - 1 : 0 } : item
+    );
+    setItems(updated);
+  };
+
+  const renderItem = ({ item }) => (
+    <View
+      style={[styles.itemRow, { display: item?.qty > 0 ? 'flex' : 'none' }]}
+    >
+      <View style={styles.imageBox}>
+        {item?.local_path ? (
+          <Image
+            source={{ uri: item?.local_path }}
+            style={{ width: '100%', height: '100%' }}
+            resizeMode="cover"
+          />
+        ) : (
+          <Ionicons name="cube-outline" size={35} color={COLORS.gray} />
+        )}
+      </View>
+
+      <View style={styles.textContainer}>
+        <Text style={styles.itemName}>{item?.name}</Text>
+        <Text style={styles.itemPrice}>
+          Rs.{addCommas(Number(item.sellingPrice))}
+        </Text>
+      </View>
+
+      <View style={styles.qtyContainer}>
+        <TouchableOpacity
+          style={styles.qtyButton}
+          activeOpacity={0.8}
+          onPress={() => {
+            handleDecrease(item?.id);
+          }}
+        >
+          <Ionicons
+            name="remove-outline"
+            size={18}
+            color={COLORS.primaryColor}
+          />
+        </TouchableOpacity>
+        <Text style={styles.qtyText}>{item?.qty}</Text>
+        <TouchableOpacity
+          style={styles.qtyButton}
+          activeOpacity={0.8}
+          onPress={() => {
+            handleIncrease(item?.id);
+          }}
+        >
+          <Ionicons name="add-outline" size={18} color={COLORS.primaryColor} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+
+  const clearCart = () => {
+    Alert.alert(
+      'Clear Cart',
+      'Do you want to clear all of your selected items?',
+      [
+        {
+          text: 'No',
+          style: 'cancel',
+        },
+        {
+          text: 'Yes',
+          onPress: () => {
+            setDiscount(0);
+            setDiscountType('amt');
+            setTax(0);
+            setTaxType('amt');
+            setItems([]);
+          },
+          style: 'destructive',
+        },
+      ]
+    );
+  };
+
+  const totalItems = items.filter((item) => item.qty > 0).length;
+  const totalPcs = items.reduce((sum, item) => sum + (item.qty || 0), 0);
+
+  const totalAmount = items.reduce(
+    (sum, item) => sum + (item.sellingPrice || 0) * (item.qty || 0),
+    0
+  );
+
+  const totalDiscount = DiscountType === 'percent' ? (totalAmount * Discount) / 100 : Discount;
+  const totalTax = TaxType === 'percent' ? (totalAmount * Tax) / 100 : Tax;
+  const grandTotal = Number(totalAmount) - Number(totalDiscount) + Number(totalTax);
+
+  const filteredContacts = contacts.filter((item) => {
+    const name = item?.displayName?.toLowerCase() || '';
+    const rawNumber = item?.phoneNumbers[0]?.number || '';
+    const formattedNumber = formatPhoneNumber(rawNumber)?.toLowerCase() || '';
+
+    // 🔹 use your searchText state (from TextInput)
+    const searchLower = searchText.toLowerCase();
+
+    // (optional) client type
+    const clientType = clientPhoneMap.get(formattedNumber);
+
+    return name.includes(searchLower) || formattedNumber.includes(searchLower);
+  });
+
+  const filteredClients = Clients.filter((c) => {
+    const name = c.name?.toLowerCase() || '';
+    const phone = c.phone?.toLowerCase() || '';
+    const searchLower = searchText.toLowerCase();
+
+    return name.includes(searchLower) || phone.includes(searchLower);
+  });
+
+  const getAllClientTypes = async () => {
+    try {
+      const [customers, suppliers, banks] = await Promise.all([
+        getClientsByType(0, null, null, selectBusiness?.id),
+        getClientsByType(1, null, null, selectBusiness?.id),
+        getClientsByType(2, null, null, selectBusiness?.id),
+      ]);
+
+      const allClients = [...customers, ...suppliers, ...banks];
+
+      // sort
+      const sortedClients = allClients.sort((a, b) => a.type - b.type);
+      setClients(sortedClients);
+
+      // Map phone -> full client info
+      const phoneMap = new Map();
+      allClients.forEach((c) => {
+        const formatted = formatPhoneNumber(c.phone || '')?.toLowerCase();
+        if (formatted) {
+          phoneMap.set(formatted, {
+            id: c.id,
+            type: c.type,
+            name: c.name,
+            phone: c.phone,
+          });
+        }
+      });
+      setClientPhoneMap(phoneMap);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getAllContacts = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
+          {
+            title: 'Contacts',
+            message: 'This app would like to view your contacts.',
+            buttonPositive: 'Please accept bare mortal',
+          }
+        );
+
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          console.log('Contacts permission granted');
+          Contacts.getAll().then((contacts) => {
+            setContacts(contacts);
+          });
+        } else {
+          console.log('Contacts permission denied');
+          return;
+        }
+      } catch (err) {
+        console.warn(err);
+        return;
+      }
+    }
+    setIsModalVisible(false);
+  };
+
+  const onPartyPress = async () => {
+    await getAllContacts();
+    await getAllClientTypes();
+    setChangeModal(true);
+  };
+
+  const onContinue = async (name, phoneNUmer) => {
+    // normalize phone
+    const normalizedPhone = phoneNUmer ? String(phoneNUmer).trim() : '';
+    let data = [...clients, ...suppliers];
+
+    try {
+      let clientId;
+      let homeDetails = null;
+
+      // If phone exists → check if already in clients array
+      const isExist =
+        normalizedPhone !== ''
+          ? data?.find((item) => {
+            const itemPhone = item?.phone ? String(item.phone).trim() : '';
+            return itemPhone === normalizedPhone && itemPhone !== '';
+          })
+          : undefined; // no phone → force new client
+
+      if (isExist) {
+        // Existing client found
+        clientId = isExist.id;
+        homeDetails = isExist;
+      } else {
+        console.log('else');
+        // No existing client or no phone given → always create new
+        const res = await addClient(
+          name,
+          normalizedPhone,
+          0,
+          selectBusiness?.id
+        );
+        setName('');
+        setPhoneNum('');
+        clientId = res?.insertId;
+      }
+
+      const resp = await getClientDetails(clientId);
+      dispatch({ type: CLIENT_DETAILS, payload: resp });
+
+      setSelectedParty(resp);
+      setChangeModal(false);
+
+      // navigation.replace('CustomerEntries', homeDetails ? { homeDetails } : {});
+    } catch (err) {
+      console.log('Error:', err);
+    }
+  };
+
+  const addPartyTransaction = async (finalValue, oldId) => {
+    let allItems = await getItemsByBusiness(selectBusiness?.id);
+    let filteredItem = allItems.find(i => i?.id == itemId);
+    let mutatedData = { ...filteredItem, addedQty: form?.qty, addedRate: form?.rateSale }
+    let final = [mutatedData]
+    try {
+      const res = await addTransaction(
+        SelectedParty.id,
+        type == "OUT" ? String(finalValue) : '0',
+        type == "IN" ? String(finalValue) : '0',
+        form?.details,
+        fromJsDateToSql(date),
+        AudioFile,
+        `Stock_stockId${String(oldId)}`,
+        JSON.stringify(final)
+      );
+
+      console.log(res, 'Transaction Success');
+      const trxId = res.insertId; // ✅ new transaction ID
+
+      if (attachments && attachments.length > 0) {
+        for (const file of attachments) {
+          try {
+            await addTransactionImages(trxId, file.uri);
+            console.log(`Attachment added: ${file.name}`);
+          } catch (err) {
+            console.log('Attachment insert error:', err);
+          }
+        }
+      }
+    } catch (err) {
+      console.log(err, 'Transaction Error');
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', async () => {
+      const clients = await getClientsByType(
+        2,
+        null,
+        null,
+        selectBusiness?.id
+      ); // banks
+
+      const freshClients = addPayType(clients);
+      setBanks(freshClients);
+    });
+
+    return unsubscribe;
+  }, [navigation, selectBusiness?.id]);
+
+
+  function addPayType(clients) {
+    return clients.map((item) => {
+      const amount = (item?.total_subamount || 0) - (item?.total_amount || 0);
+      let pay_type = 'none';
+      if (amount > 0) pay_type = 'payable';
+      else if (amount < 0) pay_type = 'receivable';
+      return {
+        ...item,
+        amount: Math.abs(amount),
+        pay_type,
+      };
+    });
+  }
+
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => navigation.goBack()}
+        >
+          <Ionicons
+            name={'chevron-back'}
+            color={COLORS.primaryColor}
+            size={24}
+          />
+        </TouchableOpacity>
+
+        <View style={styles.headerGroup}>
+          {/* Discount */}
+          <TouchableOpacity
+            style={styles.headerItem}
+            onPress={() => {
+              setModalType('Discount');
+              setModalVisible(true);
+            }}
+          >
+            <Ionicons
+              name="pricetag-outline"
+              size={20}
+              color={COLORS.primaryColor}
+            />
+            <Text style={styles.headerText}>Discount</Text>
+          </TouchableOpacity>
+
+          {/* Tax */}
+          <TouchableOpacity
+            style={[styles.headerItem, styles.headerDivider]}
+            onPress={() => {
+              setModalType('Tax');
+              setModalVisible(true);
+            }}
+          >
+            <Ionicons
+              name="sync-outline"
+              size={20}
+              color={COLORS.primaryColor}
+            />
+            <Text style={styles.headerText}>Tax</Text>
+          </TouchableOpacity>
+
+          {/* Customer */}
+          <TouchableOpacity
+            style={[styles.headerItem, styles.headerDivider]}
+            activeOpacity={0.8}
+            onPress={onPartyPress}
+          >
+            <Ionicons
+              name="person-outline"
+              size={20}
+              color={COLORS.primaryColor}
+            />
+            <Text style={styles.headerText}>Customer</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      {
+        SelectedParty &&
+        <View style={{
+          width: "100%",
+          height: 50,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          paddingHorizontal: 15,
+        }}>
+          <Ionicons
+            color={COLORS.primaryColor}
+            name={"person-circle-outline"}
+            size={25}
+          />
+
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
+            <Text style={{
+              color: COLORS.primaryColor,
+              fontFamily: FONT_NORMAL,
+              fontSize: 13
+            }}>{SelectedParty?.name}</Text>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => setSelectedParty(null)}
+            >
+              <Ionicons
+                name="close-outline"
+                color={COLORS.blackColor}
+                size={25}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+      }
+
+      {/* Total Section */}
+      <View style={styles.totalContainer}>
+        <View style={styles.totalRow}>
+          <Text style={styles.totalLabel}>Total Amount</Text>
+          <Text style={styles.totalValue}>
+            {addCommas(Number(totalAmount))}
+          </Text>
+        </View>
+
+        {Discount > 0 && (
+          <View style={styles.totalRow}>
+            <Text style={[styles.totalLabel, { color: COLORS.redColor }]}>
+              Discount ( {Discount}
+              {DiscountType === 'amt' ? ' Rs' : '%'} )
+            </Text>
+
+            <Text style={[styles.totalValue, { color: COLORS.redColor }]}>
+              - {addCommas(Number(totalDiscount))}
+            </Text>
+          </View>
+        )}
+
+        {Tax > 0 && (
+          <View style={styles.totalRow}>
+            <Text style={[styles.totalLabel, { color: COLORS.greenColor }]}>
+              Tax ( {Tax}
+              {TaxType === 'amt' ? ' Rs' : '%'} )
+            </Text>
+
+            <Text style={[styles.totalValue, { color: COLORS.greenColor }]}>
+              + {addCommas(Number(totalTax))}
+            </Text>
+          </View>
+        )}
+
+        <View style={styles.totalRow}>
+          <Text style={styles.totalLabel}>Rs</Text>
+          <Text style={styles.totalPrice}>{addCommas(Number(grandTotal))}</Text>
+        </View>
+
+        {/* Pay Button */}
+        <TouchableOpacity
+          style={styles.payButton}
+          onPress={() => setPaymentVisible(true)}
+        >
+          <LinearGradient
+            colors={[COLORS.primaryColor, COLORS.primaryColor]}
+            style={styles.totalButton}
+          >
+            <Text style={styles.clearText}>PAY</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      </View>
+
+      {/* Item List */}
+      <View style={styles.listHeader}>
+        <Text style={styles.listHeaderText}>
+          {totalItems} Items/ {totalPcs} pcs.
+        </Text>
+        <Text style={styles.listHeaderValue}>
+          {addCommas(Number(totalAmount))}
+        </Text>
+      </View>
+
+      <FlatList
+        data={items}
+        keyExtractor={(item) => item?.id}
+        renderItem={renderItem}
+        contentContainerStyle={{ paddingBottom: 300 }}
+      />
+
+      {/* Clear Cart */}
+      {items?.length > 0 && (
+        <BottomView style={[styles.bottomBar]}>
+          <TouchableOpacity
+            style={styles.totalButton}
+            activeOpacity={0.8}
+            onPress={clearCart}
+          >
+            <Ionicons
+              name="close-outline"
+              size={24}
+              color={COLORS.whiteColor}
+            />
+            <Text style={styles.clearText}>Clear Cart</Text>
+          </TouchableOpacity>
+        </BottomView>
+      )}
+
+      <DiscountTaxModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+        type={modalType}
+        totalAmount={300}
+        onApply={(value, isPercent) => {
+          console.log(`Applied ${modalType}:`, value, isPercent ? '%' : 'Rs');
+          if (modalType == 'Discount') {
+            setDiscount(value);
+            setDiscountType(isPercent ? 'percent' : 'amt');
+          } else {
+            setTax(value);
+            setTaxType(isPercent ? 'percent' : 'amt');
+          }
+        }}
+      />
+      <SalePaymentModal
+        visible={paymentVisible}
+        onClose={() => setPaymentVisible(false)}
+        totalAmount={grandTotal}
+        clients={[...clients, ...suppliers]}
+        banks={banks}
+        onConfirm={(amount) => {
+          console.log('Payment Confirmed:', amount);
+          setPaymentVisible(false);
+        }}
+        Tax={Tax}
+        Discount={Discount}
+        SelectedItems={items}
+        selectedParty={SelectedParty}
+        setVisible={() => {
+          setPaymentVisible(false);
+          setTimeout(() => {
+            setSuccessModal(true);
+          }, 200);
+        }}
+      />
+
+      {/* Success Modal */}
+      <Modal
+        isVisible={SuccessModal}
+        coverScreen
+        style={{ margin: 0, padding: 0 }}
+        animationInTiming={100}
+        animationOutTiming={100}
+      >
+        <View
+          style={{
+            width: WP(100),
+            height: HP(100),
+            backgroundColor: COLORS.whiteColor,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <LottieView
+            source={require('../assets/animations/success.json')}
+            style={{ width: 120, height: 120 }}
+            autoPlay
+            loop={false}
+          />
+
+          {/* <Text
+            style={{ color: COLORS.blackColor, fontFamily: FONT_MEDIUM, fontSize: 15 }}
+          >
+            Change
+          </Text>
+          <Text
+            style={{ color: COLORS.blackColor, fontFamily: FONT_BOLD, fontSize: 25 }}
+          >
+            {Number(grandTotal) - Number(amount)}
+          </Text> */}
+
+          {/* Pay Button */}
+          <TouchableOpacity
+            style={{
+              width: WP(90),
+              height: 50,
+              backgroundColor: COLORS.primaryColor,
+              borderRadius: TEXT_SIZES.BORDER_RADIUS,
+              justifyContent: 'center',
+              alignItems: 'center',
+              position: 'absolute',
+              bottom: 70,
+            }}
+            onPress={() => {
+              setSuccessModal(false);
+              navigation?.goBack();
+            }}
+          >
+            <Text style={styles.clearText}>Done</Text>
+          </TouchableOpacity>
+        </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 Name'
+                  : 'Search Clients'
+              }
+              value={searchText}
+              maxLength={25}
+              onChangeText={setSearchText}
+              placeholderTextColor={COLORS.gray}
+            />
+          </View>
+
+          <View style={styles._modalSearchMain}>
+            {!ShowNewBtn ? (
+              <TouchableOpacity
+                style={styles._addContactBtn}
+                activeOpacity={0.8}
+                onPress={() => setShowNewBtn(true)}
+              >
+                <View style={styles._avatarMain}>
+                  <Ionicons
+                    name="person-add-outline"
+                    color={COLORS.primaryColor}
+                    size={22}
+                  />
+                </View>
+
+                <View style={{ width: '70%' }}>
+                  <Text
+                    style={{
+                      color: COLORS.primaryColor,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 12,
+                    }}
+                  >
+                    Add New Customer
+                  </Text>
+                </View>
+
+                <Ionicons
+                  name="chevron-forward"
+                  color={COLORS.primaryColor}
+                  size={22}
+                />
+              </TouchableOpacity>
+            ) : (
+              <View style={styles._phoneInputMain}>
+                <CountryPhoneInput
+                  contentContainerStyle={{ width: '100%' }}
+                  onChange={(text) => {
+                    setPhoneNum(text?.fullNumber);
+                  }}
+                />
+
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    if (searchText.trim()) {
+                      onContinue(searchText, PhoneNum);
+                    }
+                  }}
+                  style={[
+                    styles._modalBtn,
+                    {
+                      backgroundColor: searchText?.trim()
+                        ? COLORS.primaryColor
+                        : COLORS.gray,
+                      width: '100%',
+                      justifyContent: 'center',
+                      paddingVertical: 15,
+                      alignItems: 'center',
+                    },
+                  ]}
+                >
+                  <Text
+                    style={{
+                      color: COLORS.whiteColor,
+                      fontFamily: FONT_NORMAL,
+                      fontSize: 12,
+                    }}
+                  >
+                    CONTINUE
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            )}
+          </View>
+          {!ShowNewBtn ? (
+            <ScrollView
+              contentContainerStyle={{
+                alignItems: 'center',
+              }}
+            >
+              {filteredClients?.length === 0 ? (
+                <View
+                  style={{
+                    height: 300,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: COLORS.blackColor,
+                      fontFamily: FONT_MEDIUM,
+                      fontSize: 13,
+                    }}
+                  >
+                    No Records Found
+                  </Text>
+                </View>
+              ) : (
+                filteredClients.map((item, index) => {
+                  let amount = item?.total_subamount - item?.total_amount;
+
+                  let type = 'none';
+                  if (amount > 0) {
+                    type = 'receivable';
+                  } else if (amount < 0) {
+                    type = 'payable';
+                  }
+
+                  amount = Math.abs(amount);
+
+                  return (
+                    <User
+                      key={index}
+                      name={item?.name}
+                      addedAt={formatDateTime(
+                        item?.latest_transaction_date || item?.created_at
+                      )}
+                      amount={amount}
+                      type={type}
+                      avatarColor={item?.type == 0 ? 'red' : 'green'}
+                      clientType={item?.type}
+                      icon={item?.local_path}
+                      mainContainer={{ width: '100%' }}
+                      onPress={() => {
+                        setShowNewBtn(false);
+                        setChangeModal(false);
+                        setSelectedParty(item);
+                      }}
+                    />
+                  );
+                })
+              )}
+            </ScrollView>
+          ) : (
+            <FlatList
+              data={filteredContacts} // 🔹 now using filtered contacts
+              keyExtractor={(item, index) => index.toString()}
+              contentContainerStyle={{ paddingBottom: HP(20) }}
+              renderItem={({ item }) => {
+                const rawNumber = item?.phoneNumbers[0]?.number;
+                const formattedNumber =
+                  formatPhoneNumber(rawNumber)?.toLowerCase();
+
+                const clientInfo = clientPhoneMap.get(formattedNumber);
+
+                const clientId = clientInfo?.id;
+                const clientType = clientInfo?.type;
+
+                let typeLabel = '';
+                if (clientType === 0) typeLabel = 'Customer';
+                else if (clientType === 1) typeLabel = 'Supplier';
+                const highlight = clientType === 0 || clientType === 1;
+
+                return (
+                  <TouchableOpacity
+                    style={[styles._contactsCardMain]}
+                    activeOpacity={0.8}
+                    onPress={async () => {
+                      onContinue(
+                        item?.displayName,
+                        item?.phoneNumbers[0]?.number
+                      );
+                    }}
+                  >
+                    <View style={styles._avatarMain}>
+                      <Text style={styles._avatarText}>
+                        {getAvatar(item?.displayName)}
+                      </Text>
+                    </View>
+                    <View style={{ width: '55%' }}>
+                      <Text
+                        style={{
+                          color: COLORS.blackColor,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 13,
+                        }}
+                      >
+                        {item?.displayName}
+                      </Text>
+                      <Text
+                        style={{
+                          color: COLORS.blackColor,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 12,
+                          opacity: 0.6,
+                        }}
+                      >
+                        {formattedNumber}
+                      </Text>
+                    </View>
+
+                    <View
+                      style={{
+                        width: '27%',
+                        height: '100%',
+                        justifyContent: 'center',
+                        alignItems: 'flex-end',
+                      }}
+                    >
+                      <Text
+                        style={{
+                          color: COLORS.darkGrey,
+                          fontFamily: FONT_NORMAL,
+                          fontSize: 11,
+                        }}
+                      >
+                        {typeLabel}
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
+                );
+              }}
+            />
+          )}
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default SaleItemDetail;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F4F4F4',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F4F4F4',
+    borderBottomWidth: 0.5,
+    borderBottomColor: '#DDD',
+    paddingVertical: 10,
+  },
+
+  backButton: {
+    width: 50,
+    alignItems: 'center',
+  },
+
+  headerGroup: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  headerItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  headerDivider: {
+    borderLeftWidth: 1,
+    borderLeftColor: '#DDD',
+  },
+
+  totalContainer: {
+    backgroundColor: '#fff',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  totalLabel: {
+    fontSize: 15,
+    color: '#555',
+    fontFamily: FONT_NORMAL,
+  },
+  totalValue: {
+    fontSize: 15,
+    color: '#555',
+  },
+  totalPrice: {
+    fontSize: 22,
+    color: COLORS.blackColor,
+    fontFamily: FONT_BOLD,
+  },
+  payButton: {
+    marginTop: 10,
+  },
+  payGradient: {
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    paddingVertical: 12,
+  },
+  payText: {
+    color: '#fff',
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+  },
+  listHeader: {
+    backgroundColor: '#E0E0E0',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  listHeaderText: {
+    fontSize: 13,
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+  },
+  listHeaderValue: {
+    fontSize: 13,
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+  },
+  itemRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    // marginHorizontal: 10,
+    width: '100%',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginTop: 8,
+    // borderRadius: 8,
+    padding: 10,
+    elevation: 1,
+  },
+  imageBox: {
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+    backgroundColor: '#E0E0E0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  textContainer: {
+    flex: 1,
+    marginHorizontal: 12,
+  },
+  itemName: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: COLORS.blackColor,
+  },
+  itemPrice: {
+    fontSize: 14,
+    color: '#757575',
+    marginTop: 2,
+  },
+  qtyContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1.2,
+    borderColor: COLORS.primaryColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+  },
+  qtyButton: {
+    paddingHorizontal: 6,
+  },
+  qtyText: {
+    fontSize: 12,
+    color: COLORS.primaryColor,
+    fontFamily: FONT_NORMAL,
+    marginHorizontal: 10,
+  },
+  totalButton: {
+    borderWidth: 1,
+    marginBottom: 10,
+    flexDirection: 'row',
+    gap: 10,
+    borderColor: COLORS.primaryColor,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    width: '100%',
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  clearText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 14,
+  },
+  bottomBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    elevation: 10,
+  },
+  headerText: {
+    fontSize: 11,
+    color: COLORS.primaryColor,
+    fontFamily: FONT_NORMAL,
+  },
+  _textInputParty: {
+    width: '100%',
+    height: 60,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    gap: 15,
+  },
+  _changeModalMain: {
+    width: WP(90),
+    maxHeight: HP(75),
+    backgroundColor: COLORS.whiteColor,
+  },
+  _changeModalHeader: {
+    width: '100%',
+    height: HP(6),
+    backgroundColor: COLORS.primaryColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _changeModalHeaderTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  _modalSearchMain: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 7.5,
+  },
+  _modalSearch: {
+    width: '92%',
+    height: 50,
+    borderWidth: 1,
+    borderColor: COLORS.gray,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingLeft: 10,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+    color: COLORS.blackColor,
+  },
+  _avatarText: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 16,
+    color: COLORS.primaryColor,
+  },
+  _addContactBtn: {
+    width: '92%',
+    height: 50,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  _contactsCardMain: {
+    width: '92%',
+    height: 50,
+    // backgroundColor: "red",
+    marginVertical: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  _phoneInputMain: {
+    width: '92%',
+    // height:60,
+    // backgroundColor:"red",
+    alignItems: 'center',
+    gap: 15,
+  },
+});