digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/Profile.js

@@ -0,0 +1,1594 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  SafeAreaView,
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+  ScrollView,
+  TextInput,
+  Alert,
+  PixelRatio,
+} from 'react-native';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+  COLORS,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  formatShortDate,
+  HP,
+  ICON_SIZES,
+  Input_Field_SIZES,
+  mergeDateTime,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  changeClientType,
+  getClientDetails,
+  getClientTransactions,
+  insertPhoneNum,
+  setClientAddress,
+  setClientCnic,
+  setClientName,
+  setClientPhone,
+  setPayDate,
+  setProfilePic,
+  softDeleteClient,
+  switchClientToSupplier,
+  updateBankProfile,
+  updateClientCreditLimit,
+  updateClientInstallmentDetails,
+} from '../database/clients';
+import {
+  BottomView,
+  CountryPhoneInput,
+  FloatingInput,
+  PickerModal,
+  SearchBar,
+  Transaction,
+} from '../components';
+import Modal from 'react-native-modal';
+import { CLIENT_DETAILS } from '../redux/reducers/client/client_types';
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import ViewShot from 'react-native-view-shot';
+import Share from 'react-native-share';
+import {
+  Menu,
+  MenuOptions,
+  MenuOption,
+  MenuTrigger,
+} from 'react-native-popup-menu';
+
+export default function Profile({ navigation, route }) {
+  const dispatch = useDispatch();
+  const ClientDetails = useSelector((state) => state.client.client_details);
+  const { amount, type } = route?.params;
+
+  const [IsInstallment, setIsInstallment] = useState(false);
+  const [InstallmentAmount, setInstallmentAmount] = useState('');
+  const [Duration, setDuration] = useState('');
+  const [InstallmentDate, setInstallmentDate] = useState('');
+  const [date, setDate] = useState('');
+  const [Remaining, setRemaining] = useState('');
+  const [IsPicker, setIsPicker] = useState(false);
+  const [EditModal, setEditModal] = useState(false);
+
+  const [Name, setName] = useState('');
+  const [PhoneNum, setPhoneNum] = useState('');
+  const [Cnic, setCnic] = useState('');
+  const [Address, setAddress] = useState('');
+  const [Flat, setFlat] = useState('');
+  const [Landmark, setLandmark] = useState('');
+  const [PostalCode, setPostalCode] = useState('');
+  const [City, setCity] = useState('');
+  const [Province, setProvince] = useState('');
+  const [CreditLimit, setCreditLimit] = useState('');
+  const [ModalType, setModalType] = useState('');
+  const [AccountTitle, setAccountTitle] = useState('');
+  const [AccountNumber, setAccountNumber] = useState('');
+
+  const onChangeDate = (event, selectedDate) => {
+    const currentDate = selectedDate;
+    setDate(currentDate);
+  };
+
+  const showDate = () => {
+    DateTimePickerAndroid.open({
+      value: date || new Date(),
+      onChange: onChangeDate,
+      mode: 'date',
+      is24Hour: false,
+    });
+  };
+
+  const togglePicker = () => {
+    setIsPicker(!IsPicker);
+  };
+
+  const onPictureUpdate = async (uri) => {
+    // console.log({uri})
+    setProfilePic(uri, ClientDetails?.id).then((resp) => {
+      getClientDetails(ClientDetails?.id).then((res) => {
+        dispatch({
+          type: CLIENT_DETAILS,
+          payload: res,
+        });
+      });
+    });
+  };
+
+  const updateClientField = async () => {
+    try {
+      // choose update function
+      let updateFn = null;
+      if (ModalType === 'name') updateFn = setClientName;
+      else if (ModalType === 'number') updateFn = setClientPhone;
+      else if (ModalType === 'cnic') updateFn = setClientCnic;
+      else if (ModalType === 'address') updateFn = setClientAddress;
+
+      // prepare value
+      let valueToSave;
+      if (ModalType === 'name') valueToSave = (Name || '').trim();
+      if (ModalType === 'number') valueToSave = (PhoneNum || '').trim();
+      if (ModalType === 'cnic') valueToSave = (Cnic || '').trim();
+      if (ModalType === 'address') {
+        valueToSave = {
+          flat: Flat || '',
+          landmark: Landmark || '',
+          pincode: PostalCode || '',
+          city: City || '',
+          state: Province || '',
+        };
+      }
+
+      // basic validation examples
+      if (!updateFn) {
+        console.log('No update function for ModalType:', ModalType);
+        return;
+      }
+      if (ModalType !== 'address' && (!valueToSave || valueToSave === '')) {
+        console.log('Empty value, not saving');
+        return;
+      }
+
+      // call DB updater
+      await updateFn(valueToSave, ClientDetails?.id);
+
+      // refresh client details from DB and update redux
+      const fresh = await getClientDetails(ClientDetails?.id);
+      dispatch({ type: CLIENT_DETAILS, payload: fresh });
+
+      // close modal
+      setEditModal(false);
+    } catch (err) {
+      console.log('Update error:', err);
+    }
+  };
+
+  const onSwitchToSupplier = async () => {
+    if (!ClientDetails?.id) return;
+
+    try {
+      // Update DB
+      await switchClientToSupplier(ClientDetails.id);
+
+      // Refresh Redux state
+      const updatedClient = await getClientDetails(ClientDetails.id);
+      dispatch({
+        type: CLIENT_DETAILS,
+        payload: updatedClient,
+      });
+
+      console.log('Client switched to supplier');
+
+      navigation.reset({
+        index: 0, // active screen index
+        routes: [{ name: 'HomeScreen' }], // screens in the stack
+      });
+    } catch (err) {
+      console.log('Error switching to supplier:', err);
+    }
+  };
+
+  const handleUpdateCreditLimit = async (clientId, newCreditLimit) => {
+    const limit = Number(newCreditLimit);
+
+    if (type === 'payable' && Number(amount) > limit) {
+      Alert.alert(
+        'Credit Limit Warning',
+        `The customer balance Rs ${amount} is already greater than Rs ${limit}.\nAre you sure you want to continue?`,
+        [
+          {
+            text: 'No',
+            style: 'cancel',
+          },
+          {
+            text: 'Yes',
+            onPress: async () => {
+              try {
+                const success = await updateClientCreditLimit(clientId, limit);
+                if (success) {
+                  console.log('Credit limit updated successfully');
+                  const res = await getClientDetails(clientId);
+                  dispatch({ type: CLIENT_DETAILS, payload: res });
+                  setEditModal(false);
+                } else {
+                  console.log('No client found with this ID');
+                }
+              } catch (err) {
+                console.log(err);
+              }
+            },
+          },
+        ],
+        { cancelable: true }
+      );
+    } else {
+      try {
+        const success = await updateClientCreditLimit(clientId, limit);
+        if (success) {
+          console.log('Credit limit updated successfully');
+          const res = await getClientDetails(clientId);
+          dispatch({ type: CLIENT_DETAILS, payload: res });
+          setEditModal(false);
+        } else {
+          console.log('No client found with this ID');
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  };
+
+  const onToggleClientTypePress = (client) => {
+    const fromType = client.type === 0 ? 'Customer' : 'Supplier';
+    const toType = client.type === 0 ? 'Supplier' : 'Customer';
+
+    Alert.alert(
+      'Change Client Type',
+      `${client.name} and all related records will be safely changed from ${fromType} to ${toType}. Do you want to continue?`,
+      [
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancelled changing client type'),
+          style: 'cancel',
+        },
+        {
+          text: 'Change',
+          onPress: async () => {
+            try {
+              const newType = client.type === 0 ? 1 : 0;
+              await changeClientType(client.id, newType);
+              console.log(`Client type changed to ${newType}`);
+              navigation.reset({
+                index: 0, // active screen
+                routes: [
+                  {
+                    name: 'HomeScreen',
+                    state: {
+                      routes: [
+                        {
+                          name:
+                            ClientDetails?.type == 0
+                              ? 'Customers'
+                              : 'Suppliers',
+                        },
+                      ], // nested screen
+                    },
+                  },
+                ],
+              });
+            } catch (err) {
+              console.log('Error changing client type:', err);
+            }
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  const onDeleteClient = () => {
+    Alert.alert(
+      `Delete ${ClientDetails?.type == 0 ? 'Customer' : 'Supplier'}`, // Title
+      `Are you sure you want to delete this ${ClientDetails?.type == 0 ? 'customer' : 'supplier'}?`,
+      [
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancel'),
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive', // optional: shows in red on iOS
+          onPress: async () => {
+            try {
+              await softDeleteClient(ClientDetails?.id);
+              navigation.reset({
+                index: 0, // active screen
+                routes: [
+                  {
+                    name: 'HomeScreen',
+                    state: {
+                      routes: [
+                        {
+                          name:
+                            ClientDetails?.type == 0
+                              ? 'Customers'
+                              : 'Suppliers',
+                        },
+                      ], // nested screen
+                    },
+                  },
+                ],
+              });
+            } catch (err) {
+              console.log('Error soft deleting transaction:', err);
+            }
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  const onInstallmentChange = () => {
+    const paymentJSON = {
+      active: IsInstallment ? '1' : '0',
+      payment_mode: Duration,
+      amount: Number(InstallmentAmount),
+      total: Number(Remaining),
+      interval: 2592000000,
+      start_date: date ? date.getTime() : null,
+      last_entry_date: new Date().getTime(),
+    };
+
+    updateClientInstallmentDetails(ClientDetails?.id, paymentJSON)
+      .then(async () => {
+        console.log('Payment details updated successfully');
+        getClientDetails(ClientDetails?.id).then((res) => {
+          dispatch({
+            type: CLIENT_DETAILS,
+            payload: res,
+          });
+        });
+      })
+      .catch((err) => console.log('Error:', err));
+  };
+
+  useEffect(() => {
+    onInstallmentChange();
+  }, [IsInstallment, Duration, InstallmentAmount, Remaining, date]);
+
+  useEffect(() => {
+    if (ClientDetails?.payment_mode) {
+      const payment_mode = JSON.parse(ClientDetails.payment_mode);
+
+      setIsInstallment(payment_mode?.active !== '0');
+      setDuration(payment_mode?.payment_mode);
+      setInstallmentAmount(String(payment_mode?.amount));
+      setRemaining(String(payment_mode?.total));
+
+      // Convert timestamp to Date
+      setDate(
+        payment_mode?.start_date ? new Date(payment_mode.start_date) : null
+      );
+    }
+    setAccountNumber(ClientDetails?.phone);
+    setAccountTitle(ClientDetails?.notification);
+  }, []);
+
+  const onBankUpdate = async () => {
+    if (!AccountTitle || !AccountNumber) {
+      Alert.alert('Both fields are required');
+    } else {
+      await updateBankProfile(ClientDetails?.id, AccountNumber, AccountTitle);
+      getClientDetails(ClientDetails?.id).then((res) => {
+        dispatch({
+          type: CLIENT_DETAILS,
+          payload: res,
+        });
+        navigation.goBack();
+      });
+    }
+  };
+
+  return (
+    <>
+      <View style={Styles._mainContainer}>
+        <LinearGradient
+          style={Styles._headerMain}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+        >
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => navigation?.goBack()}
+            style={{ padding: 10 }}
+          >
+            <Ionicons
+              name={'chevron-back'}
+              color={COLORS.whiteColor}
+              size={60 / PixelRatio.get()}
+            />
+          </TouchableOpacity>
+
+          <Text style={Styles._headerTitle}>
+            {ClientDetails?.type == 0
+              ? 'Customer'
+              : ClientDetails?.type == 1
+                ? 'Supplier'
+                : 'Bank'}{' '}
+            Profile
+          </Text>
+        </LinearGradient>
+        <LinearGradient
+          style={[Styles._headerMain, { height: 30 }]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+        />
+        <ScrollView
+          style={{
+            width: WP(100),
+            position: 'absolute',
+            top: 55,
+            height: HP(95),
+          }}
+          contentContainerStyle={{ paddingBottom: 300 }}
+        >
+          <View style={Styles._contentMain}>
+            <View style={Styles._picMain}>
+              {ClientDetails?.local_path ? (
+                <Image
+                  source={{ uri: ClientDetails?.local_path }}
+                  style={[
+                    Styles._pic,
+                    { width: '100%', height: '100%', borderRadius: 100 },
+                  ]}
+                  resizeMode="cover"
+                />
+              ) : (
+                <Image
+                  source={require('../assets/images/user.png')}
+                  style={Styles._pic}
+                  resizeMode="contain"
+                />
+              )}
+
+              {ClientDetails?.type != 2 && (
+                <TouchableOpacity
+                  style={Styles._selectMain}
+                  activeOpacity={0.8}
+                  onPress={togglePicker}
+                >
+                  <Ionicons
+                    name={'camera-outline'}
+                    color={COLORS.whiteColor}
+                    size={20}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+
+            {ClientDetails?.type == 2 ? (
+              <>
+                <Text style={Styles._bankName}>{ClientDetails?.name}</Text>
+
+                <View
+                  style={{
+                    width: '100%',
+                    alignItems: 'center',
+                    gap: 15,
+                    marginVertical: 20,
+                  }}
+                >
+                  {/* <TextInput
+                    style={[Styles._input, Styles._inputText]}
+                    placeholder="Account Title"
+                    placeholderTextColor={COLORS.gray}
+                    maxLength={25}
+                    value={AccountTitle}
+                    onChangeText={(text) => setAccountTitle(text)}
+                  /> */}
+
+                  <FloatingInput
+                    label="Account Title"
+                    iconName="person-outline"
+                    iconPosition="right"
+                    value={AccountTitle}
+                    onChangeText={(text) => setAccountTitle(text)}
+                    allowedChars={/[^A-Za-z0-9\s]/g}
+                    maxLength={15}
+                    containerStyle={{ width: '95%' }}
+                  // editable={false}
+                  />
+
+                  {/* <TextInput
+                    style={[Styles._input, Styles._inputText]}
+                    placeholder="Account Number"
+                    placeholderTextColor={COLORS.gray}
+                    maxLength={30}
+                    value={AccountNumber}
+                    onChangeText={(text) => setAccountNumber(text)}
+                  /> */}
+                  <FloatingInput
+                    label="Account Number"
+                    iconName="card-outline"
+                    iconPosition="right"
+                    value={AccountNumber}
+                    onChangeText={(text) => setAccountNumber(text)}
+                    allowedChars={/[^A-Za-z0-9\s]/g}
+                    keyboardType="numeric" // 👉 opens numeric keyboard
+                    maxLength={15}
+                    containerStyle={{ width: '95%' }}
+                  // editable={false}
+                  />
+                </View>
+              </>
+            ) : (
+              <View style={Styles._inputsMain}>
+                {/* <TouchableOpacity
+                  style={Styles._input}
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    setModalType('name');
+                    setName(ClientDetails?.name || '');
+                    setEditModal(true);
+                  }}
+                >
+                  <Text style={Styles._inputText}>
+                    {ClientDetails?.name || 'Name'}
+                  </Text>
+                  <View style={Styles._inputIconMain}>
+                    <Ionicons
+                      name={'person-outline'}
+                      color={COLORS.primaryColor}
+                      size={15}
+                    />
+                  </View>
+                </TouchableOpacity> */}
+
+                <FloatingInput
+                  label="Account Name"
+                  // iconName="person-outline"
+                  iconPosition="right"
+                  value={ClientDetails?.name || 'Name'}
+                  onPress={() => {
+                    setModalType('name');
+                    setName(ClientDetails?.name || '');
+                    setEditModal(true);
+                  }}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  maxLength={20}
+                  containerStyle={{ width: '95%' }}
+                  editable={false}
+                />
+
+                {/* <TouchableOpacity
+                  style={Styles._input}
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    setModalType('number');
+                    setPhoneNum(ClientDetails?.phone || '');
+                    setEditModal(true);
+                  }}
+                >
+                  <Text style={Styles._inputText}>
+                    {ClientDetails?.phone || 'Phone Number'}
+                  </Text>
+                  <View style={Styles._inputIconMain}>
+                    <Ionicons
+                      name={'call-outline'}
+                      color={COLORS.primaryColor}
+                      size={15}
+                    />
+                  </View>
+                </TouchableOpacity> */}
+
+                <FloatingInput
+                  label="Phone Number"
+                  // iconName="phone-portrait-outline"
+                  iconPosition="right"
+                  value={ClientDetails?.phone || 'Phone Number'}
+                  onPress={() => {
+                    setModalType('number');
+                    setPhoneNum(ClientDetails?.phone || '');
+                    setEditModal(true);
+                  }}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  // maxLength={20}
+                  editable={false}
+                  containerStyle={{ width: '95%' }}
+                />
+
+                {/* <TouchableOpacity
+                  style={Styles._input}
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    setModalType('cnic');
+                    setCnic(ClientDetails?.cnic || '');
+                    setEditModal(true);
+                  }}
+                >
+                  <Text style={Styles._inputText}>
+                    {ClientDetails?.cnic || 'CNIC'}
+                  </Text>
+                  <View style={Styles._inputIconMain}>
+                    <Ionicons
+                      name={'id-card-outline'}
+                      color={COLORS.primaryColor}
+                      size={15}
+                    />
+                  </View>
+                </TouchableOpacity> */}
+
+                <FloatingInput
+                  label="CNIC"
+                  // iconName="id-card-outline"
+                  iconPosition="right"
+                  value={ClientDetails?.cnic || ''}
+                  onPress={() => {
+                    setModalType('cnic');
+                    setCnic(ClientDetails?.cnic || '');
+                    setEditModal(true);
+                  }}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  // maxLength={20}
+                  editable={false}
+                  containerStyle={{ width: '95%' }}
+                />
+
+                {/* <TouchableOpacity
+                  style={Styles._input}
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    setModalType('address');
+                    if (ClientDetails?.status) {
+                      const addr = JSON.parse(ClientDetails?.status);
+                      setFlat(addr.flat || '');
+                      setLandmark(addr.landmark || '');
+                      setPostalCode(addr.pincode || '');
+                      setCity(addr.city || '');
+                      setProvince(addr.state || '');
+                    }
+                    setEditModal(true);
+                  }}
+                >
+                  <Text style={Styles._inputText}>Add Address</Text>
+                  <View style={Styles._inputIconMain}>
+                    <Ionicons
+                      name={'location-outline'}
+                      color={COLORS.primaryColor}
+                      size={15}
+                    />
+                  </View>
+                </TouchableOpacity> */}
+
+                <FloatingInput
+                  label="Add Address"
+                  // iconName="location-outline"
+                  iconPosition="right"
+                  onPress={() => {
+                    setModalType('address');
+                    if (ClientDetails?.status) {
+                      const addr = JSON.parse(ClientDetails?.status);
+                      setFlat(addr.flat || '');
+                      setLandmark(addr.landmark || '');
+                      setPostalCode(addr.pincode || '');
+                      setCity(addr.city || '');
+                      setProvince(addr.state || '');
+                    }
+                    setEditModal(true);
+                  }}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  // maxLength={20}
+                  editable={false}
+                  containerStyle={{ width: '95%' }}
+                />
+              </View>
+            )}
+          </View>
+          {(ClientDetails?.type == 0 || ClientDetails?.type == 1) && (
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._switchToSupplier}
+              onPress={() => onToggleClientTypePress(ClientDetails)}
+            >
+              <Text style={Styles._inputText}>
+                Switch to {ClientDetails?.type == 0 ? 'Supplier' : 'Customer'}
+              </Text>
+
+              <Ionicons
+                name={'chevron-forward'}
+                color={COLORS.primaryColor}
+                size={20}
+              />
+            </TouchableOpacity>
+          )}
+
+          {ClientDetails?.type == 0 && (
+            <View
+              style={[
+                Styles._contentMain,
+                {
+                  marginTop: 15,
+                  alignItems: 'center',
+                  paddingHorizontal: 10,
+                  gap: 10,
+                },
+              ]}
+            >
+              <Text
+                style={{
+                  alignSelf: 'flex-start',
+                  color: COLORS.blackColor,
+                  fontFamily: FONT_NORMAL,
+                  fontSize: 12,
+                }}
+              >
+                Credit Limit
+              </Text>
+              {/* <TextInput
+                            style={[Styles._input, { width: "100%" }, Styles._inputText]}
+                            activeOpacity={0.8}
+                            placeholder='Enter Credit Limit'
+                            placeholderTextColor={COLORS.gray}
+                            keyboardType='number-pad'
+                            value={CreditLimit}
+                            onChangeText={(text) => setCreditLimit(text)}
+                        /> */}
+
+              {/* <TouchableOpacity
+                style={[Styles._input, { width: '100%' }]}
+                activeOpacity={0.8}
+                onPress={() => {
+                  setModalType('limit');
+                  setCreditLimit(ClientDetails?.credit_limit || '');
+                  setEditModal(true);
+                }}
+              >
+                <Text style={Styles._inputText}>
+                  {ClientDetails?.credit_limit
+                    ? 'Rs ' + ClientDetails?.credit_limit
+                    : 'Enter Limit'}
+                </Text>
+              </TouchableOpacity> */}
+
+              <FloatingInput
+                label="Credit Limit"
+                // iconName="location-outline"
+                iconPosition="right"
+                value={
+                  ClientDetails?.credit_limit
+                    ? 'Rs ' + ClientDetails?.credit_limit
+                    : 'Enter Limit'
+                }
+                onPress={() => {
+                  setModalType('limit');
+                  setCreditLimit(ClientDetails?.credit_limit || '');
+                  setEditModal(true);
+                }}
+                allowedChars={/[^A-Za-z0-9\s]/g}
+                keyboardType="numeric"
+                editable={false}
+                // maxLength={20}
+                containerStyle={{ width: '100%' }}
+              />
+            </View>
+          )}
+
+          {ClientDetails?.type == 0 && (
+            <View
+              style={[
+                Styles._contentMain,
+                { marginTop: 15, paddingHorizontal: 10, gap: 10 },
+              ]}
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  width: '100%',
+                  gap: 10,
+                }}
+              >
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    setIsInstallment(!IsInstallment);
+                  }}
+                  style={{ alignSelf: 'flex-start' }}
+                >
+                  <Ionicons
+                    name={IsInstallment ? 'checkbox-outline' : 'square-outline'}
+                    color={COLORS.primaryColor}
+                    size={25}
+                  />
+                </TouchableOpacity>
+
+                <Text style={Styles._smallText}>Installment</Text>
+              </View>
+
+              {/* <View style={Styles._textInputMain}>
+                <Text style={Styles._inputText}>Rs</Text>
+
+                <TextInput
+                  placeholder="0"
+                  style={Styles._textInput}
+                  cursorColor={COLORS.primaryColor}
+                  placeholderTextColor={COLORS.grey}
+                  keyboardType="number-pad"
+                  value={InstallmentAmount}
+                  onChangeText={(text) => {
+                    // Remove any non-numeric characters
+                    const numericText = text.replace(/[^0-9]/g, '');
+                    setInstallmentAmount(numericText);
+                  }}
+                />
+
+              </View> */}
+
+              <View
+                style={{
+                  // flexDirection: 'row',
+                  alignItems: 'center',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  marginTop: 12,
+                  gap: 0,
+                }}
+              >
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    width: '100%',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <TouchableOpacity
+                    style={[
+                      Styles._durationMain,
+                      {
+                        borderColor:
+                          Duration == 'monthly'
+                            ? COLORS.primaryColor
+                            : COLORS.gray,
+                      },
+                    ]}
+                    activeOpacity={0.8}
+                    onPress={() => setDuration('monthly')}
+                  >
+                    <Text style={Styles._smallText}>Monthly</Text>
+                  </TouchableOpacity>
+
+                  {/* <FloatingInput
+                  label="Monthly"
+                  // iconName="location-outline"
+                  iconPosition="right"
+                  onPress={() => setDuration('monthly')}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  editable={false}
+                  // maxLength={20}
+                  containerStyle={{ width: '30%' }}
+                /> */}
+
+                  <TouchableOpacity
+                    style={[
+                      Styles._durationMain,
+                      {
+                        borderColor:
+                          Duration == 'weekly'
+                            ? COLORS.primaryColor
+                            : COLORS.gray,
+                      },
+                    ]}
+                    activeOpacity={0.8}
+                    onPress={() => setDuration('weekly')}
+                  >
+                    <Text style={Styles._smallText}>Weekly</Text>
+                  </TouchableOpacity>
+
+                  {/* <FloatingInput
+                  label="Weekly"
+                  // iconName="location-outline"
+                  iconPosition="right"
+                  onPress={() => setDuration('monthly')}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  editable={false}
+                  // maxLength={20}
+                  containerStyle={{ width: '30%' }}
+                /> */}
+
+                  <TouchableOpacity
+                    style={[
+                      Styles._durationMain,
+                      {
+                        borderColor:
+                          Duration == 'daily' ? COLORS.primaryColor : COLORS.gray,
+                      },
+                    ]}
+                    activeOpacity={0.8}
+                    onPress={() => setDuration('daily')}
+                  >
+                    <Text style={Styles._smallText}>Daily</Text>
+                  </TouchableOpacity>
+                  {/* <FloatingInput
+                  label="Daily"
+                  // iconName="location-outline"
+                  iconPosition="right"
+                  onPress={() => setDuration('daily')}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  editable={false}
+                  // maxLength={20}
+                  containerStyle={{ width: '30%' }}
+                /> */}
+                </View>
+                {/* <View
+                  style={[
+                    Styles._textInputMain,
+                    { width: '100%', justifyContent: 'center' },
+                  ]}
+                >
+                  <View style={Styles._capsuleMain}>
+                    <Text style={Styles._capsuleText}>
+                      Remaining Installments
+                    </Text>
+                  </View>
+
+                  <TextInput
+                    placeholder="0"
+                    style={[Styles._textInput, { width: '100%' }]}
+                    cursorColor={COLORS.primaryColor}
+                    placeholderTextColor={COLORS.grey}
+                    keyboardType="number-pad"
+                    value={Remaining}
+                    onChangeText={(text) => {
+                      // Remove any non-numeric characters
+                      const numericText = text.replace(/[^0-9]/g, '');
+                      setRemaining(numericText);
+                    }}
+                  />
+                </View> */}
+                <FloatingInput
+                  label="RS"
+                  // iconName="location-outline"
+                  iconPosition="right"
+                  value={InstallmentAmount}
+                  onChangeText={(text) => {
+                    // Remove any non-numeric characters
+                    const numericText = text.replace(/[^0-9]/g, '');
+                    setInstallmentAmount(numericText);
+                  }}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  // editable={false}
+                  // maxLength={20}
+                  containerStyle={{ width: '100%' }}
+                />
+
+                <FloatingInput
+                  label="Remaining Installments"
+                  // iconName="location-outline"
+                  iconPosition="right"
+                  value={Remaining}
+                  onChangeText={(text) => {
+                    // Remove any non-numeric characters
+                    const numericText = text.replace(/[^0-9]/g, '');
+                    setRemaining(numericText);
+                  }}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  // editable={false}
+                  // maxLength={20}
+                  containerStyle={{ width: '100%' }}
+                />
+
+                {/* <TouchableOpacity
+                  activeOpacity={0.8}
+                  style={[
+                    Styles._textInputMain,
+                    { width: '100%', justifyContent: 'center' },
+                  ]}
+                  onPress={showDate}
+                >
+                  <View style={Styles._capsuleMain}>
+                    <Text style={Styles._capsuleText}>Start Date</Text>
+                  </View>
+
+                  <View
+                    style={{
+                      width: '100%',
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}
+                  >
+                    <Ionicons
+                      name={'calendar-outline'}
+                      size={22}
+                      color={COLORS.primaryColor}
+                    />
+
+                    <Text style={Styles._smallText}>
+                      {date ? date?.toDateString() : 'Date'}
+                    </Text>
+                  </View>
+                </TouchableOpacity> */}
+
+                <FloatingInput
+                  label="Start Date"
+                  // iconName="location-outline"
+                  iconPosition="right"
+                  value={date ? date?.toDateString() : 'Date'}
+                  onPress={showDate}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  keyboardType="numeric"
+                  editable={false}
+                  containerStyle={{ width: '100%' }}
+                />
+              </View>
+            </View>
+          )}
+        </ScrollView>
+      </View>
+
+      <PickerModal
+        isVisible={IsPicker}
+        onBackButtonPress={togglePicker}
+        onBackdropPress={togglePicker}
+        onCameraPress={(a) => {
+          onPictureUpdate(a?.uri);
+        }}
+        onGalleryPress={(a) => {
+          onPictureUpdate(a?.uri);
+        }}
+      />
+
+      <Modal
+        isVisible={EditModal}
+        onBackButtonPress={() => setEditModal(false)}
+        onBackdropPress={() => setEditModal(false)}
+      >
+        <View style={Styles._editModalMain}>
+          <Text
+            style={[
+              Styles._inputText,
+              { color: COLORS.primaryColor, fontSize: 16 },
+            ]}
+          >
+            {ModalType === 'name'
+              ? 'Name'
+              : ModalType === 'limit'
+                ? 'Credit Limit'
+                : ModalType === 'number'
+                  ? 'Phone Number'
+                  : ModalType === 'cnic'
+                    ? 'CNIC Number'
+                    : ModalType === 'address'
+                      ? 'Address'
+                      : ''}
+          </Text>
+          {ModalType !== 'number' && (
+            // <TextInput
+            //   placeholder={
+            //     ModalType === 'name'
+            //       ? 'Name'
+            //       : ModalType === 'limit'
+            //         ? 'Enter Limit'
+            //         : ModalType === 'number'
+            //           ? 'Phone Number'
+            //           : ModalType === 'cnic'
+            //             ? 'XXXXX-XXXXXXX-X'
+            //             : ModalType === 'address'
+            //               ? 'Flat/Building/House'
+            //               : ''
+            //   }
+            //   style={Styles._modalInput}
+            //   placeholderTextColor={COLORS.grey}
+            //   cursorColor={COLORS.primaryColor}
+            //   keyboardType={
+            //     ModalType === 'limit' || ModalType === 'cnic'
+            //       ? 'number-pad'
+            //       : 'default'
+            //   }
+            //   value={
+            //     ModalType === 'name'
+            //       ? Name
+            //       : ModalType === 'limit'
+            //         ? String(CreditLimit)
+            //         : ModalType === 'number'
+            //           ? PhoneNum
+            //           : ModalType === 'cnic'
+            //             ? Cnic
+            //             : ModalType === 'address'
+            //               ? Flat
+            //               : ''
+            //   }
+            //   onChangeText={(text) => {
+            //     // ✅ filter input for cnic and limit
+            //     if (ModalType === 'limit' || ModalType === 'cnic') {
+            //       // Keep only digits
+            //       text = text.replace(/[^0-9]/g, '');
+            //     }
+
+            //     if (ModalType === 'name') {
+            //       setName(text);
+            //     } else if (ModalType === 'number') {
+            //       setPhoneNum(text);
+            //     } else if (ModalType === 'cnic') {
+            //       setCnic(text);
+            //     } else if (ModalType === 'address') {
+            //       setFlat(text);
+            //     } else if (ModalType === 'limit') {
+            //       setCreditLimit(text);
+            //     }
+            //   }}
+            // />
+            <FloatingInput
+              label={
+                ModalType === 'name'
+                  ? 'Name'
+                  : ModalType === 'limit'
+                    ? 'Enter Limit'
+                    : ModalType === 'number'
+                      ? 'Phone Number'
+                      : ModalType === 'cnic'
+                        ? 'XXXXX-XXXXXXX-X'
+                        : ModalType === 'address'
+                          ? 'Flat/Building/House'
+                          : ''
+              }
+              // iconName="location-outline"
+              iconPosition="right"
+              value={
+                ModalType === 'name'
+                  ? Name
+                  : ModalType === 'limit'
+                    ? String(CreditLimit)
+                    : ModalType === 'number'
+                      ? PhoneNum
+                      : ModalType === 'cnic'
+                        ? Cnic
+                        : ModalType === 'address'
+                          ? Flat
+                          : ''
+              }
+              onChangeText={(text) => {
+                // ✅ filter input for cnic and limit
+                if (ModalType === 'limit' || ModalType === 'cnic') {
+                  // Keep only digits
+                  text = text.replace(/[^0-9]/g, '');
+                }
+
+                if (ModalType === 'name') {
+                  setName(text);
+                } else if (ModalType === 'number') {
+                  setPhoneNum(text);
+                } else if (ModalType === 'cnic') {
+                  setCnic(text);
+                } else if (ModalType === 'address') {
+                  setFlat(text);
+                } else if (ModalType === 'limit') {
+                  setCreditLimit(text);
+                }
+              }}
+              allowedChars={/[^A-Za-z0-9\s]/g}
+              maxLength={15}
+              containerStyle={{ width: '95%' }}
+            />
+          )}
+          {ModalType == 'number' && (
+            <View style={{ width: '95%' }}>
+              <CountryPhoneInput
+                onChange={(text) => {
+                  setPhoneNum(text?.fullNumber);
+                }}
+              />
+            </View>
+          )}
+
+          {ModalType == 'address' && (
+            <View style={{ width: '100%', alignItems: 'center', gap: 25 }}>
+              {/* <TextInput
+                placeholder="Landmark"
+                style={Styles._modalInput}
+                placeholderTextColor={COLORS.grey}
+                cursorColor={COLORS.primaryColor}
+                value={Landmark}
+                onChangeText={(text) => setLandmark(text)}
+              /> */}
+
+              <FloatingInput
+                label="Landmark"
+                // iconName="location-outline"
+                iconPosition="right"
+                value={Landmark}
+                onChangeText={(text) => setLandmark(text)}
+                allowedChars={/[^A-Za-z0-9\s]/g}
+                maxLength={20}
+                containerStyle={{ width: '95%' }}
+              />
+
+              {/* <TextInput
+                placeholder="Postal Code"
+                style={Styles._modalInput}
+                placeholderTextColor={COLORS.grey}
+                cursorColor={COLORS.primaryColor}
+                value={PostalCode}
+                onChangeText={(text) => setPostalCode(text)}
+              /> */}
+
+              <FloatingInput
+                label="Postal Code"
+                // iconName="location-outline"
+                iconPosition="right"
+                value={PostalCode}
+                onChangeText={(text) => setPostalCode(text)}
+                allowedChars={/[^A-Za-z0-9\s]/g}
+                keyboardType="numeric"
+                maxLength={10}
+                containerStyle={{ width: '95%' }}
+              />
+
+              {/* <TextInput
+                placeholder="City"
+                style={Styles._modalInput}
+                placeholderTextColor={COLORS.grey}
+                cursorColor={COLORS.primaryColor}
+                value={City}
+                onChangeText={(text) => setCity(text)}
+              /> */}
+
+              <FloatingInput
+                label="City"
+                // iconName="location-outline"
+                iconPosition="right"
+                value={City}
+                onChangeText={(text) => setCity(text)}
+                allowedChars={/[^A-Za-z0-9\s]/g}
+                maxLength={15}
+                containerStyle={{ width: '95%' }}
+              />
+
+              {/* <TextInput
+                placeholder="Province"
+                style={Styles._modalInput}
+                placeholderTextColor={COLORS.grey}
+                cursorColor={COLORS.primaryColor}
+                value={Province}
+                onChangeText={(text) => setProvince(text)}
+              /> */}
+              <FloatingInput
+                label="Province"
+                // iconName="location-outline"
+                iconPosition="right"
+                value={Province}
+                onChangeText={(text) => setProvince(text)}
+                allowedChars={/[^A-Za-z0-9\s]/g}
+                maxLength={15}
+                containerStyle={{ width: '95%' }}
+              />
+            </View>
+          )}
+
+          <View
+            style={{
+              width: '95%',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._modalBtn}
+              onPress={() => setEditModal(false)}
+            >
+              <Text style={Styles._modalBtnText}>Cancel</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={Styles._modalBtn}
+              onPress={() => {
+                if (ModalType == 'limit') {
+                  handleUpdateCreditLimit(ClientDetails?.id, CreditLimit);
+                } else {
+                  updateClientField();
+                }
+              }}
+            >
+              <Text style={Styles._modalBtnText}>Save</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
+      <BottomView
+        style={{
+          justifyContent: 'center',
+          width: '100%',
+          paddingHorizontal: '2.5%',
+        }}
+      >
+        {ClientDetails?.type == 2 ? (
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={[Styles._modalBtn, { width: '100%' }]}
+            onPress={onBankUpdate}
+          >
+            <Text style={Styles._modalBtnText}>Save</Text>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={Styles._bottomBtn}
+            onPress={onDeleteClient}
+          >
+            <Ionicons
+              name={'trash-outline'}
+              color={COLORS.whiteColor}
+              size={ICON_SIZES.FAB_ICON}
+            />
+            <Text
+              style={{
+                color: COLORS.whiteColor,
+                fontFamily: FONT_MEDIUM,
+                fontSize: TEXT_SIZES.BUTTON_TEXT,
+              }}
+            >
+              DELETE {ClientDetails?.type == 0 ? 'CUSTOMER' : 'SUPPLIER'}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </BottomView>
+    </>
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 15,
+  },
+  _headerTitle: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 15,
+  },
+  _contentMain: {
+    width: WP(94),
+    // height: "90%",
+    backgroundColor: COLORS.whiteColor,
+    // position: "absolute",
+    // top: 55,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    // paddingTop: 30
+  },
+  _picMain: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    backgroundColor: '#f2f2f2',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  _pic: {
+    width: 60,
+    height: 60,
+  },
+  _selectMain: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    backgroundColor: '#F44336',
+    width: 45,
+    height: 45,
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: '#fff',
+  },
+  _input: {
+    width: '95%',
+    height: Input_Field_SIZES.Input_Height,
+    // backgroundColor:"red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 15,
+  },
+  _inputIconMain: {
+    width: 38,
+    height: 38,
+    backgroundColor: COLORS.lightGrey,
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _inputText: {
+    color: COLORS.blackColor,
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    fontFamily: FONT_MEDIUM,
+  },
+  _inputsMain: {
+    marginTop: 60,
+    gap: 0,
+    width: '100%',
+
+    alignItems: 'center',
+  },
+  _switchToSupplier: {
+    width: WP(94),
+    height: 60,
+    // height: "90%",
+    backgroundColor: COLORS.whiteColor,
+    // position: "absolute",
+    // top: 55,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    marginTop: 15,
+    flexDirection: 'row',
+    paddingHorizontal: 10,
+  },
+  _smallText: {
+    color: COLORS.blackColor,
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    fontFamily: FONT_MEDIUM,
+  },
+  _durationMain: {
+    height: 60,
+    width: '30%',
+    // backgroundColor:"red",
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 7,
+  },
+  _textInputMain: {
+    width: '100%',
+    height: 60,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    gap: 15,
+  },
+  _textInput: {
+    height: '100%',
+    color: COLORS.blackColor,
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    fontFamily: FONT_MEDIUM,
+    width: '85%',
+  },
+  _capsuleMain: {
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    // right:0,
+    // width:"100%",
+    alignSelf: 'center',
+    top: -10,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+  },
+  _capsuleText: {
+    color: COLORS.gray,
+    fontFamily: FONT_NORMAL,
+    fontSize: 10,
+  },
+  _editModalMain: {
+    width: WP(90),
+    // height: HP(25),r
+    backgroundColor: COLORS.whiteColor,
+    alignSelf: 'center',
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    gap: 30,
+  },
+  _modalInput: {
+    width: '95%',
+    height: Input_Field_SIZES.Input_Height,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.gray,
+    borderWidth: 1,
+    paddingLeft: 10,
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    fontFamily: FONT_MEDIUM,
+  },
+  _modalBtn: {
+    width: '45%',
+    height: 45,
+    borderRadius: 100,
+    backgroundColor: COLORS.primaryColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  _modalBtnText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 14,
+  },
+  _bottomBtn: {
+    width: '100%',
+    height: '90%',
+    backgroundColor: COLORS.primaryColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: 100,
+    borderColor: 'red',
+    borderWidth: 1,
+    paddingHorizontal: 20,
+    gap: 10,
+  },
+  _bankName: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+    marginTop: 15,
+  },
+});