digikhata-mashreq-sdk 0.1.1

package/src/App.js

@@ -0,0 +1,41 @@
+import { Text, View, StatusBar } from 'react-native'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+import { COLORS, FONT_BOLD, FONT_MEDIUM, FONT_NORMAL } from './app/themes/config'
+import { NavigationContainer } from "@react-navigation/native";
+import Root from './app/navigation/Root';
+import { SafeAreaView, SafeAreaProvider, useSafeAreaInsets } from "react-native-safe-area-context";
+import React, { useEffect } from 'react';
+import { createTables } from './app/database/schema';
+import { Provider } from "react-redux";
+import { store } from './app/redux/Store';
+
+const CustomStatusBar = () => {
+    const insets = useSafeAreaInsets();
+
+    useEffect(() => {
+        createTables();
+    }, []);
+
+    return (
+        <View style={{ height: insets.top, backgroundColor: COLORS.primaryColor }}>
+            <StatusBar
+                translucent
+                backgroundColor={COLORS.primaryColor}
+                barStyle="light-content"
+            />
+        </View>
+    )
+}
+
+export default function App() {
+    return (
+        <SafeAreaProvider>
+            <Provider store={store}>
+                <CustomStatusBar />
+                <NavigationContainer>
+                    <Root />
+                </NavigationContainer>
+            </Provider>
+        </SafeAreaProvider>
+    )
+}

package/src/app/components/Balance.js

@@ -0,0 +1,122 @@
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import React from 'react'
+import { COLORS, FONT_BOLD, FONT_MEDIUM, FONT_NORMAL, HP, WP } from '../themes/config'
+import LinearGradient from 'react-native-linear-gradient'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+
+export default function Balance({ greenTitle, redTitle, greenValue, redValue,rightColor = "red" }) {
+    return (
+        <>
+            <LinearGradient
+                colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+                style={Styles._grdientContainer}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+            />
+            <View style={Styles._mainContainer}>
+                <View style={Styles._balanceHeader}>
+                    <TouchableOpacity
+                        activeOpacity={0.8}
+                    >
+                        <Text style={Styles._hideTxt}>Hide Balance</Text>
+                    </TouchableOpacity>
+                </View>
+                <TouchableOpacity
+                    style={Styles._balanceContent}
+                    activeOpacity={0.8}
+                >
+                    <View style={Styles._balanceSection}>
+                        <Text style={[Styles._balanceValue, { fontSize: 14 }]}>Rs {greenValue}</Text>
+                        <Text style={[Styles._balanceValue, { color: COLORS.darkGrey, fontFamily: FONT_NORMAL }]}>{greenTitle}</Text>
+                    </View>
+
+                    <View style={Styles._balanceSection}>
+                        <Text style={[Styles._balanceValue, { color: rightColor, fontSize: 14 }]}>Rs {redValue}</Text>
+                        <Text style={[Styles._balanceValue, { color: COLORS.darkGrey, fontFamily: FONT_NORMAL }]}>{redTitle}</Text>
+                    </View>
+
+                    <TouchableOpacity
+                        style={Styles._iconMain}
+                        activeOpacity={0.8}
+                    >
+                        <Ionicons
+                            name={"chevron-forward"}
+                            color={COLORS.primaryColor}
+                            size={25}
+                        />
+                    </TouchableOpacity>
+                </TouchableOpacity>
+            </View>
+        </>
+    )
+}
+
+const Styles = StyleSheet.create({
+    _mainContainer: {
+        width: WP(94),
+        // height: HP(11),
+        backgroundColor: COLORS.whiteColor,
+        borderRadius: 12,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 3.84,
+        elevation: 5,
+        marginTop: 10,
+        position: "absolute",
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+    _grdientContainer: {
+        width: WP(100),
+        height: HP(5),
+        // backgroundColor: "red",
+        alignItems: "center",
+    },
+    _balanceHeader: {
+        width: "100%",
+        // height: 20,
+        // backgroundColor:"red"
+    },
+    _hideTxt: {
+        color: COLORS.primaryColor,
+        fontFamily: FONT_MEDIUM,
+        fontSize: 12,
+    },
+    _balanceContent: {
+        width: "100%",
+        height: "70%",
+        // backgroundColor:"red",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "row",
+        marginTop: 5,
+        paddingVertical: 4,
+    },
+    _balanceSection: {
+        width: "40%",
+        height: "100%",
+        // backgroundColor: "red",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRightColor: COLORS.blackColor,
+        borderRightWidth: 0.7
+    },
+    _balanceValue: {
+        color: "green",
+        fontFamily: FONT_MEDIUM,
+        fontSize: 11,
+        textAlign:"center"
+    },
+    _iconMain: {
+        width: "20%",
+        height: "100%",
+        // backgroundColor: "red",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingLeft: 10
+    },
+})

package/src/app/components/CountryPhoneInput.js

@@ -0,0 +1,286 @@
+import React, { useMemo, useState } from "react";
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    TextInput,
+    FlatList,
+} from "react-native";
+import Modal from "react-native-modal";
+import { COLORS, FONT_MEDIUM, FONT_NORMAL } from "../themes/config";
+import countries from "../utils/countries.json";
+import Ionicons from "react-native-vector-icons/Ionicons"
+
+export default function CountryPhoneInput({
+    initialCountryCode = "PK",
+    phonePlaceholder = "Enter phone number",
+    onChange,
+}) {
+    const defaultCountry =
+        countries.find((c) => c.code === initialCountryCode) || countries[0];
+
+    const [isModalVisible, setModalVisible] = useState(false);
+    const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [query, setQuery] = useState("");
+
+    const toggleModal = () => setModalVisible((p) => !p);
+
+    const filteredCountries = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) return countries;
+        return countries.filter(
+            (c) =>
+                c.name.toLowerCase().includes(q) ||
+                c.code.toLowerCase().includes(q) ||
+                c.dial_code.toLowerCase().includes(q)
+        );
+    }, [query]);
+
+    const handleSelectCountry = (country) => {
+        setSelectedCountry(country);
+        toggleModal();
+        // propagate change after country changes
+        if (onChange) {
+            onChange({
+                country,
+                phone: phoneNumber,
+                fullNumber: `${country.dial_code}${phoneNumber}`,
+            });
+        }
+    };
+
+    const handlePhoneChange = (text) => {
+        // keep only digits in the phone input; dial code already shown on left
+        const digitsOnly = text.replace(/[^\d]/g, "");
+        setPhoneNumber(digitsOnly);
+        if (onChange) {
+            onChange({
+                country: selectedCountry,
+                phone: digitsOnly,
+                fullNumber: `${selectedCountry.dial_code}${digitsOnly}`,
+            });
+        }
+    };
+
+    return (
+        <View style={Styles._mainContainer}>
+            {/* Country Picker */}
+            <TouchableOpacity
+                style={Styles._pickerMain}
+                activeOpacity={0.8}
+                onPress={toggleModal}
+            >
+                <Text style={Styles._emoji}>{selectedCountry.emoji}</Text>
+                <Text style={Styles._dialCode}>{selectedCountry.dial_code}</Text>
+                <Ionicons
+                    name={"chevron-down"}
+                    color={COLORS.primaryColor}
+                    size={18}
+                />
+            </TouchableOpacity>
+
+            {/* Phone Input */}
+            <TextInput
+                style={Styles._input}
+                placeholder={phonePlaceholder}
+                keyboardType="phone-pad"
+                value={phoneNumber}
+                onChangeText={handlePhoneChange}
+            />
+
+            {/* Country Modal with Search */}
+            <Modal
+                isVisible={isModalVisible}
+                onBackdropPress={toggleModal}
+                onBackButtonPress={toggleModal}
+                useNativeDriver
+            >
+                <View style={Styles._modalContent}>
+                    <View style={Styles._modalHeader}>
+                        <Text style={Styles._modalTitle}>Select country</Text>
+                        <TouchableOpacity onPress={toggleModal} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}>
+                            <Text style={Styles._closeText}>Close</Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    <View style={Styles._searchWrap}>
+                        <TextInput
+                            value={query}
+                            onChangeText={setQuery}
+                            placeholder="Search by country, code or +dial"
+                            autoCorrect={false}
+                            autoCapitalize="none"
+                            style={Styles._searchInput}
+                            clearButtonMode="while-editing"
+                        />
+                        {/* {query.length > 0 && (
+                            <TouchableOpacity
+                                onPress={() => setQuery("")}
+                                style={Styles._clearBtn}
+                            >
+                                <Text style={Styles._clearBtnText}>×</Text>
+                            </TouchableOpacity>
+                        )} */}
+                    </View>
+
+                    <FlatList
+                        data={filteredCountries}
+                        keyExtractor={(item) => item.code}
+                        keyboardShouldPersistTaps="handled"
+                        showsVerticalScrollIndicator={false}
+                        renderItem={({ item, index }) => {
+                            const isSelected = item.code === selectedCountry.code;
+                            return (
+                                <TouchableOpacity
+                                    style={Styles._countryItem}
+                                    onPress={() => handleSelectCountry(item)}
+                                    key={index}
+                                >
+                                    <Text style={Styles._emoji}>{item.emoji}</Text>
+                                    <View style={{ flex: 1, marginLeft: 10 }}>
+                                        <Text
+                                            style={[
+                                                Styles._countryName,
+                                                isSelected && Styles._countryNameSelected,
+                                            ]}
+                                        >
+                                            {item.name}
+                                        </Text>
+                                        <Text style={Styles._countryMeta}>
+                                            {item.code} · {item.dial_code}
+                                        </Text>
+                                    </View>
+                                    {isSelected ? <Text style={Styles._tick}>✓</Text> : null}
+                                </TouchableOpacity>
+                            );
+                        }}
+                        ListEmptyComponent={
+                            <View style={Styles._emptyWrap}>
+                                <Text style={Styles._emptyText}>No matches</Text>
+                            </View>
+                        }
+                    />
+                </View>
+            </Modal>
+        </View>
+    );
+}
+
+const Styles = StyleSheet.create({
+    _mainContainer: {
+        width: "95%",
+        height: 50,
+        backgroundColor: COLORS.whiteColor,
+        borderRadius: 15,
+        borderColor: COLORS.grey,
+        borderWidth: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 10,
+    },
+    _pickerMain: {
+        // width: "25%",
+        height: "80%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderRightColor: COLORS.gray,
+        borderRightWidth: 0.7,
+        gap: 5,
+        paddingHorizontal: 5
+        // backgroundColor: "red"
+    },
+    _emoji: {
+        fontSize: 25,
+    },
+    _dialCode: {
+        fontSize: 13,
+        // fontWeight: "600",
+        fontFamily: FONT_NORMAL
+    },
+    _input: {
+        flex: 1,
+        height: "100%",
+        paddingHorizontal: 10,
+        fontSize: 16,
+        color: COLORS.black,
+    },
+    _modalContent: {
+        backgroundColor: COLORS.whiteColor,
+        borderRadius: 12,
+        padding: 12,
+        maxHeight: "75%",
+    },
+    _modalHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: 8,
+    },
+    _modalTitle: {
+        fontSize: 15,
+        fontFamily: FONT_MEDIUM
+        // fontWeight: "700",
+    },
+    _closeText: {
+        fontSize: 13,
+        fontFamily: FONT_NORMAL
+    },
+    _searchWrap: {
+        flexDirection: "row",
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: COLORS.grey,
+        borderRadius: 10,
+        paddingHorizontal: 10,
+        height: 42,
+        marginBottom: 8,
+    },
+    _searchInput: {
+        flex: 1,
+        fontSize: 13,
+        fontFamily: FONT_NORMAL,
+    },
+    _clearBtn: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+    },
+    _clearBtnText: {
+        fontSize: 20,
+        lineHeight: 20,
+    },
+    _countryItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 12,
+        borderBottomColor: COLORS.grey,
+        borderBottomWidth: 0.5,
+    },
+    _countryName: {
+        fontSize: 14,
+        fontFamily: FONT_NORMAL
+    },
+    _countryNameSelected: {
+        fontWeight: "700",
+    },
+    _countryMeta: {
+        fontSize: 10,
+        opacity: 0.7,
+        fontFamily: FONT_NORMAL
+    },
+    _tick: {
+        fontSize: 18,
+        marginLeft: 8,
+    },
+    _emptyWrap: {
+        paddingVertical: 24,
+        alignItems: "center",
+    },
+    _emptyText: {
+        fontSize: 14,
+        opacity: 0.6,
+        fontFamily: FONT_NORMAL
+    },
+});

package/src/app/components/Entries.js

@@ -0,0 +1,75 @@
+import { View, Text, StyleSheet, TouchableOpacity, Image, FlatList } from 'react-native'
+import React from 'react'
+import { COLORS, FONT_NORMAL, HP, WP } from '../themes/config'
+
+export default function Entries({ marginTop }) {
+
+    const data = [
+        {
+            name: "Cash",
+            icon: require("../assets/Icons/Cash.png")
+        },
+        {
+            name: "Stock",
+            icon: require("../assets/Icons/Stock.png")
+        },
+        {
+            name: "Bill",
+            icon: require("../assets/Icons/Bill.png")
+        },
+        {
+            name: "Staff",
+            icon: require("../assets/Icons/Staff.png")
+        },
+        {
+            name: "Expense",
+            icon: require("../assets/Icons/Expense.png")
+        },
+    ]
+
+    return (
+        <View style={[Styles._mainContainer, { marginTop }]}>
+            <FlatList
+                data={data}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                scrollEnabled={false}
+                keyExtractor={(item, index) => index.toString()}
+                renderItem={({ item, index }) => (
+                    <TouchableOpacity activeOpacity={0.8} style={Styles._listItem} key={index}>
+                        <Image source={item.icon} style={{ width: HP(3), height: HP(3), resizeMode: "contain" }}/>
+                        <Text style={{ color: COLORS.blackColor, fontSize: WP(2.5), fontFamily: FONT_NORMAL, textAlign: "center" }}>{item.name.toLocaleUpperCase()}</Text>
+                    </TouchableOpacity>
+                )}
+            />
+        </View>
+    )
+}
+
+const Styles = StyleSheet.create({
+    _mainContainer: {
+        width: WP(94),
+        // height: 20,
+        // backgroundColor: "red",
+        alignItems: "center",
+    },
+    _listItem: {
+        width: HP(7.5),
+        height: HP(7.5),
+        backgroundColor: COLORS.whiteColor,
+        alignItems: "center",
+        justifyContent: "center",
+        marginHorizontal: 5,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+        borderRadius: 14,
+        marginVertical: HP(1),
+        gap: 7
+    }
+})

package/src/app/components/SearchBar.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { COLORS } from '../themes/config';
+
+const SearchBar = ({ placeholder = "Search...", onChangeText }) => {
+    const [searchText, setSearchText] = useState('');
+
+    const handleChange = (text) => {
+        setSearchText(text);
+        if (onChangeText) {
+            onChangeText(text);
+        }
+    };
+
+    const clearInput = () => {
+        setSearchText('');
+        if (onChangeText) {
+            onChangeText('');
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            <Ionicons name="search" size={20} color="#888" style={styles.icon} />
+            <TextInput
+                style={styles.input}
+                placeholder={placeholder}
+                placeholderTextColor="#888"
+                value={searchText}
+                onChangeText={handleChange}
+            />
+            {searchText.length > 0 && (
+                <TouchableOpacity onPress={clearInput}>
+                    <Ionicons name="close-circle" size={20} color="#888" />
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: COLORS.whiteColor,
+        borderRadius: 10,
+        paddingHorizontal: 10,
+        // marginVertical: 10,
+        height: 40,
+        borderColor: COLORS.gray,
+        borderWidth: 1
+    },
+    icon: {
+        marginRight: 8,
+    },
+    input: {
+        flex: 1,
+        fontSize: 16,
+        color: '#000',
+    },
+});
+
+export default SearchBar;