digikhata-mashreq-sdk 0.1.1

package/src/app/screens/HomeScreen.js

@@ -0,0 +1,146 @@
+import { View, Text, SafeAreaView, TouchableOpacity, StyleSheet } from 'react-native'
+import React from 'react'
+import LinearGradient from 'react-native-linear-gradient';
+import { COLORS, FONT_MEDIUM, FONT_NORMAL, HP, 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 { TabView, SceneMap } from 'react-native-tab-view';
+import { useSelector, useDispatch } from "react-redux";
+
+
+const Tab = createMaterialTopTabNavigator();
+
+export default function HomeScreen({ navigation }) {
+
+    const [index, setIndex] = React.useState(0);
+    const clients = useSelector(state => state.client.home_customers);
+
+    return (
+        <SafeAreaView style={Styles._mainContainer}>
+            <LinearGradient
+                colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+                style={Styles._headerMain}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+            >
+                <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>
+
+    )
+}
+
+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,
+    },
+})

package/src/app/screens/SelectBusiness.js

@@ -0,0 +1,177 @@
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, Image } from 'react-native'
+import React from 'react'
+import { COLORS, FONT_MEDIUM, FONT_NORMAL, WP } from '../themes/config'
+import LinearGradient from 'react-native-linear-gradient'
+import Ionicons from "react-native-vector-icons/Ionicons"
+import { CountryPhoneInput } from '../components'
+
+export default function SelectBusiness({ navigation }) {
+    return (
+        <View style={Styles._mainContainers}>
+            <LinearGradient
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+                colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+                style={Styles._linearGradient}
+            >
+                <View style={Styles._titleMain}>
+                    <TouchableOpacity
+                        activeOpacity={0.8}
+                        onPress={() => { navigation.goBack() }}
+                    >
+                        <Ionicons
+                            name={"chevron-back"}
+                            color={COLORS.whiteColor}
+                            size={20}
+                        />
+                    </TouchableOpacity>
+
+                    <Text style={Styles._title}>Select Business</Text>
+                </View>
+            </LinearGradient>
+
+            <View style={Styles._contentMain}>
+                <View style={{ width: "100%", alignItems: "center", gap: 12 }}>
+                    <View style={Styles.businessMain}>
+                        <View style={{ flexDirection: "row", gap: 10 }}>
+                            <Image
+                                source={require("../assets/images/digiKhataSolo256.png")}
+                                resizeMode='contain'
+                                style={Styles._logo}
+                            />
+                            <View>
+                                <Text style={Styles._txt}>Saud Rehan</Text>
+                                <Text style={Styles._txt2}>12 Customers</Text>
+                            </View>
+                        </View>
+
+                        <View style={{ flexDirection: "row", gap: 10 }}>
+                            <Ionicons
+                                name={"checkmark"}
+                                color={COLORS.primaryColor}
+                                size={20}
+                            />
+
+                            <Ionicons
+                                name={"ellipsis-vertical"}
+                                color={COLORS.grey}
+                                size={20}
+                            />
+                        </View>
+                    </View>
+                </View>
+
+                <TouchableOpacity
+                    activeOpacity={0.8}
+                    style={Styles._continueBtn}
+                >
+                    <Text style={Styles._continueBtnTxt}>Add New Business</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const Styles = StyleSheet.create({
+    _mainContainers: {
+        flex: 1,
+        backgroundColor: COLORS.backgroundColor,
+        alignItems: "center"
+    },
+    _linearGradient: {
+        width: WP(100),
+        height: 80,
+        alignItems: "center",
+    },
+    _titleMain: {
+        width: WP(94),
+        height: 30,
+        // backgroundColor: "red",
+        flexDirection: "row",
+        alignItems: "center",
+        marginTop: 10
+    },
+    _title: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 15,
+        marginLeft: 15
+    },
+    _contentMain: {
+        width: WP(94),
+        height: "90%",
+        backgroundColor: COLORS.whiteColor,
+        position: "absolute",
+        top: 50,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+        borderRadius: 10,
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingVertical: 12,
+    },
+    _input: {
+        width: "95%",
+        height: 50,
+        backgroundColor: COLORS.whiteColor,
+        borderRadius: 15,
+        paddingLeft: 12,
+        borderColor: COLORS.grey,
+        borderWidth: 1,
+        color: COLORS.blackColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 13
+    },
+    _continueBtn: {
+        width: "95%",
+        height: 50,
+        backgroundColor: COLORS.primaryColor,
+        borderRadius: 100,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    _continueBtnTxt: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 17
+    },
+    businessMain: {
+        width: "95%",
+        height: 60,
+        backgroundColor: COLORS.whiteColor,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+        borderRadius: 10,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: 10
+    },
+    _logo: {
+        width: 30,
+        height: 30,
+    },
+    _txt: {
+        color: COLORS.blackColor,
+        fontFamily: FONT_MEDIUM,
+        fontSize: 13
+    },
+    _txt2: {
+        color: COLORS.blackColor,
+        opacity: 0.6,
+        fontFamily: FONT_NORMAL,
+        fontSize: 11
+    },
+})

package/src/app/screens/Splash.js

@@ -0,0 +1,43 @@
+import { View, Text, Image } from 'react-native'
+import React, { useEffect } from 'react'
+import LinearGradient from 'react-native-linear-gradient'
+import { COLORS } from '../themes/config'
+import { getClientsByType } from '../database/clients'
+import { useDispatch } from "react-redux";
+import { HOME_CUSTOMERS, HOME_SUPPLIERS } from '../redux/reducers/client/client_types'
+
+export default function Splash({ navigation }) {
+
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        setTimeout(() => {
+            navigation.replace('bottomTabs');
+
+            getClientsByType(0).then(clients => {
+                dispatch({ type: HOME_CUSTOMERS, payload: clients });
+                console.log("Clients:", clients);
+            }).catch(err => console.error(err));
+
+            getClientsByType(1).then(clients => {
+                dispatch({ type: HOME_SUPPLIERS, payload: clients });
+                console.log("Suppliers:", clients);
+            }).catch(err => console.error(err));
+
+
+        }, 2000);
+    }, [])
+
+    return (
+        <LinearGradient
+            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+            colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+        >
+            <Image
+                source={require("../assets/images/svgviewer-png-output-white.png")}
+                resizeMode='contain'
+                style={{ width: 170, height: 170 }}
+            />
+        </LinearGradient>
+    )
+}

package/src/app/screens/Suppliers.js

@@ -0,0 +1,228 @@
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
+import React, { useEffect } from 'react'
+import { COLORS, FONT_NORMAL, formatDateTime, HP, WP } from '../themes/config'
+import { Balance, Entries, SearchBar, User } from '../components'
+import Ionicons from "react-native-vector-icons/Ionicons"
+import FontAwesome6 from "react-native-vector-icons/FontAwesome6"
+import LinearGradient from 'react-native-linear-gradient'
+import { getAllClients, getClientDetails, getClientsByType } from '../database/clients';
+import { useSelector, useDispatch } from "react-redux";
+import { CLIENT_DETAILS, HOME_SUPPLIERS, SUPPLIER_DETAILS } from '../redux/reducers/client/client_types'
+
+export default function Suppliers({ navigation }) {
+
+    const dispatch = useDispatch();
+    const suppliers = useSelector(state => state.client.home_suppliers);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('focus', () => {
+            getClientsByType(1).then(clients => {
+                dispatch({ type: HOME_SUPPLIERS, payload: clients });
+                console.log("Suppliers:", clients);
+            }).catch(err => console.error(err));
+        });
+        return () => unsubscribe();
+    }, [navigation]);
+
+    const totalSubamountSum = suppliers?.reduce(
+        (sum, item) => sum + (parseFloat(item?.total_subamount) || 0),
+        0
+    );
+
+    const totalAmountSum = suppliers?.reduce(
+        (sum, item) => sum + (parseFloat(item?.total_amount) || 0),
+        0
+    );
+
+    // Step 2: Difference
+    let finalAmount = totalSubamountSum - totalAmountSum;
+
+    let type = "none";
+    if (finalAmount > 0) {
+        type = "receivable";
+    } else if (finalAmount < 0) {
+        type = "payable";
+    }
+
+    finalAmount = Math.abs(finalAmount);
+
+
+    return (
+        <View style={Styles._mainContainer}>
+            <ScrollView
+                contentContainerStyle={{ alignItems: "center", paddingBottom: 60 }}
+                showsVerticalScrollIndicator={false}
+            >
+                <Balance
+                    greenValue={totalSubamountSum}
+                    greenTitle={"Total purchase of Sep"}
+                    redTitle={type == "payable" ? "Received" : "You will give"}
+                    redValue={finalAmount}
+                    rightColor={type == "payable" ? "red" : "green"}
+                />
+                <Entries marginTop={85} />
+
+                <View style={Styles._contentMain}>
+                    <View style={Styles._searchMain}>
+                        <View style={Styles._inputMain}>
+                            <SearchBar />
+                        </View>
+
+                        <View style={Styles._filterMain}>
+                            <TouchableOpacity
+                                activeOpacity={0.8}
+                                style={Styles._filterBtn}
+                            >
+                                <Ionicons
+                                    name={"funnel-outline"}
+                                    color={COLORS.primaryColor}
+                                    size={27}
+                                />
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                activeOpacity={0.8}
+                                style={Styles._filterBtn}
+                            >
+                                <FontAwesome6
+                                    name={"file-pdf"}
+                                    color={COLORS.primaryColor}
+                                    size={23}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+
+                    <View>
+                        {
+                            suppliers?.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);
+
+                                // console.log({amount,type})
+
+                                return (
+                                    <User
+                                        key={index}
+                                        name={item?.name}
+                                        addedAt={formatDateTime(item?.latest_updated_at)}
+                                        amount={amount}
+                                        type={type}
+                                        clientType={item?.type}
+                                        avatarColor={"green"}
+                                        onPress={() => {
+                                            getClientDetails(item?.id).then((res) => {
+                                                dispatch({
+                                                    type: CLIENT_DETAILS,
+                                                    payload: res
+                                                })
+                                                navigation.navigate("CustomerEntries", { homeDetails: item })
+                                            })
+                                        }}
+                                    />
+                                );
+                            })
+                        }
+
+                    </View>
+                </View>
+            </ScrollView>
+
+            <TouchableOpacity
+                style={Styles._floatingBtn}
+                activeOpacity={0.8}
+                onPress={() => {
+                    navigation.navigate("AddScreen", { type: 1 });
+                }}
+            >
+                <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={["darkgreen", "green"]} style={Styles._linearGradient}>
+                    <Ionicons
+                        name={"person-add-outline"}
+                        color={COLORS.whiteColor}
+                        size={22}
+                        style={{ paddingLeft: 10 }}
+                    />
+
+                    <Text style={Styles._fabTxt}>ADD SUPPLIER</Text>
+                </LinearGradient>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+
+const Styles = StyleSheet.create({
+    _mainContainer: {
+        flex: 1,
+        backgroundColor: COLORS.backgroundColor,
+        alignItems: "center",
+    },
+    _contentMain: {
+        width: WP(100),
+        // height: 30,
+        backgroundColor: COLORS.whiteColor,
+        paddingHorizontal: 15,
+        marginTop: 6
+    },
+    _searchMain: {
+        width: "100%",
+        flexDirection: "row",
+        // height:40,
+        paddingVertical: 20
+    },
+    _inputMain: {
+        width: "75%"
+    },
+    _filterMain: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 11,
+        paddingLeft: 10
+    },
+    _filterBtn: {
+        width: 35,
+        height: 35,
+        justifyContent: "center",
+        alignItems: "center"
+        // backgroundColor:"red"
+    },
+    _floatingBtn: {
+        width: WP(38),
+        height: 42,
+        position: "absolute",
+        right: 12,
+        bottom: 70,
+        borderRadius: 40,
+        overflow: "hidden",
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    _linearGradient: {
+        width: "100%",
+        height: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    _fabTxt: {
+        color: COLORS.whiteColor,
+        fontSize: 12,
+        fontFamily: FONT_NORMAL,
+        paddingRight: 10,
+    },
+})