digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/StockDetail.js

@@ -0,0 +1,758 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  FlatList,
+  ScrollView,
+  Image,
+  Pressable,
+  Modal,
+  Alert,
+} from 'react-native';
+import {
+  addCommas,
+  Button_Text_SIZES,
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  formatTime,
+  fromJsDateToSql,
+  HP,
+  ICON_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import {
+  Header,
+  BillList,
+  SearchBar,
+  StockDetailChild,
+  BottomView,
+} 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 } from 'react-redux';
+import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useDispatch } from 'react-redux';
+
+import {
+  Menu,
+  MenuOptions,
+  MenuOption,
+  MenuTrigger,
+} from 'react-native-popup-menu';
+import { STATUS_BAR_COLOR } from '../redux/reducers/client/client_types';
+import {
+  getItemDetailsByItemId,
+  getItemsByBusiness,
+  softDeleteItem,
+} from '../database/stock';
+
+export default function StockDetail({ navigation, route }) {
+  const itemId = route?.params?.itemId;
+  const selectBusiness = useSelector((state) => state.client.selected_business);
+  const dispatch = useDispatch();
+
+  const [CashEntries, setCashEntries] = useState([]);
+  const [Balance, setBalance] = useState('');
+  const [filteredEntries, setFilteredEntries] = useState([]);
+  const [searchText, setSearchText] = useState('');
+  const [StartDate, setStartDate] = useState('');
+  const [EndDate, setEndDate] = useState('');
+  const insets = useSafeAreaInsets();
+  const [Business, setBusiness] = useState([]);
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [ItemDetails, setItemDetails] = useState(null);
+  const [Entries, setEntries] = useState([]);
+
+  const totalCashIN = CashEntries.reduce(
+    (sum, item) => sum + Number(item.cashIN || 0),
+    0
+  );
+
+  const totalCashOUT = CashEntries.reduce(
+    (sum, item) => sum + Number(item.cashOUT || 0),
+    0
+  );
+
+  const balance = totalCashIN - totalCashOUT;
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', async () => {
+      try {
+        dispatch({
+          type: STATUS_BAR_COLOR,
+          color: COLORS.primaryColor,
+        });
+        await getItemDetails();
+      } catch (error) {
+        console.log('❌ Error fetching item details:', error);
+      }
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  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(),
+    });
+  };
+
+  const handleDeleteConfirm = () => {
+    // TODO: replace with real delete API / redux dispatch
+    setDeleteModalVisible(false);
+    Alert.alert('Deleted', 'Entry deleted successfully.');
+    // If you want to go back after delete:
+    // navigation.goBack();
+  };
+
+  const getItemDetails = async () => {
+    let all = await getItemsByBusiness(selectBusiness?.id);
+    let filtered = all.find((item) => item?.id == itemId);
+    setItemDetails(filtered);
+  };
+
+  useEffect(() => {
+    if (!ItemDetails?.id) return;
+
+    getItemDetailsByItemId(ItemDetails.id)
+      .then((res) => {
+        setEntries(res);
+      })
+      .catch((error) => {
+        console.log('Error fetching item details:', error);
+      });
+  }, [ItemDetails]);
+
+  const onDelete = () => {
+    Alert.alert(
+      'Delete Item',
+      'Are you sure you want to delete this item?',
+      [
+        {
+          text: 'Cancel',
+          onPress: () => console.log('❌ Deletion cancelled'),
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await softDeleteItem(ItemDetails?.id); // make sure itemId is defined in your component
+              console.log('✅ Item soft deleted successfully');
+              navigation.goBack(); // or reset navigation if needed
+            } catch (error) {
+              console.log('❌ Error soft deleting item:', error);
+            }
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Summary Card */}
+      <LinearGradient
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+        style={styles._linearGradient}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            width: '95%',
+            justifyContent: 'space-between',
+            alignContent: 'center',
+            alignSelf: 'center',
+          }}
+        >
+          <View style={styles._titleMain}>
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => {
+                navigation.goBack();
+              }}
+            >
+              <Ionicons
+                name={'chevron-back'}
+                color={COLORS.whiteColor}
+                size={24}
+              />
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => {
+                navigation.navigate('AdditemBillChild', { itemId });
+              }}
+            >
+              <Text style={styles._title}>{ItemDetails?.name}</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.ellipsisIcon}>
+            <View style={{ flexDirection: 'row', gap: 10 }}>
+              <Menu>
+                <MenuTrigger
+                  customStyles={{
+                    TriggerTouchableComponent: TouchableOpacity,
+                    triggerWrapper: styles.triggerWrapper,
+                  }}
+                >
+                  <Ionicons
+                    name="ellipsis-vertical"
+                    color={COLORS.whiteColor}
+                    size={20}
+                  />
+                </MenuTrigger>
+
+                <MenuOptions optionsContainerStyle={styles.menuContainer}>
+                  <MenuOption
+                    onSelect={() => {
+                      navigation.navigate('AdditemBillChild', { itemId });
+                    }}
+                  >
+                    <Text style={styles.menuText}>Item Profile</Text>
+                  </MenuOption>
+                  <MenuOption
+                    onSelect={() =>
+                      navigation.navigate('StockReport', { itemId })
+                    }
+                  >
+                    <Text style={styles.menuText}>View Report</Text>
+                  </MenuOption>
+                  <MenuOption onSelect={() => onDelete()}>
+                    <Text style={styles.menuText}>Delete Item</Text>
+                  </MenuOption>
+                </MenuOptions>
+              </Menu>
+            </View>
+          </View>
+        </View>
+      </LinearGradient>
+
+      <View style={styles.summaryCard}>
+        <TouchableOpacity
+          style={{ flexDirection: 'column', gap: 2 }}
+          onPress={() => {
+            console.log({ itemId });
+            navigation.navigate('StockReport', { itemId });
+          }}
+        >
+          <Text
+            style={[
+              styles.sectionLabel,
+              {
+                color:
+                  Number(ItemDetails?.qty) > 0
+                    ? COLORS.greenColor
+                    : Number(ItemDetails?.qty) < 0
+                      ? COLORS.redColor
+                      : COLORS.primaryColor,
+                fontFamily: FONT_MEDIUM,
+              },
+            ]}
+          >
+            {Math.abs(Number(ItemDetails?.qty))} {ItemDetails?.unit}
+          </Text>
+
+          <View>
+            <Text
+              style={[
+                styles.sectionLabelFooter,
+                { color: COLORS.blackColor, fontFamily: FONT_NORMAL },
+              ]}
+            >
+              Stock In Hand
+            </Text>
+          </View>
+        </TouchableOpacity>
+
+        <View
+          style={{
+            borderLeftColor: COLORS.borderColor,
+            borderLeftWidth: 1,
+            height: 50,
+            justifyContent: 'center',
+            paddingLeft: 20,
+          }}
+        />
+
+        <TouchableOpacity
+          style={{ flexDirection: 'column', gap: 2 }}
+          onPress={() => {
+            navigation.navigate('StockReport', { itemId });
+          }}
+        >
+          <Text
+            style={[
+              styles.sectionLabel,
+              {
+                color:
+                  Number(ItemDetails?.qty) * Number(ItemDetails?.costPrice) > 0
+                    ? COLORS.greenColor
+                    : Number(ItemDetails?.qty) *
+                      Number(ItemDetails?.costPrice) <
+                      0
+                      ? COLORS.redColor
+                      : COLORS.primaryColor,
+                fontFamily: FONT_MEDIUM,
+              },
+            ]}
+          >
+            Rs{' '}
+            {addCommas(
+              Math.abs(
+                Number(ItemDetails?.qty) * Number(ItemDetails?.costPrice)
+              )
+            )}
+          </Text>
+
+          <View
+            onPress={() => {
+              navigation.navigate('RateList');
+            }}
+          >
+            <Text
+              style={[
+                styles.sectionLabelFooter,
+                { color: COLORS.blackColor, fontFamily: FONT_NORMAL },
+              ]}
+            >
+              Stock Value
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+
+      {/* Bill List */}
+      <View style={styles.listContainer}>
+        <StockDetailChild Entries={Entries} />
+      </View>
+
+      {/* Create Bill Button  */}
+
+      <BottomView style={styles.bottomBar}>
+        <TouchableOpacity
+          style={[
+            styles.totalButton,
+            {
+              backgroundColor: COLORS.greenColor,
+              borderColor: COLORS.greenColor,
+            },
+          ]}
+          onPress={() => {
+            navigation.navigate('OutSell', { type: 'IN', itemId });
+          }}
+        >
+          <Text style={styles.totalText}>IN / BUY</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.totalButton, { backgroundColor: COLORS.redColor, borderColor: COLORS.redColor }]}
+          onPress={() => {
+            navigation.navigate('OutSell', { type: 'OUT', itemId });
+          }}
+        >
+          <Text style={styles.totalText}>OUT / SELL</Text>
+        </TouchableOpacity>
+      </BottomView>
+
+      <Modal
+        animationType="fade"
+        transparent
+        visible={deleteModalVisible}
+        onRequestClose={() => setDeleteModalVisible(false)}
+      >
+        <Pressable
+          style={styles.modalBackdrop}
+          onPress={() => setDeleteModalVisible(false)}
+        >
+          {/* empty to allow dismiss by tapping outside */}
+        </Pressable>
+        <View style={styles.modalCentered}>
+          <View style={styles.modalBox}>
+            <Text style={styles.modalTitle}>Delete Entry</Text>
+            <Text style={styles.modalSubtitle}>
+              Are you sure you want to delete this entry?
+            </Text>
+
+            <View style={styles.modalBtns}>
+              <Pressable
+                style={[styles.modalBtn, styles.modalCancel]}
+                onPress={() => setDeleteModalVisible(false)}
+              >
+                <Text style={styles.modalCancelText}>Cancel</Text>
+              </Pressable>
+
+              <Pressable
+                style={[styles.modalBtn, styles.modalOk]}
+                onPress={handleDeleteConfirm}
+              >
+                <Text style={styles.modalOkText}>OK</Text>
+              </Pressable>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+    alignItems: 'center',
+    // marginTop: 30,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 100,
+    // backgroundColor:COLORS.primaryColor,
+    // justifyContent: 'center',
+    // alignItems: 'center',
+    // position: "absolute",
+  },
+  gradientHeader: {
+    width: '100%',
+  },
+  summaryCard: {
+    width: '95%',
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    marginTop: -35,
+    // paddingVertical: 15,
+    height: 60,
+    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,
+    // width: '95%',
+  },
+  sectionLabelFooter: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 10,
+  },
+  sectionValue: {
+    fontFamily: FONT_MEDIUM,
+    fontSize: 15,
+  },
+  dateFilterContainer: {
+    // flexDirection: 'column',
+    width: '43.5%',
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    marginTop: 10,
+    paddingVertical: 10,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    elevation: 3,
+  },
+  dateFilterContainerParent: {
+    flexDirection: 'row',
+    width: '100%',
+    // backgroundColor: COLORS.whiteColor,
+    // borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    // marginTop: 10,
+    // paddingVertical: 10,
+    // justifyContent: 'space-around',
+    justifyContent: 'center',
+    gap: 10,
+    alignItems: 'center',
+    // elevation: 3,
+  },
+  dateBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  dateBtnText: {
+    color: COLORS.primaryColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+  },
+  entriesSummary: {
+    width: '90%',
+    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(42),
+    height: 45,
+    position: 'absolute',
+    right: 12,
+    bottom: 70,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  _linearGradient: {
+    width: WP(100),
+    height: 100,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  _titleMain: {
+    // width: WP(94),
+    height: 30,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    // alignItems: 'center',
+    marginBottom: 30,
+    // marginTop: 10,
+  },
+  ellipsisIcon: {
+    marginBottom: 30,
+    // marginTop: 10,
+  },
+  _title: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 18,
+    marginLeft: 15,
+  },
+  _fabTxt: {
+    color: COLORS.whiteColor,
+    fontSize: TEXT_SIZES.FLOATING_BUTTON_TEXT,
+    fontFamily: FONT_MEDIUM,
+    paddingRight: 10,
+  },
+  _grdientContainer: {
+    width: '100%',
+    height: HP(6),
+    // alignItems: 'center',
+    // marginRight: 6
+  },
+
+  bottomBar: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    paddingVertical: 10,
+    elevation: 10,
+    gap: 15,
+    alignSelf: 'center',
+    alignContent: 'center',
+  },
+
+  totalButton: {
+    borderWidth: 1,
+    marginBottom: 10,
+    borderColor: '#FF3B30',
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: 100,
+    width: '50%',
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  totalText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+
+  _tableHeader: {
+    width: '100%',
+    // height: 30,
+    backgroundColor: COLORS.whiteColor,
+    flexDirection: 'row',
+    // marginTop: 10,
+    borderBottomColor: COLORS.darkGrey,
+    borderBottomWidth: 0.7,
+    paddingHorizontal: 10,
+  },
+  _headerCell: {
+    width: '30%',
+    // height: "100%",
+    // backgroundColor: "pink",
+    justifyContent: 'center',
+    paddingLeft: 5,
+    paddingVertical: 5,
+    gap: 3,
+  },
+  _headerCellText: {
+    color: COLORS.blackColor,
+    opacity: 0.5,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 10,
+  },
+  _tableCal: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 10,
+  },
+  _inputMain: {
+    // width: '90%',
+    // marginVertical: 20,
+  },
+
+  /// Menu style
+
+  triggerWrapper: {
+    padding: 6,
+    flexDirection: 'row',
+    gap: WP(5),
+  },
+  menuContainer: {
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    // paddingVertical: 5,
+    backgroundColor: '#fff',
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    minWidth: 160,
+  },
+  menuText: {
+    fontSize: 15,
+    paddingVertical: 5,
+    paddingHorizontal: 14,
+    color: COLORS.blackColor,
+  },
+
+  /// Delete Modal styling
+
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: '#00000055',
+  },
+  modalCentered: {
+    position: 'absolute',
+    left: 20,
+    right: 20,
+    top: '40%',
+    transform: [{ translateY: -50 }],
+    alignItems: 'center',
+  },
+  modalBox: {
+    width: '100%',
+    backgroundColor: '#fff',
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    padding: 20,
+    alignItems: 'center',
+    elevation: 6,
+  },
+  modalTitle: { fontSize: 18, fontWeight: '800', marginBottom: 6 },
+  modalSubtitle: { color: '#666', textAlign: 'center', marginBottom: 18 },
+
+  modalBtns: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+  },
+  modalBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    marginHorizontal: 6,
+  },
+  modalCancel: { backgroundColor: '#f3f3f3' },
+  modalOk: { backgroundColor: '#e53935' },
+  modalCancelText: { color: '#333', fontWeight: '700' },
+  modalOkText: { color: '#fff', fontWeight: '700' },
+});