digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/StockParent.js

@@ -0,0 +1,287 @@
+import {
+  View,
+  Text,
+  SafeAreaView,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Image
+} from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  COLORS,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  HP,
+  ICON_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import { All, Banks, Customers, StockChild, Suppliers } from '../screens';
+import { TabView, SceneMap } from 'react-native-tab-view';
+import { useSelector, useDispatch } from 'react-redux';
+import axios from 'axios';
+import { addBank, bankExists } from '../database/clients';
+import { useNavigation, CommonActions } from '@react-navigation/native';
+import { Header } from '../components';
+import LowStock from './LowStock';
+import { addItemCategory, getItemCategories, getItemsByBusiness } from '../database/stock';
+
+const Tab = createMaterialTopTabNavigator();
+
+export default function HomeScreen() {
+  const hasReset = useRef(false);
+  const navigation = useNavigation();
+
+  const [index, setIndex] = React.useState(0);
+  const clients = useSelector((state) => state.client.home_customers);
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+
+  const [activeTab, setActiveTab] = useState('All Items');
+  const [Items, setItems] = useState([]);
+  const [SelectedFilter, setSelectedFilter] = useState("most_recent")
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'All Items':
+        getInvoices(false);
+        break; // stop here, don't continue to next case
+
+      case 'Low Stock':
+        getInvoices(true);
+        break;
+
+      default:
+        return null;
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getInvoices();
+      setActiveTab("All Items")
+    });
+
+    return () => unsubscribe();
+  }, [navigation]);
+
+  const getInvoices = (lowStock = false) => {
+    console.log({ lowStock })
+    getItemsByBusiness(selectBusiness?.id, SelectedFilter, lowStock)
+      .then((res) => {
+        setItems(res);
+      })
+      .catch((err) => {
+        console.error('Failed to fetch invoices:', err);
+      });
+  };
+
+  useEffect(() => {
+    if (activeTab === 'All Items') getInvoices(false);
+    else if (activeTab === 'Low Stock') getInvoices(true);
+  }, [activeTab, SelectedFilter]);
+
+
+
+  return (
+    <SafeAreaView style={Styles._mainContainer}>
+      <LinearGradient
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+        style={Styles._headerMain}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+      >
+        <Header
+          navigation={navigation}
+          title={'Stock Book'}
+          onBackPress={() => {
+            navigation.reset({
+              index: 0,
+              routes: [{ name: 'HomeScreen' }],
+            });
+          }}
+        />
+
+        {/* KEEP the Stock Value button but remove manual tabs */}
+        <View style={Styles.tabButtonRow}>
+          <View style={{ flex: 1 }} />
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={Styles._valuationButton}
+            onPress={() => navigation.navigate("StockValue")}
+          >
+            <Image
+              source={require("../assets/illustrations/packages.png")}
+              style={{ width: 18, height: 18 }}
+            />
+            <Text style={Styles._valuationText}>STOCK VALUE</Text>
+          </TouchableOpacity>
+        </View>
+
+      </LinearGradient>
+
+      {/* Tab Navigation Below Header */}
+      <View
+        style={{
+          height: '100%',
+          position: 'absolute',
+          marginTop: HP(5.5),
+          width: '100%',
+        }}
+      >
+        <Tab.Navigator
+          screenOptions={({ route }) => ({
+            tabBarScrollEnabled: false,
+            tabBarIndicatorStyle: {
+              backgroundColor: COLORS.yellowColor,
+              height: 5,
+              borderRadius: 50,
+            },
+            tabBarItemStyle: {
+              width: 'auto',
+            },
+            tabBarStyle: {
+              backgroundColor: 'transparent',
+              elevation: 0,
+            },
+            tabBarLabel: ({ focused }) => (
+              <Text
+                style={{
+                  color:COLORS.whiteColor,
+                  fontSize: 15,
+                  fontFamily: FONT_MEDIUM,
+                  textTransform: 'none',
+                  opacity: focused ? 1 : 0.6,
+                }}
+              >
+                {route.name}
+              </Text>
+            ),
+          })}
+        >
+          <Tab.Screen
+            name="All Items"
+            listeners={{focus: () => setActiveTab("All Items")}}
+            children={() => (
+              <StockChild
+                navigation={navigation}
+                Items={Items}
+                setItems={setItems}
+                activeTab="All Items"
+              />
+            )}
+          />
+
+          <Tab.Screen
+            name="Low Stock"
+            listeners={{focus: () => setActiveTab("Low Stock")}}
+            children={() => (
+              <StockChild
+                navigation={navigation}
+                Items={Items}
+                setItems={setItems}
+                activeTab="Low Stock"
+              />
+            )}
+          />
+        </Tab.Navigator>
+      </View>
+    </SafeAreaView>
+
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 300,
+    // backgroundColor:COLORS.primaryColor,
+    // justifyContent: 'center',
+    // alignItems: 'center',
+    // position: "absolute",
+  },
+  _headerTop: {
+    width: WP(100),
+    // height: "35%",
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+    marginVertical: 10,
+    // marginTop: 10
+  },
+  _headerTitle: {
+    color: COLORS.whiteColor,
+    fontSize: 12,
+    fontFamily: FONT_MEDIUM,
+  },
+  _collectionBtn: {
+    // width: 95,
+    height: 30,
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: 5,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    gap: 7,
+  },
+
+  tabButtonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: "center",
+    width: '95%', // keeps buttons centered, not full width
+    // marginTop: 10,
+    // gap: 10,
+    // marginLeft: 10,
+    // backgroundColor: "red",
+    alignSelf: "center"
+  },
+
+  tabButton: {
+    width: '40%', // ~80% total width across 4 buttons with small spacing
+    paddingVertical: 8,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    alignItems: 'center',
+  },
+
+  activeTabButton: {
+    backgroundColor: COLORS.whiteColor,
+  },
+
+  tabText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+  },
+
+  activeTabText: {
+    color: COLORS.primaryColor,
+  },
+  _valuationButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    borderRadius: 7,
+    backgroundColor: COLORS.whiteColor,
+    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 10
+  },
+  _valuationText: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 10
+  },
+});