digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/BillHome.js

@@ -0,0 +1,97 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+import React from 'react';
+import {
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { Header } from '../components';
+import LinearGradient from 'react-native-linear-gradient';
+
+export default function BillHome({ navigation,fromSale }) {
+
+
+  return (
+    <View style={Styles._mainContainer}>
+      {!fromSale && <Header navigation={navigation} title={'Bill Book'} />}
+      <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._hoveringMain}>
+          <Text style={Styles._hoveringTitle}>Total sale for October</Text>
+
+          <Text style={Styles._amountTxt}>Rs 0</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _contentMain: {
+    flex: 1,
+    width: '100%',
+    // height: "85%",
+    // backgroundColor: "red",
+    alignItems: 'center',
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    // justifyContent: "space-between",
+    paddingHorizontal: Platform.OS == 'android' && 10,
+    gap: 15,
+  },
+  _hoveringMain: {
+    width: '95%',
+    height: 75,
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    // top: 10,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    // justifyContent: "center",
+    // paddingLeft: 20,
+    gap: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 22,
+  },
+  _hoveringTitle: {
+    color: COLORS.darkGrey,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 16,
+  },
+  _amountTxt: {
+    color: COLORS.primaryColor,
+    fontFamily: FONT_BOLD,
+    fontSize: 17,
+  },
+});

package/src/app/screens/BillParent.js

@@ -0,0 +1,419 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  FlatList,
+  ScrollView,
+} from 'react-native';
+import {
+  addCommas,
+  Button_Text_SIZES,
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  formatMyDate,
+  formatTime,
+  fromJsDateToSql,
+  getCurrentMonthName,
+  getCurrentMonthNameBill,
+  ICON_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { Header, BillList } from '../components';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { getCashRegisterEntries } from '../database/cash';
+import { AutoSizeText, ResizeTextMode } from 'react-native-auto-size-text';
+import { useSelector, useDispatch } from 'react-redux';
+import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { STATUS_BAR_COLOR } from '../redux/reducers/client/client_types';
+import { getInvoiceEntries } from '../database/bill';
+import { allBillsTemplate } from '../htmlTemplates/htmlTemplates';
+import { generatePDF } from 'react-native-html-to-pdf';
+import { viewDocument } from '@react-native-documents/viewer';
+
+export default function BillParent({ navigation, fromSale }) {
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const dispatch = useDispatch();
+  let monthName = getCurrentMonthNameBill();
+
+  const [Invoices, setInvoices] = useState([]);
+  const [Balance, setBalance] = useState('');
+  const [filteredEntries, setFilteredEntries] = useState([]);
+  const [searchText, setSearchText] = useState('');
+  const [StartDate, setStartDate] = useState('');
+  const [EndDate, setEndDate] = useState('');
+  const [TotalSale, setTotalSale] = useState(0);
+  const insets = useSafeAreaInsets();
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      fetchInvoices();
+    });
+
+    return unsubscribe;
+  }, [navigation, selectBusiness]);
+
+  useEffect(() => {
+    fetchInvoices();
+  }, [StartDate, EndDate]);
+
+  const fetchInvoices = async () => {
+    try {
+      dispatch({
+        type: STATUS_BAR_COLOR,
+        color: COLORS.primaryColor,
+      });
+
+      const today = new Date();
+      const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+      const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+
+      const startDate = fromJsDateToSql(startOfMonth).split(' ')[0];
+      const endDate = fromJsDateToSql(endOfMonth).split(' ')[0];
+
+      const allInvoices = await getInvoiceEntries(
+        StartDate ? fromJsDateToSql(StartDate) : null,
+        EndDate ? fromJsDateToSql(EndDate) : null,
+        selectBusiness?.id,
+        "most_recent",
+        fromSale ? true : false
+      );
+
+      // console.log({ allInvoices })
+
+      const currentMonthInvoices = await getInvoiceEntries(
+        startDate,
+        endDate,
+        selectBusiness?.id,
+        "most_recent",
+        fromSale ? true : false
+      );
+
+      const totalSale = currentMonthInvoices.reduce((sum, inv) => {
+        const paymentMode = Number(inv?.payment_mode);
+        const amt =
+          paymentMode === 0
+            ? parseFloat(inv?.amount) || 0
+            : parseFloat(inv?.advance) || 0;
+        return sum + amt;
+      }, 0);
+
+      setInvoices(allInvoices?.reverse());
+      console.log({ totalSale })
+      setTotalSale(totalSale);
+    } catch (error) {
+      console.log('❌ Error fetching invoices:', error);
+    }
+  };
+
+  const showStartDate = () => {
+    DateTimePickerAndroid.open({
+      value: StartDate || new Date(),
+      onChange: (event, date) => {
+        if (event?.type == 'set') setStartDate(date);
+      },
+      mode: 'date',
+      maximumDate: EndDate || new Date(),
+    });
+  };
+
+  const showEndDate = () => {
+    DateTimePickerAndroid.open({
+      value: EndDate || new Date(),
+      onChange: (event, date) => {
+        if (event?.type == 'set') setEndDate(date);
+      },
+      mode: 'date',
+      minimumDate: StartDate || undefined,
+      maximumDate: new Date(),
+    });
+  };
+
+
+
+  return (
+    <View style={styles.container}>
+      {!fromSale && <Header
+        navigation={navigation}
+        title={'Bill Book'}
+        onBackPress={() => {
+          navigation.reset({
+            index: 0,
+            routes: [{ name: 'HomeScreen' }],
+          });
+        }}
+      />}
+
+      {/* Gradient Header */}
+      <LinearGradient
+        style={[styles.gradientHeader, { height: 40 }]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+      />
+
+      {/* Summary Card */}
+      <View style={styles.summaryCard}>
+        <Text style={[styles.sectionLabel, { color: COLORS.darkGrey, fontSize: 17 }]}>
+          Total sale for {monthName}
+        </Text>
+
+        <Text
+          style={[
+            styles.sectionValue,
+            {
+              color: COLORS.redColor,
+            },
+          ]}
+        >
+          Rs {addCommas(Math.abs(TotalSale))}
+        </Text>
+      </View>
+
+      {/* Date Filter */}
+      <View style={styles.dateFilterContainer}>
+        <TouchableOpacity
+          activeOpacity={0.8}
+          style={styles.dateBtn}
+          onPress={showStartDate}
+        >
+          <Ionicons
+            name={'calendar-outline'}
+            color={COLORS.primaryColor}
+            size={22}
+          />
+          <Text style={styles.dateBtnText}>
+            {StartDate
+              ? formatMyDate(fromJsDateToSql(StartDate))
+              : 'Start Date'}
+          </Text>
+
+          {StartDate && (
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => setStartDate('')}
+              style={{ marginLeft: 6 }}
+            >
+              <Ionicons name="close-circle" size={18} color={COLORS.redColor} />
+            </TouchableOpacity>
+          )}
+        </TouchableOpacity>
+
+        <View style={styles.verticalDivider} />
+
+        <TouchableOpacity
+          activeOpacity={0.8}
+          style={styles.dateBtn}
+          onPress={showEndDate}
+        >
+          <Ionicons
+            name={'calendar-outline'}
+            color={COLORS.primaryColor}
+            size={22}
+          />
+
+          <Text style={styles.dateBtnText}>
+            {EndDate ? formatMyDate(fromJsDateToSql(EndDate)) : 'End Date'}
+          </Text>
+
+          {EndDate && (
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => setEndDate('')}
+              style={{ marginLeft: 6 }}
+            >
+              <Ionicons name="close-circle" size={18} color={COLORS.redColor} />
+            </TouchableOpacity>
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {/* Bill List */}
+      <View style={styles.listContainer}>
+        <BillList Bills={Invoices} fromSale={fromSale} />
+      </View>
+
+      {/* Create Bill Button */}
+      {
+        !fromSale &&
+        <TouchableOpacity
+          style={[styles._floatingBtn, { bottom: 0 + insets.bottom }]}
+          activeOpacity={0.8}
+          onPress={() => navigation.navigate('CreateBill', { type: 'green' })}
+        >
+          <LinearGradient
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+            style={styles._linearGradient}
+          >
+            <Ionicons
+              name={'add'}
+              color={COLORS.whiteColor}
+              size={ICON_SIZES.FAB_ICON}
+            // style={{ paddingLeft: 10 }}
+            />
+
+            <Text style={styles._fabTxt}>CREATE NEW BILL</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      }
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+    alignItems: 'center',
+  },
+  gradientHeader: {
+    width: '100%',
+  },
+  summaryCard: {
+    width: '95%',
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    marginTop: -40,
+    paddingVertical: 25,
+    paddingHorizontal: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  sectionLabel: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  sectionValue: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 18,
+  },
+  dateFilterContainer: {
+    flexDirection: 'row',
+    width: '95%',
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    marginTop: 10,
+    paddingVertical: 10,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    elevation: 3,
+  },
+  dateBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  verticalDivider: {
+    width: 1,
+    height: '100%',
+    backgroundColor: COLORS.gray,
+  },
+  dateBtnText: {
+    color: COLORS.primaryColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  entriesSummary: {
+    width: '95%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 15,
+    borderBottomWidth: 0.7,
+    borderBottomColor: COLORS.darkGrey,
+    paddingBottom: 8,
+  },
+  summaryRow: {
+    width: '50%',
+  },
+  summaryRight: {
+    alignItems: 'flex-end',
+    width: '25%',
+  },
+  summaryDate: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 14,
+  },
+  summarySub: {
+    color: COLORS.darkGrey,
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+  },
+  listContainer: {
+    flex: 1,
+    width: '100%',
+    marginTop: 15,
+    alignItems: 'center',
+  },
+  footer: {
+    width: '90%',
+    paddingVertical: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  createBtn: {
+    width: '100%',
+    height: 50,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  createBtnText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: Button_Text_SIZES.Button_Text,
+  },
+
+  _floatingBtn: {
+    // width: WP(45),
+    height: 50,
+    position: 'absolute',
+    right: 12,
+    bottom: 70,
+    borderRadius: 100,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    // backgroundColor: "blue"
+  },
+  _linearGradient: {
+    // width: "100%",
+    height: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+    gap: 10,
+  },
+  _fabTxt: {
+    color: COLORS.whiteColor,
+    fontSize: TEXT_SIZES.FLOATING_BUTTON_TEXT,
+    fontFamily: FONT_MEDIUM,
+    // paddingRight: 20,
+  },
+});