digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/HomeScreen.js

@@ -1,146 +1,382 @@
-import { View, Text, SafeAreaView, TouchableOpacity, StyleSheet } from 'react-native'
-import React from 'react'
+import {
+  View,
+  Text,
+  SafeAreaView,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+} from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { COLORS, FONT_MEDIUM, FONT_NORMAL, HP, WP } from '../themes/config';
+import {
+  COLORS,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  HP,
+  ICON_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
-import { Banks, Customers, Suppliers } from "../screens";
+import { All, Banks, Customers, Suppliers } from '../screens';
 import { TabView, SceneMap } from 'react-native-tab-view';
-import { useSelector, useDispatch } from "react-redux";
-
+import { useSelector, useDispatch } from 'react-redux';
+import axios from 'axios';
+import { addBank, bankExists } from '../database/clients';
+import { useNavigation, CommonActions } from '@react-navigation/native';
+import { STATUS_BAR_COLOR } from '../redux/reducers/client/client_types';
+import { GET_BUSINESSES_BY_USER_ID } from '../api/api';
+import { Loader } from '../components';
+import { USER_BUSINESS } from '../redux/reducers/user/user_types';
 
 const Tab = createMaterialTopTabNavigator();
 
 export default function HomeScreen({ navigation }) {
 
-    const [index, setIndex] = React.useState(0);
-    const clients = useSelector(state => state.client.home_customers);
+  const dispatch = useDispatch()
+
+  const hasReset = useRef(false);
+
+  const [index, setIndex] = React.useState(0);
+  const clients = useSelector((state) => state.client.home_customers);
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const userData = useSelector((state) => state.user.user_data);
+  const selectedBusiness = useSelector((state) => state.client.selected_business);
+  const userClients = useSelector((state) => state.user.user_clients);
+
+
+
+  const [activeTab, setActiveTab] = useState('Customers');
+  const [Loading, setLoading] = useState(false)
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'Customers':
+        return <Customers />;
+      case 'Suppliers':
+        return <Suppliers />;
+      case 'Banks':
+        return <Banks />;
+      case 'All':
+        return <All />;
+      default:
+        return null;
+    }
+  };
+
+  const fetchAndStoreBanks = async () => {
+    try {
+      const response = await axios.post(
+        'https://api.digikhata.pk/api/bank/list?phone=923089898999&source=Mashriq&bank_source=finja'
+      );
+
+      const banks = response?.data?.data?.data || [];
+
+      for (const bank of banks) {
+        // Check if bank already exists
+        const exists = await bankExists(bank.bank_id);
+        if (!exists) {
+          await addBank(
+            bank.bank_id,
+            bank.bank_name,
+            bank.bank_charges,
+            bank.transfer_time,
+            bank.icon,
+            bank.code,
+            bank.allowed_digits,
+            bank.bank_hint
+          );
+          console.log(`✅ Added bank: ${bank.bank_name}`);
+        } else {
+          console.log(`ℹ️ Bank already exists: ${bank.bank_name}`);
+        }
+      }
+
+      console.log('✅ Banks sync completed!');
+    } catch (error) {
+      console.log('❌ Error fetching or saving banks:', error);
+    }
+  };
+
+  useEffect(() => {
+    dispatch({
+      type: STATUS_BAR_COLOR,
+      color: COLORS.primaryColor
+    })
+    fetchAndStoreBanks();
+  }, []);
+
+  const onBusinessPress = () => {
+    navigation.navigate('SelectBusiness');
+    // setLoading(true);
+    // axios({
+    //   method: "GET",
+    //   url: GET_BUSINESSES_BY_USER_ID + `/${userData?.serverId}`,
+    //   headers: {
+    //     Authorization: `Bearer ${userData?.azureToken}`
+    //   }
+    // })
+    // .then((response) => {
+    //   setLoading(false);
+    //   dispatch({
+    //     type: USER_BUSINESS,
+    //     payload: response.data[0]
+    //   })
+    //   navigation.navigate('SelectBusiness');
+    // })
+    // .catch((error) => {
+    //   setLoading(false);
+    //   console.log(error);
+    // })
+  }
+
+  return (
+    <SafeAreaView style={Styles._mainContainer}>
+      <Loader isVisible={Loading} />
+      <LinearGradient
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+        style={Styles._headerMain}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+      >
+        {/* HEADER TOP ROW */}
+        <View style={Styles._headerTop}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 15 }}>
+            <Ionicons name={'menu'} color={COLORS.whiteColor} size={30} />
+            <TouchableOpacity
+              style={{ flexDirection: 'row', alignItems: 'center' }}
+              activeOpacity={0.8}
+              onPress={() => {
+                // navigation.navigate('SelectBusiness');
+                onBusinessPress();
+              }}
+            >
+              <Text style={Styles._headerTitle}>{selectBusiness?.name} </Text>
+              <Ionicons
+                name={'chevron-down'}
+                color={COLORS.whiteColor}
+                size={20}
+              />
+            </TouchableOpacity>
+          </View>
+
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 15 }}>
+            <TouchableOpacity
+              style={[Styles._collectionBtn, { borderRadius: 5 }]}
+              activeOpacity={0.8}
+              onPress={() => Alert.alert('Coming Soon')}
+            >
+              <Ionicons
+                name={'notifications'}
+                color={COLORS.yellowColor}
+                size={18}
+              />
+              <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontSize: 8,
+                  fontFamily: FONT_MEDIUM,
+                }}
+              >
+                COLLECTION
+              </Text>
+            </TouchableOpacity>
 
-    return (
-        <SafeAreaView style={Styles._mainContainer}>
-            <LinearGradient
-                colors={[COLORS.primaryColor, COLORS.secondaryColor]}
-                style={Styles._headerMain}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 0 }}
+            <TouchableOpacity
+              style={Styles._collectionBtn}
+              activeOpacity={0.8}
+              onPress={() => Alert.alert('Coming Soon')}
             >
-                <View style={Styles._headerTop}>
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 15 }}>
-                        <Ionicons
-                            name={"menu"}
-                            color={COLORS.whiteColor}
-                            size={30}
-                        />
-                        <TouchableOpacity
-                            style={{ flexDirection: "row", alignItems: "center" }}
-                            activeOpacity={0.8}
-                            onPress={() => { navigation.navigate("SelectBusiness") }}
-                        >
-                            <Text style={Styles._headerTitle}>Saud Rehan</Text>
-                            <Ionicons
-                                name={"chevron-down"}
-                                color={COLORS.whiteColor}
-                                size={20}
-                            />
-                        </TouchableOpacity>
-                    </View>
-
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 15 }}>
-                        <TouchableOpacity style={Styles._collectionBtn} activeOpacity={0.8}>
-                            <Ionicons
-                                name={"notifications"}
-                                color={COLORS.yellowColor}
-                                size={18}
-                            />
-                            <Text style={{ color: COLORS.blackColor, fontSize: 8, fontFamily: FONT_MEDIUM }}>COLLECTION</Text>
-                        </TouchableOpacity>
-
-                        <Ionicons
-                            name={"help-circle-outline"}
-                            color={COLORS.whiteColor}
-                            size={30}
-                        />
-                    </View>
-                </View>
-
-
-
-            </LinearGradient>
-            <View style={{ height: "100%", marginTop: 10, position: "absolute", marginTop: HP(5), width: WP(100) }}>
-                <Tab.Navigator
-                    screenOptions={{
-                        tabBarIndicatorStyle: {
-                            backgroundColor: COLORS.whiteColor,
-                            height: 5,
-                            borderRadius: 200,
-                            marginLeft: 10,
-                        },
-                        tabBarLabelStyle: {
-                            fontSize: 13,
-                            color: "#fff",
-                        },
-                        tabBarStyle: {
-                            backgroundColor: "transparent",
-                        },
-                        tabBarItemStyle: {
-                            width: 80,
-                            padding: 0,
-                        },
-                        tabBarContentContainerStyle: {
-                            marginLeft: 10,
-                            marginBottom: 0
-
-                        },
-                    }}
-                >
-                    <Tab.Screen name="Customers" component={Customers} />
-                    <Tab.Screen name="Suppliers" component={Suppliers} />
-                    {/* <Tab.Screen name="Banks" component={Banks} /> */}
-                    <Tab.Screen name="All" component={Banks} />
-                </Tab.Navigator>
-            </View>
-        </SafeAreaView>
-
-    )
+              <Ionicons
+                name={'help-circle-outline'}
+                color={COLORS.yellowColor}
+                size={18}
+              />
+              {/* <Text
+                style={{
+                  color: COLORS.blackColor,
+                  fontSize: 8,
+                  fontFamily: FONT_MEDIUM,
+                }}
+              >
+                COLLECTION
+              </Text> */}
+            </TouchableOpacity>
+
+            {/* <Ionicons
+              name={'help-circle-outline'}
+              color={COLORS.whiteColor}
+              size={30}
+              onPress={() => {
+                Alert.alert('Coming Soon');
+              }}
+            /> */}
+          </View>
+        </View>
+
+        {/* TABS (inside same gradient) */}
+        {/* <View style={Styles.tabButtonRow}>
+          {['Customers', 'Suppliers', 'Banks', 'All'].map((tab) => (
+            <TouchableOpacity
+              key={tab}
+              style={[
+                Styles.tabButton,
+                activeTab === tab && Styles.activeTabButton,
+              ]}
+              onPress={() => setActiveTab(tab)}
+              activeOpacity={0.8}
+            >
+              <Text
+                style={[
+                  Styles.tabText,
+                  activeTab === tab && Styles.activeTabText,
+                ]}
+              >
+                {tab}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View> */}
+      </LinearGradient>
+
+      {/* TAB CONTENT BELOW */}
+      <View style={{ flex: 1 }}>{renderTabContent()}</View>
+
+      <View
+        style={{
+          height: '100%',
+          // marginTop: 10,
+          position: 'absolute',
+          marginTop: HP(5),
+          width: '100%',
+        }}
+      >
+        <Tab.Navigator
+          screenOptions={({ route }) => ({
+            tabBarScrollEnabled: false,
+            tabBarIndicatorStyle: {
+              backgroundColor: COLORS.brightYellow,
+              height: 5,
+              borderRadius: 50,
+              // width: 25, // small centered line
+            },
+            tabBarIndicatorContainerStyle: {
+              flexDirection: 'row',
+              justifyContent: 'space-evenly', // equal space per tab
+            },
+            tabBarItemStyle: {
+              width: 'auto',
+            },
+            tabBarLabelStyle: {
+              fontSize: 13,
+              color: '#fff',
+              fontFamily: FONT_MEDIUM,
+              textTransform: 'none',
+            },
+            tabBarStyle: {
+              backgroundColor: 'transparent',
+              elevation: 0,
+            },
+            tabBarLabel: ({ focused }) => (
+              <Text
+                style={{
+                  color: COLORS.whiteColor,
+                  fontSize: 15,
+                  fontFamily: FONT_MEDIUM,
+                  textTransform: 'none',
+                  opacity: focused ? 1 : 0.7
+                }}
+              >
+                {route.name}
+              </Text>
+            ),
+          })}
+        >
+          <Tab.Screen name="Customers" component={Customers} />
+          <Tab.Screen name="Suppliers" component={Suppliers} />
+          <Tab.Screen name="Banks" component={Banks} />
+          <Tab.Screen name="All" component={All} />
+        </Tab.Navigator>
+      </View>
+    </SafeAreaView>
+  );
 }
 
 const Styles = StyleSheet.create({
-    _mainContainer: {
-        flex: 1,
-        backgroundColor: COLORS.backgroundColor,
-    },
-    _headerMain: {
-        width: WP(100),
-        height: 100,
-        // backgroundColor:COLORS.primaryColor,
-        // justifyContent: 'center',
-        alignItems: 'center',
-        // position: "absolute",
-    },
-    _headerTop: {
-        width: WP(100),
-        // height: "35%",
-        // backgroundColor: "red",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: 15,
-        marginVertical: 10,
-        // marginTop: 10
-    },
-    _headerTitle: {
-        color: COLORS.whiteColor,
-        fontSize: 14,
-        fontFamily: FONT_MEDIUM
-    },
-    _collectionBtn: {
-        width: 95,
-        height: 30,
-        backgroundColor: COLORS.whiteColor,
-        borderRadius: 5,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: 8,
-    },
-})
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 100,
+    // backgroundColor:COLORS.primaryColor,
+    // justifyContent: 'center',
+    alignItems: 'center',
+    // position: "absolute",
+  },
+  _headerTop: {
+    width: WP(100),
+    // height: "35%",
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+    marginVertical: 10,
+    // marginTop: 10
+  },
+  _headerTitle: {
+    color: COLORS.whiteColor,
+    fontSize: 12,
+    fontFamily: FONT_MEDIUM,
+  },
+  _collectionBtn: {
+    // width: 95,
+    // height: 35,
+    padding: 5,
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: 100,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    // paddingHorizontal: 8,
+    gap: 7,
+  },
+
+  /// tab new style
+  tabBarContainer: {
+    paddingVertical: 10,
+    alignItems: 'center',
+  },
+
+  tabButtonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '95%', // keeps buttons centered, not full width
+    marginTop: 5,
+  },
+
+  tabButton: {
+    width: '22%', // ~80% total width across 4 buttons with small spacing
+    paddingVertical: 8,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    alignItems: 'center',
+  },
+
+  activeTabButton: {
+    backgroundColor: COLORS.whiteColor,
+  },
+
+  tabText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+  },
+
+  activeTabText: {
+    color: COLORS.primaryColor,
+  },
+});