digikhata-mashreq-sdk 0.1.1

package/src/app/screens/CustomerEntries.js

@@ -0,0 +1,402 @@
+import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
+import React, { useState, useEffect } from 'react'
+import LinearGradient from 'react-native-linear-gradient'
+import Ionicons from "react-native-vector-icons/Ionicons"
+import { COLORS, FONT_MEDIUM, FONT_NORMAL, formatDateTime, HP, WP } from '../themes/config'
+import { useSelector } from "react-redux";
+import { getClientTransactions } from '../database/clients'
+import { SearchBar, Transaction } from '../components'
+
+export default function CustomerEntries({ navigation, route }) {
+
+    const ClientDetails = useSelector(state => state.client.client_details);
+    const homeDetails = route?.params?.homeDetails;
+
+    let amount = homeDetails?.total_subamount - homeDetails?.total_amount;
+
+    let type = "none";
+    if (amount > 0) {
+        type = "receivable";
+    } else if (amount < 0) {
+        type = "payable";
+    }
+
+    amount = Math.abs(amount);
+
+
+    const [Entries, setEntries] = useState([]);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('focus', () => {
+            getClientTransactions(ClientDetails.id).then((res) => {
+                setEntries(res)
+            })
+        });
+        return () => unsubscribe();
+    }, [navigation]);
+
+    const options = [
+        {
+            name: "Report",
+            icon: "document-outline",
+            disabled: true,
+        },
+        {
+            name: "Set Date",
+            icon: "calendar-outline",
+            disabled: true,
+        },
+        {
+            name: "Reminder",
+            icon: "logo-whatsapp",
+            disabled: true,
+        },
+        {
+            name: "SMS",
+            icon: "chatbox-ellipses-outline",
+            disabled: true,
+        },
+    ]
+
+    const calculateBalances = (transactions) => {
+        let balance = 0
+        const reversed = [...transactions].reverse()
+
+        const withBalances = reversed.map((t) => {
+            const amount = parseFloat(t.amount) || 0
+            const subamount = parseFloat(t.subamount) || 0
+            balance += (subamount - amount)
+            return { ...t, balance }
+        })
+
+        return withBalances.reverse()
+    }
+
+    const balancesData = calculateBalances(Entries)
+
+    // console.log(Entries)
+
+    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()}
+                >
+                    <Ionicons
+                        name={"chevron-back"}
+                        color={COLORS.whiteColor}
+                        size={25}
+                    />
+                </TouchableOpacity>
+
+                <View style={Styles._dataMain}>
+                    <View style={Styles._nameMain}>
+                        <Text style={Styles._nameTxt}>{ClientDetails?.name}</Text>
+                        <View style={Styles._badge}>
+                            <Text style={Styles._badgeText}>{ClientDetails.type == 0 ? "Customer" : "Supplier"}</Text>
+                        </View>
+                    </View>
+                    <Text style={Styles._clickText}>Click here to view settings</Text>
+                </View>
+
+                <Ionicons
+                    name={"ellipsis-vertical"}
+                    color={COLORS.whiteColor}
+                    size={25}
+                />
+            </LinearGradient>
+
+            {
+                !Entries?.length &&
+                <View style={Styles._privacyMain}>
+                    <Ionicons
+                        name={"lock-closed"}
+                        color={"green"}
+                        size={20}
+                    />
+
+                    <Text style={Styles._privacyText}>Only you can see these entries</Text>
+                </View>
+            }
+            {
+                !!Entries.length &&
+                <View style={Styles._contentMain}>
+                    <LinearGradient
+                        style={[Styles._headerMain, { height: 40 }]}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
+                        colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+                    />
+                    <View style={Styles._calculationMain}>
+                        <Text style={{ color: type == "receivable" ? "green" : type == "payable" ? "red" : COLORS.blackColor, fontFamily: FONT_MEDIUM, fontSize: 14 }}>Rs {amount}</Text>
+                        <Text style={{ color: COLORS.blackColor, opacity: 0.6, fontFamily: FONT_NORMAL, fontSize: 12 }}>{type == "receivable" ? "You'll Give" : type == "payable" ? (ClientDetails.type == 0 ? "You'll Get" : "Received") : "Settled Up"}</Text>
+                    </View>
+
+                    <View style={Styles._optionsMain}>
+                        <FlatList
+                            data={options}
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                            scrollEnabled={false}
+                            keyExtractor={(item, index) => index.toString()}
+                            contentContainerStyle={{ justifyContent: "space-between", width: "100%" }}
+                            renderItem={({ item, index }) => (
+                                <TouchableOpacity activeOpacity={0.8} style={Styles._listItem} key={index}>
+                                    <Ionicons name={item.icon} size={25} color={COLORS.yellowColor} />
+                                    <Text style={{ color: COLORS.blackColor, fontSize: 11, fontFamily: FONT_NORMAL, textAlign: "center" }}>{item.name}</Text>
+                                </TouchableOpacity>
+                            )}
+                        />
+                    </View>
+
+                    <View style={Styles._entriesMain}>
+                        <SearchBar />
+                        <View style={Styles._tableHeader}>
+                            <View style={[Styles._headerCell, { width: "50%" }]}>
+                                <Text style={Styles._headerCellText}>Entries</Text>
+                            </View>
+
+                            <View style={[Styles._headerCell, { alignItems: "flex-end" }]}>
+                                <Text style={Styles._headerCellText}>{ClientDetails.type == 0 ? "You Gave" : "Payment"}</Text>
+                            </View>
+
+                            <View style={[Styles._headerCell, { alignItems: "flex-end" }]}>
+                                <Text style={Styles._headerCellText}>{ClientDetails.type == 0 ? "You Got" : "Purchase"}</Text>
+                            </View>
+                        </View>
+
+                        <FlatList
+                            data={balancesData}
+                            keyExtractor={(item, index) => index.toString()}
+                            scrollEnabled
+                            contentContainerStyle={{ paddingBottom: 150 }}
+                            renderItem={({ item, index }) => (
+                                <Transaction
+                                    balance={item.balance}
+                                    isAttachment={item?.attachments?.length ? true : false}
+                                    notes={item?.notes}
+                                    date={formatDateTime(item?.date)}
+                                    firstCell={item?.amount}
+                                    secondCell={item?.subamount}
+                                    onPress={() => navigation.navigate("TransactionDetails", { item })}
+                                />
+                            )}
+                        />
+                    </View>
+                </View>
+            }
+
+            <View style={Styles._btnsMain}>
+                <TouchableOpacity
+                    style={Styles._btn}
+                    activeOpacity={0.8}
+                    onPress={() => navigation.navigate("Entry", { type: "red" })}
+                >
+                    <LinearGradient
+                        colors={["darkred", "red"]}
+                        style={{ width: "100%", height: "100%", justifyContent: "center", alignItems: "center" }}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
+                    >
+                        <Text style={Styles._btnTitle}>{ClientDetails.type == 0 ? "YOU GAVE" : "PAYMENT"} Rs</Text>
+                    </LinearGradient>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                    style={Styles._btn}
+                    activeOpacity={0.8}
+                    onPress={() => navigation.navigate("Entry", { type: "green" })}
+                >
+                    <LinearGradient
+                        colors={["darkgreen", "green"]}
+                        style={{ width: "100%", height: "100%", justifyContent: "center", alignItems: "center" }}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
+                    >
+                        <Text style={Styles._btnTitle}>{ClientDetails.type == 0 ? "YOU GOT" : "PURCHASE"} Rs</Text>
+                    </LinearGradient>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const Styles = StyleSheet.create({
+    _mainContainer: {
+        flex: 1,
+        backgroundColor: COLORS.backgroundColor,
+    },
+    _headerMain: {
+        width: WP(100),
+        height: 60,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between"
+    },
+    _dataMain: {
+        width: "80%",
+        height: "100%",
+        // backgroundColor: "red",
+        justifyContent: "center"
+    },
+    _nameMain: {
+        width: "100%",
+        height: "50%",
+        // backgroundColor: "pink",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10
+    },
+    _badge: {
+        // height:10,
+        backgroundColor: COLORS.whiteColor,
+        paddingVertical: 2,
+        paddingHorizontal: 5,
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: 50
+    },
+    _badgeText: {
+        fontFamily: FONT_NORMAL,
+        fontSize: 10,
+        color: COLORS.primaryColor
+    },
+    _nameTxt: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_MEDIUM,
+        fontSize: 15
+    },
+    _clickText: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 13
+    },
+    _btnsMain: {
+        width: WP(100),
+        height: 60,
+        backgroundColor: COLORS.whiteColor,
+        position: "absolute",
+        bottom: 0,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: 25
+    },
+    _btn: {
+        width: "47%",
+        height: "75%",
+        overflow: "hidden",
+        borderRadius: 100,
+    },
+    _btnTitle: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_MEDIUM,
+        fontSize: 14
+    },
+    _privacyMain: {
+        // width: "70%",
+        // height: 40,
+        backgroundColor: COLORS.whiteColor,
+        alignSelf: "center",
+        marginTop: 15,
+        borderRadius: 10,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 10,
+        paddingVertical: 10,
+        gap: 10
+    },
+    _privacyText: {
+        color: COLORS.blackColor,
+        opacity: 0.6,
+        fontFamily: FONT_NORMAL,
+        fontSize: 13
+    },
+    _contentMain: {
+        flex: 1,
+        width: "100%",
+        // height: "85%",
+        // backgroundColor: "red",
+        alignItems: "center"
+    },
+    _calculationMain: {
+        width: "95%",
+        height: 80,
+        backgroundColor: COLORS.whiteColor,
+        position: "absolute",
+        top: 10,
+        borderRadius: 12,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+        justifyContent: "center",
+        paddingLeft: 20,
+        gap: 2,
+    },
+    _optionsMain: {
+        width: "95%",
+        // height: 80,
+        // backgroundColor: "red",
+        marginTop: 60,
+    },
+    _listItem: {
+        width: HP(9),
+        height: 65,
+        backgroundColor: COLORS.whiteColor,
+        justifyContent: "center",
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+        margin: 5,
+        borderRadius: 12,
+        gap: 5,
+    },
+    _entriesMain: {
+        flex: 1,
+        width: "100%",
+        // height: 40,
+        backgroundColor: COLORS.whiteColor,
+        paddingHorizontal: 10,
+        marginTop: 10,
+        paddingTop: 10,
+    },
+    _tableHeader: {
+        width: "100%",
+        height: 30,
+        // backgroundColor: "red",
+        flexDirection: "row",
+        marginTop: 10,
+        borderBottomColor: COLORS.darkGrey,
+        borderBottomWidth: 0.7,
+    },
+    _headerCell: {
+        width: "25%",
+        height: "100%",
+        // backgroundColor: "pink",
+        justifyContent: "center",
+        paddingLeft: 5,
+    },
+    _headerCellText: {
+        color: COLORS.blackColor,
+        opacity: 0.5,
+        fontFamily: FONT_MEDIUM,
+        fontSize: 12
+    },
+})

package/src/app/screens/Customers.js

@@ -0,0 +1,240 @@
+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_CUSTOMERS } from '../redux/reducers/client/client_types'
+
+export default function Customers({ navigation }) {
+
+    const dispatch = useDispatch()
+    const clients = useSelector(state => state.client.home_customers);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('focus', () => {
+            getClientsByType(0).then(clients => {
+                dispatch({ type: HOME_CUSTOMERS, payload: clients });
+                console.log("Clients:", clients);
+            }).catch(err => console.error(err));
+        });
+        return () => unsubscribe();
+    }, [navigation]);
+
+    const processed = clients.map((item) => {
+        let amount = (parseFloat(item?.total_subamount) || 0) - (parseFloat(item?.total_amount) || 0);
+
+        let type = "none";
+        if (amount > 0) {
+            type = "receivable";
+        } else if (amount < 0) {
+            type = "payable";
+        }
+
+        return {
+            type,
+            amount: Math.abs(amount),
+        };
+    });
+
+    const totals = processed.reduce(
+        (acc, item) => {
+            if (item.type === "receivable") {
+                acc.receivable += item.amount;
+            } else if (item.type === "payable") {
+                acc.payable += item.amount;
+            }
+            return acc;
+        },
+        { receivable: 0, payable: 0 }
+    );
+
+
+
+    return (
+        <View style={Styles._mainContainer}>
+            <ScrollView
+                contentContainerStyle={{ alignItems: "center", paddingBottom: 60 }}
+                showsVerticalScrollIndicator={false}
+            >
+                <Balance
+                    greenTitle={"You will give"}
+                    greenValue={totals?.receivable}
+                    redTitle={"You will get"}
+                    redValue={totals?.payable}
+                />
+                {/* <View style={{height:HP(7)}}></View> */}
+                <Entries marginTop={70} />
+
+                <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>
+                        {
+                            clients.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}
+                                        avatarColor={item?.avatarColor}
+                                        clientType={item?.type}
+                                        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: 0 });
+                }}
+
+            >
+                <LinearGradient
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 0 }}
+                    colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+                    style={Styles._linearGradient}
+                >
+                    <Ionicons
+                        name={"person-add-outline"}
+                        color={COLORS.whiteColor}
+                        size={22}
+                        style={{ paddingLeft: 10 }}
+                    />
+
+                    <Text style={Styles._fabTxt}>ADD CUSTOMER</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,
+    },
+})