digikhata-mashreq-sdk 0.1.1

package/src/app/screens/Entry.js

@@ -0,0 +1,658 @@
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, Keyboard, ScrollView, Platform, PermissionsAndroid, Image, Dimensions } from 'react-native'
+import React, { useState } from 'react'
+import { COLORS, FONT_MEDIUM, FONT_NORMAL, HP, mergeDateTime, WP } from '../themes/config'
+import LinearGradient from 'react-native-linear-gradient'
+import Ionicons from "react-native-vector-icons/Ionicons"
+import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
+import { addTransaction, addTransactionImages } from '../database/clients';
+import { useSelector } from "react-redux";
+import Modal from "react-native-modal";
+import { launchCamera, launchImageLibrary } from "react-native-image-picker";
+import { pick } from "@react-native-documents/picker";
+
+export default function Entry({ navigation, route }) {
+
+
+    const ClientDetails = useSelector(state => state.client.client_details);
+    const type = route?.params?.type;
+    const mainColor = type;
+
+    const [input, setInput] = useState('');
+    const [memory, setMemory] = useState(null);
+    const [Notes, setNotes] = useState("");
+    const [date, setDate] = useState(new Date());
+    const [time, setTime] = useState(new Date());
+    const [MergedDate, setMergedDate] = useState("");
+
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [attachments, setAttachments] = useState([]); // {type, uri, name}
+
+
+    // ✅ Add file in state (max 3)
+    const addAttachment = (file) => {
+        if (attachments.length >= 3) {
+            alert("You can only attach up to 3 files.");
+            return;
+        }
+        setAttachments([...attachments, file]);
+    };
+
+    // ✅ Gallery
+    const handleGallery = async () => {
+        try {
+            const result = await launchImageLibrary({ mediaType: "photo" });
+            if (result.assets && result.assets.length > 0) {
+                addAttachment({
+                    type: "image",
+                    uri: result.assets[0].uri,
+                    name: result.assets[0].fileName || "gallery_image.jpg"
+                });
+            }
+        } catch (err) {
+            console.log("Gallery Error:", err);
+        }
+        setIsModalVisible(false);
+    };
+
+    // ✅ Camera with permission
+    const handleCamera = async () => {
+        try {
+            const granted = await PermissionsAndroid.request(
+                PermissionsAndroid.PERMISSIONS.CAMERA,
+                {
+                    title: "Camera Permission",
+                    message: "This app needs camera access to take photos",
+                    buttonNeutral: "Ask Me Later",
+                    buttonNegative: "Cancel",
+                    buttonPositive: "OK"
+                }
+            );
+
+            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+                const result = await launchCamera({ mediaType: "photo" });
+                if (result.assets && result.assets.length > 0) {
+                    addAttachment({
+                        type: "image",
+                        uri: result.assets[0].uri,
+                        name: result.assets[0].fileName || "camera_image.jpg"
+                    });
+                }
+            } else {
+                alert("Camera permission denied");
+            }
+        } catch (err) {
+            console.log("Camera Error:", err);
+        }
+        setIsModalVisible(false);
+    };
+
+    // ✅ PDF Picker (using @react-native-documents/picker)
+    const handlePDF = async () => {
+        try {
+            const res = await pick({ type: ["application/pdf"] });
+            if (res && res.length > 0) {
+                addAttachment({
+                    type: "pdf",
+                    uri: res[0].uri,
+                    name: res[0].name || "document.pdf"
+                });
+            }
+        } catch (err) {
+            if (err.message !== "DOCUMENT_PICKER_CANCELED") {
+                console.log("PDF Error:", err);
+            }
+        }
+        setIsModalVisible(false);
+    };
+
+    const removeAttachment = (index) => {
+        setAttachments(attachments.filter((_, i) => i !== index));
+    };
+
+    // Calculator buttons
+    const buttons = [
+        ['AC', 'M+', 'M-', 'MR'],
+        ['%', '÷', 'x', '-'],
+        ['7', '8', '9', '+'],
+        ['4', '5', '6', '='],
+        ['1', '2', '3', '↵'],
+        ['0', '.']
+    ];
+
+    const handlePress = (key) => {
+        if (key === 'AC') {
+            setInput('');
+            setMemory(null);
+        } else if (key === 'M+') {
+            if (input) setMemory(Number(input));
+        } else if (key === 'M-') {
+            setMemory(null);
+        } else if (key === 'MR') {
+            if (memory !== null) setInput(prev => prev + memory.toString());
+        } else if (key === '=') {
+            try {
+                const expression = input
+                    .replace(/x/g, '*')
+                    .replace(/÷/g, '/')
+                    .replace(/%/g, '/100');
+                const result = eval(expression);
+                setInput(result.toString());
+            } catch (err) {
+                setInput('Error');
+            }
+        } else if (key === '↵') {
+            Keyboard.dismiss();
+        } else {
+            setInput(prev => prev + key);
+        }
+    };
+
+    const handleBackspace = () => {
+        setInput(prev => prev.slice(0, -1));
+    };
+
+    const onChangeDate = (event, selectedDate) => {
+        const currentDate = selectedDate;
+        setDate(currentDate);
+    };
+
+    const onChangeTime = (event, selectedDate) => {
+        const currentDate = selectedDate;
+        setTime(currentDate);
+    };
+
+    const showDate = (currentMode) => {
+        DateTimePickerAndroid.open({
+            value: date,
+            onChange: onChangeDate,
+            mode: "date",
+            is24Hour: false,
+        });
+    };
+
+    const showTime = (currentMode) => {
+        DateTimePickerAndroid.open({
+            value: time,
+            onChange: onChangeTime,
+            mode: "time",
+            is24Hour: false,
+        });
+    };
+
+    const onSave = () => {
+        try {
+            let finalValue = input;
+
+            if (input) {
+                // Replace calculator symbols with JS operators
+                const expression = input
+                    .replace(/x/g, "*")
+                    .replace(/÷/g, "/")
+                    .replace(/%/g, "/100");
+
+                let result = eval(expression);
+
+                // ✅ Ensure result is a valid finite number
+                if (typeof result === "number" && isFinite(result)) {
+                    finalValue = result.toString();
+                } else {
+                    console.log("Invalid result, not saving");
+                    return; // stop here
+                }
+            } else {
+                console.log("Empty input, not saving");
+                return;
+            }
+
+            addTransaction(
+                ClientDetails.id,
+                type == "red" ? finalValue : 0,
+                type == "green" ? finalValue : 0,
+                Notes,
+                mergeDateTime({ date, time }),
+                ""
+            )
+                .then(async (res) => {
+                    console.log(res, "Transaction Success");
+                    const trxId = res.insertId; // ✅ new transaction ID
+
+                    // If there are attachments, insert them
+                    if (attachments && attachments.length > 0) {
+                        for (const file of attachments) {
+                            try {
+                                await addTransactionImages(trxId, file.uri);
+                                console.log(`Attachment added: ${file.name}`);
+                            } catch (err) {
+                                console.log("Attachment insert error:", err);
+                            }
+                        }
+                    }
+
+                    // ✅ Reset form
+                    setInput("");
+                    setMemory("");
+                    setNotes("");
+                    setDate(new Date());
+                    setTime(new Date());
+                    setMergedDate("");
+                    setAttachments([]);
+                    navigation?.navigate("HomeScreen", { screen: ClientDetails.type == 0 ? "Customers" : "Suppliers" });
+                })
+                .catch((err) => {
+                    console.log(err, "Transaction Error");
+                });
+        } catch (err) {
+            console.log("Calculation Error:", err);
+        }
+    };
+
+
+
+
+
+    return (
+        <View style={Styles._mainContainers}>
+            <LinearGradient
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+                colors={[mainColor == "green" ? "darkgreen" : "darkred", mainColor]}
+                style={Styles._linearGradient}
+            >
+                <View style={Styles._titleMain}>
+                    <TouchableOpacity
+                        activeOpacity={0.8}
+                        onPress={() => { navigation.goBack() }}
+                    >
+                        <Ionicons
+                            name={"chevron-back"}
+                            color={COLORS.whiteColor}
+                            size={20}
+                        />
+                    </TouchableOpacity>
+                    {
+                        ClientDetails.type == 0 ?
+                            (<Text style={Styles._title}>You {mainColor == "green" ? "Got" : "Gave"} Rs {input} {mainColor == "green" ? "from" : "to"} {ClientDetails?.name}</Text>) :
+                            (<Text style={Styles._title}>{mainColor == "green" ? "Purchase" : "Payment"} of Rs {input} {mainColor == "green" ? "from" : "to"} {ClientDetails?.name}</Text>)
+                    }
+                </View>
+            </LinearGradient>
+
+            <View style={Styles._contentMain}>
+                <View style={{ width: "100%", alignItems: "center", gap: 12 }}>
+                    <ScrollView
+                        contentContainerStyle={Styles._scrollMain}
+                        style={{ height: Platform.OS == "ios" ? 200 : Dimensions.get("screen").height - HP(74) }}
+                    >
+                        {/* Input with backspace */}
+                        <View style={Styles._inputMain}>
+                            <Text style={{ color: COLORS.blackColor, fontFamily: FONT_NORMAL, fontSize: 14, opacity: 0.6 }}>Rs</Text>
+                            <TextInput
+                                placeholder=''
+                                style={[Styles._input, { color: mainColor }]}
+                                placeholderTextColor={COLORS.grey}
+                                cursorColor={COLORS.primaryColor}
+                                value={input}
+                                editable={false}
+                                onFocus={() => Keyboard.dismiss()}
+                            />
+                            <TouchableOpacity onPress={handleBackspace}>
+                                <Text style={{ fontSize: 18, color: '#555', paddingHorizontal: 8 }}>⌫</Text>
+                            </TouchableOpacity>
+                        </View>
+
+                        {/* Memory display */}
+                        {memory !== null && (
+                            <View style={Styles._memoryDisplay}>
+                                <Text style={Styles._memoryText}>Memory: {memory}</Text>
+                            </View>
+                        )}
+
+                        {/* Attach Voice Note */}
+                        <TouchableOpacity
+                            style={[Styles._inputMain, { paddingHorizontal: 12 }]}
+                            activeOpacity={0.8}
+                        >
+                            <Text style={{ color: mainColor, fontFamily: FONT_NORMAL, fontSize: 12 }}>Attach Voice Note</Text>
+                            <Ionicons
+                                name={"mic-outline"}
+                                color={mainColor}
+                                size={22}
+                            />
+                        </TouchableOpacity>
+                        {
+                            input &&
+                            <View style={Styles._hidableMain}>
+                                <View style={Styles._hidableRow}>
+                                    <TouchableOpacity
+                                        style={Styles._cellMain}
+                                        activeOpacity={0.8}
+                                        onPress={showDate}
+                                    >
+                                        <Ionicons
+                                            name={"calendar-outline"}
+                                            color={mainColor}
+                                            size={22}
+                                        />
+                                        <Text style={Styles._cellText}>{date.toDateString()}</Text>
+                                    </TouchableOpacity>
+
+                                    <TouchableOpacity
+                                        style={Styles._cellMain}
+                                        activeOpacity={0.8}
+                                        onPress={showTime}
+                                    >
+                                        <Ionicons
+                                            name={"time-outline"}
+                                            color={mainColor}
+                                            size={22}
+                                        />
+                                        <Text style={Styles._cellText}>{time.toLocaleTimeString()}</Text>
+                                    </TouchableOpacity>
+                                </View>
+
+                                <TextInput
+                                    style={Styles._detailMain}
+                                    placeholder='Enter Details'
+                                    placeholderTextColor={COLORS.grey}
+                                    multiline
+                                    value={Notes}
+                                    onChangeText={(text) => setNotes(text)}
+                                />
+
+                                {/* Attachments */}
+                                <View style={Styles._hidableRow}>
+                                    <TouchableOpacity
+                                        style={Styles._cellMain}
+                                        activeOpacity={0.8}
+                                        onPress={() => setIsModalVisible(true)}
+                                    >
+                                        <Ionicons name={"attach"} color={mainColor} size={23} />
+                                        <Text style={Styles._cellText}>PDF/Photos</Text>
+                                    </TouchableOpacity>
+
+                                    <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center" }}>
+                                        {attachments.map((file, index) => (
+                                            <View key={index} style={{ marginLeft: 8, alignItems: "center" }}>
+                                                {file.type === "image" ? (
+                                                    <Image
+                                                        source={{ uri: file.uri }}
+                                                        style={{ width: 40, height: 40, borderRadius: 5 }}
+                                                    />
+                                                ) : (
+                                                    <Ionicons name="document-text-outline" size={30} color={mainColor} />
+                                                )}
+                                                {/* delete cross */}
+                                                <TouchableOpacity
+                                                    onPress={() => removeAttachment(index)}
+                                                    style={{
+                                                        position: "absolute",
+                                                        top: -5,
+                                                        right: -5,
+                                                        backgroundColor: "white",
+                                                        borderRadius: 10,
+                                                        padding: 2
+                                                    }}
+                                                >
+                                                    <Ionicons name="close-circle" size={18} color={mainColor} />
+                                                </TouchableOpacity>
+                                            </View>
+                                        ))}
+                                    </View>
+                                </View>
+                            </View>
+                        }
+                    </ScrollView>
+
+                    {/* Save button (non-functional) */}
+                    <TouchableOpacity
+                        activeOpacity={0.8}
+                        style={[Styles._continueBtn, { backgroundColor: mainColor }]}
+                        onPress={onSave}
+                    >
+                        <Text style={Styles._continueBtnTxt}>Save</Text>
+                    </TouchableOpacity>
+
+                    {/* Calculator */}
+                    <View style={Styles._calculatorMain}>
+                        {buttons.map((row, rowIndex) => (
+                            <View style={Styles._calculatorRow} key={rowIndex}>
+                                {row.map((key) => (
+                                    <TouchableOpacity
+                                        key={key}
+                                        activeOpacity={0.8}
+                                        style={[
+                                            Styles._key,
+                                            key === '0' && { flex: 2 },
+                                            (['AC', 'M+', 'M-', 'MR'].includes(key)) && { backgroundColor: '#ccc' },
+                                            (['=', '↵'].includes(key)) && { backgroundColor: COLORS.primaryColor },
+                                            (['÷', 'x', '-', '+', '%'].includes(key)) && { backgroundColor: "#ccc" }
+                                        ]}
+                                        onPress={() => handlePress(key)}
+                                    >
+                                        <Text style={Styles._keyText}>{key}</Text>
+                                    </TouchableOpacity>
+                                ))}
+                            </View>
+                        ))}
+                    </View>
+                </View>
+            </View>
+
+            {/* Modal */}
+            <Modal
+                isVisible={isModalVisible}
+                onBackdropPress={() => setIsModalVisible(false)}
+                onBackButtonPress={() => setIsModalVisible(false)}
+            >
+                <View style={{ backgroundColor: "white", padding: 20, borderRadius: 12 }}>
+                    <Text style={{ fontSize: 16, fontFamily: FONT_MEDIUM, marginBottom: 12 }}>Choose Option</Text>
+
+                    <TouchableOpacity style={Styles._modalBtn} onPress={handleGallery}>
+                        <Ionicons name="image-outline" size={20} color="red" />
+                        <Text style={Styles._modalText}>Gallery</Text>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity style={Styles._modalBtn} onPress={handleCamera}>
+                        <Ionicons name="camera-outline" size={20} color="red" />
+                        <Text style={Styles._modalText}>Camera</Text>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity style={Styles._modalBtn} onPress={handlePDF}>
+                        <Ionicons name="document-outline" size={20} color="red" />
+                        <Text style={Styles._modalText}>PDF</Text>
+                    </TouchableOpacity>
+                </View>
+            </Modal>
+
+        </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,
+        flexDirection: "row",
+        alignItems: "center",
+        marginTop: 10
+    },
+    _title: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 15,
+        marginLeft: 15
+    },
+    _contentMain: {
+        width: WP(94),
+        height: "95%",
+        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: {
+        flex: 1,
+        height: "100%",
+        fontFamily: FONT_MEDIUM,
+        fontSize: 15,
+        color: "red",
+        paddingLeft: 13,
+    },
+    _inputMain: {
+        width: "95%",
+        height: 50,
+        flexDirection: "row",
+        borderColor: COLORS.grey,
+        borderWidth: 1,
+        borderRadius: 15,
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: 12,
+        backgroundColor: COLORS.whiteColor
+    },
+    _memoryDisplay: {
+        width: WP(85),
+        height: 50,
+        alignItems: "flex-start",
+        justifyContent: "center",
+        paddingLeft: 12,
+        // paddingVertical: 4,
+        backfaceVisibility: COLORS.whiteColor,
+        borderColor: COLORS.grey,
+        borderWidth: 1,
+        borderRadius: 15,
+    },
+    _memoryText: {
+        fontSize: 12,
+        fontFamily: FONT_NORMAL,
+        color: '#333'
+    },
+    _continueBtn: {
+        width: "95%",
+        height: 50,
+        backgroundColor: "red",
+        borderRadius: 100,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    _continueBtnTxt: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 17
+    },
+    _calculatorMain: {
+        width: "95%",
+        // height: 350,
+        // backgroundColor: "red"
+    },
+    _calculatorRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        // marginBottom: 3
+    },
+    _key: {
+        flex: 1,
+        margin: 5,
+        backgroundColor: COLORS.whiteColor,
+        paddingVertical: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 8,
+        marginHorizontal: 10,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    _keyText: {
+        fontSize: 15,
+        color: COLORS.blackColor,
+        fontFamily: FONT_MEDIUM
+    },
+    _scrollMain: {
+        width: "95%",
+        alignItems: "center",
+        gap: 12,
+        // backgroundColor: "green",
+        // maxHeight: Platform.OS == "ios" ? 200 : 250,
+    },
+    _hidableMain: {
+        width: WP(94),
+        height: 300,
+        // backgroundColor: "green",
+        alignItems: "center",
+        gap: 12
+    },
+    _hidableRow: {
+        width: "95%",
+        // height:30,
+        // backgroundColor: "red",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: 9
+    },
+    _cellMain: {
+        width: "48%",
+        height: 50,
+        // backgroundColor: "pink",
+        borderColor: COLORS.grey,
+        borderWidth: 1,
+        borderRadius: 15,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: WP(4)
+    },
+    _cellText: {
+        color: COLORS.blackColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 10,
+    },
+    _detailMain: {
+        minHeight: 50,
+        width: "91%",
+        borderColor: COLORS.grey,
+        borderWidth: 1,
+        borderRadius: 15,
+        paddingHorizontal: 15,
+        color: COLORS.blackColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 13
+    },
+    _modalBtn: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 12,
+        borderBottomColor: "#eee",
+        borderBottomWidth: 1
+    },
+    _modalText: {
+        marginLeft: 10,
+        fontSize: 14,
+        fontFamily: FONT_NORMAL,
+        color: COLORS.blackColor
+    }
+})