digikhata-mashreq-sdk 0.1.1

package/src/app/screens/TransactionDetails.js

@@ -0,0 +1,199 @@
+import { View, Text, StyleSheet, TouchableOpacity, FlatList, ScrollView, Image } 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, getAvatar, HP, isPdfFile, WP } from '../themes/config'
+import { useSelector } from "react-redux";
+import { getClientTransactions } from '../database/clients'
+import { SearchBar, Transaction } from '../components'
+import { viewDocument } from '@react-native-documents/viewer'
+
+export default function TransactionDetails({ navigation, route }) {
+
+    let item = route?.params?.item;
+    const ClientDetails = useSelector(state => state.client.client_details);
+
+    // console.log(item)
+
+    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>
+
+                <Text style={Styles._nameTxt}>Entry Details</Text>
+            </LinearGradient>
+
+            <View style={Styles._contentMain}>
+                <ScrollView
+                    contentContainerStyle={{ alignItems: "center" }}
+                >
+                    <LinearGradient
+                        style={[Styles._headerMain, { height: 40 }]}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
+                        colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+                    />
+                    <View style={Styles._sectionOne}>
+                        <View style={Styles._segment}>
+                            <View style={{ flexDirection: "row", height: "100%", alignItems: "center", gap: 10 }}>
+                                <View style={Styles._avatarMain}>
+                                    <Text style={[Styles._avatarText, { color: "red" }]}>{getAvatar("Saud")}</Text>
+                                </View>
+
+                                <View>
+                                    <Text style={{ color: COLORS.blackColor, fontFamily: FONT_MEDIUM, fontSize: 13 }}>{ClientDetails?.name}</Text>
+                                    <Text style={{ color: COLORS.blackColor, fontFamily: FONT_NORMAL, fontSize: 12, opacity: 0.6 }}>{formatDateTime(item?.date)}</Text>
+                                </View>
+                            </View>
+
+                            <View style={{ alignItems: "flex-end" }}>
+                                <Text style={{ color: item?.amount !== "0" ? "red" : "green", fontFamily: FONT_MEDIUM, fontSize: 14 }}>Rs {item?.amount !== "0" ? item?.amount : item?.subamount}</Text>
+                                <Text style={{ color: COLORS.blackColor, opacity: 0.8, fontFamily: FONT_NORMAL, fontSize: 12 }}>{item?.amount !== "0" ? (ClientDetails.type == 0 ? "You Gave" : "Payment") : (ClientDetails?.type == 0 ? "You Get" : "Purchase")}</Text>
+                            </View>
+                        </View>
+                        {
+                            item?.notes &&
+                            <View style={[Styles._segment, { flexDirection: "column", alignItems: "flex-start" }]}>
+                                <Text style={{ color: COLORS.blackColor, opacity: 0.6, fontFamily: FONT_MEDIUM, fontSize: 13 }}>Details</Text>
+                                <Text style={{ color: COLORS.blackColor, fontFamily: FONT_MEDIUM, fontSize: 11 }}>{item?.notes}</Text>
+                            </View>
+                        }
+
+                        {
+                            item?.attachments?.length != 0 &&
+                            <View style={[Styles._segment, { flexDirection: "column", alignItems: "flex-start" }]}>
+                                <Text style={{ color: COLORS.blackColor, opacity: 0.6, fontFamily: FONT_MEDIUM, fontSize: 13 }}>Attachments</Text>
+                                {/* Attachments Here */}
+                                <View style={{ flexDirection: "row" }}>
+                                    {item?.attachments?.map((i, index) => (
+                                        <TouchableOpacity
+                                            key={index}
+                                            activeOpacity={0.8}
+                                            onPress={() => viewDocument({ uri: i?.local_path })}
+                                        >
+                                            {isPdfFile(i?.local_path) ? (
+                                                <Ionicons
+                                                    name="document-text-outline"
+                                                    size={45}
+                                                    color={COLORS.primaryColor}
+                                                    style={{ margin: 5 }}
+                                                />
+                                            ) : (
+                                                <Image
+                                                    source={{ uri: i?.local_path }}
+                                                    style={{ width: 45, height: 45, margin: 5, borderRadius: 8 }}
+                                                    resizeMode="cover"
+                                                />
+                                            )}
+                                        </TouchableOpacity>
+                                    ))}
+                                </View>
+
+                            </View>
+                        }
+
+                        <View style={[Styles._segment, { flexDirection: "column", alignItems: "flex-start" }]}>
+                            <Text style={{ color: COLORS.blackColor, opacity: 0.6, fontFamily: FONT_MEDIUM, fontSize: 13 }}>Running Balance</Text>
+                            <Text style={{ color: item?.balance < 0 ? "red" : "green", fontFamily: FONT_MEDIUM, fontSize: 11 }}>Rs {Math.abs(item?.balance)}</Text>
+                        </View>
+
+                        <TouchableOpacity
+                            style={[Styles._segment, { justifyContent: "center", gap: 5 }]}
+                            activeOpacity={0.8}
+                        >
+                            <Ionicons
+                                name={"pencil-outline"}
+                                color={COLORS.primaryColor}
+                                size={20}
+                            />
+                            <Text style={{ color: COLORS.primaryColor, fontSize: 14, fontFamily: FONT_NORMAL }}>Edit Entry</Text>
+                        </TouchableOpacity>
+                    </View>
+                </ScrollView>
+            </View>
+        </View>
+    )
+}
+
+const Styles = StyleSheet.create({
+    _mainContainer: {
+        flex: 1,
+        backgroundColor: COLORS.backgroundColor,
+    },
+    _headerMain: {
+        width: WP(100),
+        height: 60,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        gap: 10
+    },
+    _nameTxt: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_MEDIUM,
+        fontSize: 15
+    },
+    _contentMain: {
+        flex: 1,
+        width: "100%",
+        // height: "85%",
+        // backgroundColor: "red",
+        alignItems: "center"
+    },
+    _sectionOne: {
+        width: "95%",
+        // height: 200,
+        backgroundColor: COLORS.whiteColor,
+        position: "absolute",
+        top: 0,
+        borderRadius: 12,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+        alignItems: "center",
+        paddingHorizontal: 10,
+    },
+    _segment: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        // height:40,
+        // backgroundColor: "pink",
+        paddingVertical: 10,
+        borderBottomColor: COLORS.grey,
+        borderBottomWidth: 1
+    },
+    _avatarMain: {
+        width: 47,
+        height: 47,
+        backgroundColor: COLORS.lightGrey,
+        borderRadius: 100,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    _avatarText: {
+        fontFamily: FONT_NORMAL,
+        fontSize: 16,
+        color: COLORS.primaryColor
+    },
+})

package/src/app/screens/index.js

@@ -0,0 +1,23 @@
+import Splash from "./Splash";
+import HomeScreen from "./HomeScreen";
+import Banks from "./Banks";
+import Customers from "./Customers";
+import Suppliers from "./Suppliers";
+import AddScreen from "./AddScreen";
+import CustomerEntries from "./CustomerEntries";
+import SelectBusiness from "./SelectBusiness";
+import Entry from "./Entry";
+import TransactionDetails from "./TransactionDetails";
+
+export {
+    Splash,
+    HomeScreen,
+    Banks,
+    Customers,
+    Suppliers,
+    AddScreen,
+    CustomerEntries,
+    SelectBusiness,
+    Entry,
+    TransactionDetails,
+}

package/src/app/themes/config.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+    Platform,
+    Dimensions,
+    useWindowDimensions,
+    Image,
+    I18nManager,
+} from 'react-native';
+import {
+    widthPercentageToDP,
+    heightPercentageToDP,
+} from 'react-native-responsive-screen';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import Entypo from 'react-native-vector-icons/Entypo';
+import EvilIcons from 'react-native-vector-icons/EvilIcons';
+import Feather from 'react-native-vector-icons/Feather';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+//CONSTANTS USED IN APP
+export const APP_NAME = 'DigiKhata';
+export const PLATFORM = Platform.OS;
+export const WP = widthPercentageToDP;
+export const HP = heightPercentageToDP;
+export const MOBILE_WIDTH = Dimensions.get('window').width;
+export const MOBILE_HEIGHT = Dimensions.get('window').height;
+
+//COLORS USED IN APPLICATION
+export const COLORS = {
+    primaryColor: '#FF5F00',
+    textColor: '#333333',
+    backgroundColor: '#F2F2F2',
+    primaryRGB: 'rgba(90,44,102,',
+    secondaryColor: '#FCBF11',
+    territoryColor: '#9D4DB3',
+    primaryColor2: '#9E2654',
+    secondaryColor2: '#BC2E65',
+    territoryColor2: '#D34D80',
+    lightGrey: '#F1F1F1',
+    darkGrey: '#9B9B9B',
+    grey: '#cccccc',
+    gray: 'rgb(211,211,211)',
+    blackColor: '#000',
+    whiteColor: '#ffffff',
+    borderColor: '#E7E7E7',
+    redColor: '#E6344A',
+    greenColor: '#21CE99',
+    yellowColor: '#FEA503',
+    circle1: '#9e2654',
+    circle2: '#a83c65',
+    circle3: '#b15176',
+    circle4: '#bb6787',
+    circle5: '#c57d98',
+    primary_circle1: '#5a2c66',
+    primary_circle2: '#6b4175',
+    primary_circle3: '#7b5685',
+    primary_circle4: '#8c6b94',
+    dark_orange: '#D28C64',
+    primaryGreen: '#6BC9B9',
+    primaryRed: '#E71E25',
+    primaryOrange: '#F36B10',
+    primaryYellow: '#FCD100',
+    dark_golden: '#b58146',
+};
+
+// export const mainLogo = require("../assets/images/maiLogo.png");
+// export const mainLogoBlack = require("../assets/images/mianLogoBlack.png");
+
+export const FONT_NORMAL = "29LTBukra-Regular";
+export const FONT_MEDIUM = "29LTBukra-Medium";
+export const FONT_BOLD = "29LTBukra-Bold";
+
+export const TEXT_SIZES = {
+    h1: 7,
+    h2: 6,
+    h3: 5,
+    info_1: 4,
+    info_2: 3.5,
+};
+
+export const EXPENSE_COLORS = [
+    'tomato',
+    'orange',
+    '#FF7F50',
+    'gold',
+    'yellow',
+    '#90EE90',
+    'green',
+    '#A84420',
+    '#FFC600',
+    '#FE5000',
+    '#12B347',
+    '#E8A20C',
+    '#E6A467',
+];
+
+//MONTHS
+export const MONTHS = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+
+export const DAYS = [
+    { value: 'Sunday', label: 'Sunday' },
+    { value: 'Monday', label: 'Monday' },
+    { value: 'Tuesday', label: 'Tuesday' },
+    { value: 'Wednesday', label: 'Wednesday' },
+    { value: 'Thursday', label: 'Thursday' },
+    { value: 'Friday', label: 'Friday' },
+    { value: 'Saturday', label: 'Saturday' },
+];
+
+export function getAvatar(name) {
+    if (!name) return "";
+
+    const words = name.trim().split(" ");
+
+    if (words.length === 1) {
+        return words[0][0].toUpperCase();
+    } else {
+        return (words[0][0] + " " + words[1][0]).toUpperCase();
+    }
+}
+
+export function formatDateTime(dateTimeStr) {
+    const inputDate = new Date(dateTimeStr.replace(" ", "T")); // Convert to ISO format
+    const now = new Date();
+
+    const isToday = inputDate.toDateString() === now.toDateString();
+
+    const yesterday = new Date();
+    yesterday.setDate(now.getDate() - 1);
+    const isYesterday = inputDate.toDateString() === yesterday.toDateString();
+
+    const optionsTime = { hour: '2-digit', minute: '2-digit', hour12: true };
+    const formattedTime = inputDate.toLocaleTimeString('en-US', optionsTime);
+
+    if (isToday) return `Today • ${formattedTime}`;
+    if (isYesterday) return `Yesterday • ${formattedTime}`;
+
+    const optionsDate = { weekday: 'short', day: '2-digit', month: 'short', year: '2-digit' };
+    const formattedDate = inputDate.toLocaleDateString('en-US', optionsDate);
+
+    return `${formattedDate} • ${formattedTime}`;
+}
+
+export function mergeDateTime(dateObj) {
+    const date = new Date(dateObj.date);
+    const time = new Date(dateObj.time);
+
+    // Merge date part from `date` and time part from `time`
+    date.setHours(time.getHours(), time.getMinutes(), time.getSeconds());
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+export const isPdfFile = (uri) => {
+    if (!uri) return false;
+
+    const lowerUri = uri.toLowerCase();
+
+    // If ends with .pdf
+    if (lowerUri.endsWith(".pdf")) return true;
+
+    // If no extension in the path
+    const filename = lowerUri.split("/").pop(); // get last part after /
+    return !filename.includes("."); // true if no "." in filename
+};