digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/EditCategory.js

@@ -0,0 +1,316 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  ScrollView,
+  FlatList,
+  TextInput,
+} from 'react-native';
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  COLORS,
+  FONT_BOLD,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  Input_Field_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { FloatingInput, Header } from '../components';
+import LinearGradient from 'react-native-linear-gradient';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+  addCashCategory,
+  getCashCategories,
+  updateCashCategory,
+} from '../database/cash';
+import Modal from 'react-native-modal';
+
+export default function EditCategory({ navigation }) {
+  const keyboardRef = useRef(null);
+
+  const [CashCategories, setCashCategories] = useState([]);
+  const [NewCategoryName, setNewCategoryName] = useState('');
+  const [AddCategoryModal, setAddCategoryModal] = useState(false);
+  const [ModalTitle, setModalTitle] = useState('Add New Category');
+  const [CategoryToUpdate, setCategoryToUpdate] = useState(null);
+
+  useEffect(() => {
+    getCashCategories().then((res) => {
+      setCashCategories(res);
+    });
+  }, []);
+
+  return (
+    <View style={Styles._mainContainer}>
+      <Header title={'Edit Category'} navigation={navigation} />
+      <LinearGradient
+        style={[Styles._headerMain, { height: 40 }]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.primaryColor, COLORS.secondaryColor]}
+      />
+
+      <View style={Styles._contentMain}>
+        <FlatList
+          data={CashCategories}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item, index }) => (
+            <TouchableOpacity activeOpacity={0.8} style={Styles._categoryCard}>
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
+              >
+                <MaterialIcons
+                  name={'sort'}
+                  color={COLORS.darkGrey}
+                  size={30}
+                />
+
+                <Text style={Styles._categoryName}>{item?.name}</Text>
+              </View>
+
+              <TouchableOpacity
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
+                activeOpacity={0.8}
+                onPress={() => {
+                  setModalTitle('Edit Category');
+                  setCategoryToUpdate(item);
+                  setNewCategoryName(item?.name);
+                  setAddCategoryModal(true);
+                }}
+              >
+                <Ionicons name={'pencil'} color={COLORS.darkGrey} size={22} />
+
+                <Text
+                  style={[Styles._categoryName, { color: COLORS.darkGrey }]}
+                >
+                  Edit
+                </Text>
+              </TouchableOpacity>
+            </TouchableOpacity>
+          )}
+        />
+        <TouchableOpacity
+          activeOpacity={0.8}
+          style={Styles._continueBtn}
+          onPress={() => {
+            setModalTitle('Add New Category');
+            setCategoryToUpdate(null);
+            setNewCategoryName('');
+            setAddCategoryModal(true);
+          }}
+        >
+          <Text style={Styles._continueBtnTxt}>ADD NEW CATEGORY</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Add Category */}
+      <Modal
+        isVisible={AddCategoryModal}
+        onBackButtonPress={() => setAddCategoryModal(false)}
+        onBackdropPress={() => setAddCategoryModal(false)}
+        style={Styles._categoryModal}
+        onModalShow={() => {
+          if (keyboardRef.current) {
+            keyboardRef.current.focus();
+          }
+        }}
+      >
+        <View style={Styles._addCategoryMain}>
+          <View
+            style={[
+              Styles._categoryModalHeader,
+              { borderBottomColor: COLORS.whiteColor },
+            ]}
+          >
+            <Text style={Styles._categoryModalHeaderTitle}>{ModalTitle}</Text>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={{ padding: 5 }}
+              onPress={() => setAddCategoryModal(false)}
+            >
+              <Ionicons name={'close'} color={COLORS.darkGrey} size={25} />
+            </TouchableOpacity>
+          </View>
+
+          {/* <TextInput
+            style={[Styles._billNoMain, { width: '95%' }]}
+            ref={keyboardRef}
+            value={NewCategoryName}
+            maxLength={20}
+            onChangeText={(text) => {
+              setNewCategoryName(text);
+            }}
+          /> */}
+
+          <FloatingInput
+            label="Category"
+            // iconName="id-card-outline"
+            iconPosition="right"
+            value={NewCategoryName}
+            maxLength={20}
+            onChangeText={(text) => {
+              setNewCategoryName(text);
+            }}
+            allowedChars={/[^A-Za-z0-9\s]/g}
+            containerStyle={{ width: '95%' }}
+          />
+
+          <TouchableOpacity
+            activeOpacity={0.8}
+            style={[
+              Styles._continueBtn,
+              {
+                width: '95%',
+                backgroundColor: NewCategoryName?.trim()
+                  ? COLORS.primaryColor
+                  : COLORS.gray,
+              },
+            ]}
+            onPress={async () => {
+              if (NewCategoryName.trim()) {
+                try {
+                  if (CategoryToUpdate) {
+                    await updateCashCategory(
+                      CategoryToUpdate?.id,
+                      NewCategoryName
+                    );
+                    setNewCategoryName('');
+                    setAddCategoryModal(false);
+                    let all = await getCashCategories();
+                    setCashCategories(all);
+                  } else {
+                    await addCashCategory(NewCategoryName);
+                    setNewCategoryName('');
+                    setAddCategoryModal(false);
+                    let all = await getCashCategories();
+                    setCashCategories(all);
+                  }
+                } catch (error) {
+                  console.log('Error adding category:', error);
+                }
+              }
+            }}
+          >
+            <Text style={Styles._continueBtnTxt}>Save</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const Styles = StyleSheet.create({
+  _mainContainer: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: COLORS.backgroundColor,
+  },
+  _contentMain: {
+    width: WP(94),
+    height: '90%',
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 60,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    // paddingVertical: 12,
+    paddingHorizontal: 12,
+    gap: 12,
+    paddingBottom: 12,
+  },
+  _headerMain: {
+    width: WP(100),
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    // justifyContent: "space-between",
+    paddingHorizontal: Platform.OS == 'android' && 10,
+    gap: 15,
+  },
+  _categoryCard: {
+    width: '100%',
+    height: 60,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomColor: COLORS.grey,
+    borderBottomWidth: 0.7,
+  },
+  _categoryName: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 14,
+  },
+  _continueBtn: {
+    width: '100%',
+    height: TEXT_SIZES.BUTTON_HEIGHT,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    bottom: 10,
+    marginBottom:15
+  },
+  _continueBtnTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: TEXT_SIZES.BUTTON_TEXT,
+
+  },
+  _addCategoryMain: {
+    width: WP(100),
+    // height: HP(25),
+    backgroundColor: COLORS.whiteColor,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    gap: 20,
+  },
+  _categoryModalHeader: {
+    width: '100%',
+    height: 50,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 5,
+    borderBottomColor: COLORS.darkGrey,
+    borderBottomWidth: 0.7,
+    paddingHorizontal: 20,
+  },
+  _categoryModalHeaderTitle: {
+    fontFamily: FONT_MEDIUM,
+    color: COLORS.primaryColor,
+    fontSize: 15,
+  },
+  _billNoMain: {
+    width: '91%',
+    height: Input_Field_SIZES.Input_Height,
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 15,
+    color: COLORS.blackColor,
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    fontFamily: FONT_MEDIUM,
+  },
+  _categoryModal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+    padding: 0,
+  },
+});

package/src/app/screens/EditCategoryStock.js

@@ -0,0 +1,320 @@
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    Platform,
+    ScrollView,
+    FlatList,
+    TextInput,
+} from 'react-native';
+import React, { useState, useEffect, useRef } from 'react';
+import {
+    COLORS,
+    FONT_BOLD,
+    FONT_MEDIUM,
+    FONT_NORMAL,
+    Input_Field_SIZES,
+    TEXT_SIZES,
+    WP,
+} from '../themes/config';
+import { FloatingInput, Header } from '../components';
+import LinearGradient from 'react-native-linear-gradient';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+    addCashCategory,
+    getCashCategories,
+    updateCashCategory,
+} from '../database/cash';
+import Modal from 'react-native-modal';
+import { addItemCategory, getItemCategories, updateItemCategory } from '../database/stock';
+import { useSelector } from "react-redux"
+
+export default function EditCategoryStock({ navigation }) {
+    const keyboardRef = useRef(null);
+
+    const selectBusiness = useSelector((state) => state.client.selected_business);
+
+    const [CashCategories, setCashCategories] = useState([]);
+    const [NewCategoryName, setNewCategoryName] = useState('');
+    const [AddCategoryModal, setAddCategoryModal] = useState(false);
+    const [ModalTitle, setModalTitle] = useState('Add New Category');
+    const [CategoryToUpdate, setCategoryToUpdate] = useState(null);
+
+    useEffect(() => {
+        getItemCategories().then((res) => {
+            setCashCategories(res);
+        });
+    }, []);
+
+    return (
+        <View style={Styles._mainContainer}>
+            <Header title={'Edit Category'} navigation={navigation} />
+            <LinearGradient
+                style={[Styles._headerMain, { height: 40 }]}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+                colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+            />
+
+            <View style={Styles._contentMain}>
+                <FlatList
+                    data={CashCategories}
+                    showsVerticalScrollIndicator={false}
+                    renderItem={({ item, index }) => (
+                        <TouchableOpacity activeOpacity={0.8} style={Styles._categoryCard}>
+                            <View
+                                style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
+                            >
+                                <MaterialIcons
+                                    name={'sort'}
+                                    color={COLORS.darkGrey}
+                                    size={30}
+                                />
+
+                                <Text style={Styles._categoryName}>{item?.name}</Text>
+                            </View>
+
+                            <TouchableOpacity
+                                style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
+                                activeOpacity={0.8}
+                                onPress={() => {
+                                    setModalTitle('Edit Category');
+                                    setCategoryToUpdate(item);
+                                    setNewCategoryName(item?.name);
+                                    setAddCategoryModal(true);
+                                }}
+                            >
+                                <Ionicons name={'pencil'} color={COLORS.darkGrey} size={22} />
+
+                                <Text
+                                    style={[Styles._categoryName, { color: COLORS.darkGrey }]}
+                                >
+                                    Edit
+                                </Text>
+                            </TouchableOpacity>
+                        </TouchableOpacity>
+                    )}
+                />
+                <TouchableOpacity
+                    activeOpacity={0.8}
+                    style={Styles._continueBtn}
+                    onPress={() => {
+                        setModalTitle('Add New Category');
+                        setCategoryToUpdate(null);
+                        setNewCategoryName('');
+                        setAddCategoryModal(true);
+                    }}
+                >
+                    <Text style={Styles._continueBtnTxt}>ADD NEW CATEGORY</Text>
+                </TouchableOpacity>
+            </View>
+
+            {/* Add Category */}
+            <Modal
+                isVisible={AddCategoryModal}
+                onBackButtonPress={() => setAddCategoryModal(false)}
+                onBackdropPress={() => setAddCategoryModal(false)}
+                style={Styles._categoryModal}
+                onModalShow={() => {
+                    if (keyboardRef.current) {
+                        keyboardRef.current.focus();
+                    }
+                }}
+            >
+                <View style={Styles._addCategoryMain}>
+                    <View
+                        style={[
+                            Styles._categoryModalHeader,
+                            { borderBottomColor: COLORS.whiteColor },
+                        ]}
+                    >
+                        <Text style={Styles._categoryModalHeaderTitle}>{ModalTitle}</Text>
+
+                        <TouchableOpacity
+                            activeOpacity={0.8}
+                            style={{ padding: 5 }}
+                            onPress={() => setAddCategoryModal(false)}
+                        >
+                            <Ionicons name={'close'} color={COLORS.darkGrey} size={25} />
+                        </TouchableOpacity>
+                    </View>
+
+                    {/* <TextInput
+            style={[Styles._billNoMain, { width: '95%' }]}
+            ref={keyboardRef}
+            value={NewCategoryName}
+            maxLength={20}
+            onChangeText={(text) => {
+              setNewCategoryName(text);
+            }}
+          /> */}
+
+                    <FloatingInput
+                        label="Category"
+                        // iconName="id-card-outline"
+                        iconPosition="right"
+                        value={NewCategoryName}
+                        maxLength={20}
+                        onChangeText={(text) => {
+                            setNewCategoryName(text);
+                        }}
+                        allowedChars={/[^A-Za-z0-9\s]/g}
+                        containerStyle={{ width: '95%' }}
+                    />
+
+                    <TouchableOpacity
+                        activeOpacity={0.8}
+                        style={[
+                            Styles._continueBtn,
+                            {
+                                width: '95%',
+                                backgroundColor: NewCategoryName?.trim()
+                                    ? COLORS.primaryColor
+                                    : COLORS.gray,
+                            },
+                        ]}
+                        onPress={async () => {
+                            if (NewCategoryName.trim()) {
+                                try {
+                                    if (CategoryToUpdate) {
+                                        await updateItemCategory(
+                                            CategoryToUpdate?.id,
+                                            NewCategoryName
+                                        );
+                                        setNewCategoryName('');
+                                        setAddCategoryModal(false);
+                                        let all = await getItemCategories();
+                                        setCashCategories(all);
+                                    } else {
+                                        await addItemCategory(NewCategoryName, selectBusiness?.id);
+                                        setNewCategoryName('');
+                                        setAddCategoryModal(false);
+                                        let all = await getItemCategories();
+                                        setCashCategories(all);
+                                    }
+                                } catch (error) {
+                                    console.log('Error adding category:', error);
+                                }
+                            }
+                        }}
+                    >
+                        <Text style={Styles._continueBtnTxt}>Save</Text>
+                    </TouchableOpacity>
+                </View>
+            </Modal>
+        </View>
+    );
+}
+
+const Styles = StyleSheet.create({
+    _mainContainer: {
+        flex: 1,
+        alignItems: 'center',
+        backgroundColor: COLORS.backgroundColor,
+    },
+    _contentMain: {
+        width: WP(94),
+        height: '90%',
+        backgroundColor: COLORS.whiteColor,
+        position: 'absolute',
+        top: 60,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 3.84,
+        elevation: 5,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        // paddingVertical: 12,
+        paddingHorizontal: 12,
+        gap: 12,
+        paddingBottom: 12,
+    },
+    _headerMain: {
+        width: WP(100),
+        height: 60,
+        flexDirection: 'row',
+        alignItems: 'center',
+        // justifyContent: "space-between",
+        paddingHorizontal: Platform.OS == 'android' && 10,
+        gap: 15,
+    },
+    _categoryCard: {
+        width: '100%',
+        height: 60,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderBottomColor: COLORS.grey,
+        borderBottomWidth: 0.7,
+    },
+    _categoryName: {
+        color: COLORS.blackColor,
+        fontFamily: FONT_NORMAL,
+        fontSize: 14,
+    },
+    _continueBtn: {
+        width: '100%',
+        height: TEXT_SIZES.BUTTON_HEIGHT,
+        backgroundColor: COLORS.primaryColor,
+        borderRadius: TEXT_SIZES.BORDER_RADIUS,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        bottom: 10,
+        marginBottom: 15
+    },
+    _continueBtnTxt: {
+        color: COLORS.whiteColor,
+        fontFamily: FONT_MEDIUM,
+        fontSize: TEXT_SIZES.BUTTON_TEXT,
+
+    },
+    _addCategoryMain: {
+        width: WP(100),
+        // height: HP(25),
+        backgroundColor: COLORS.whiteColor,
+        borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+        borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+        alignItems: 'center',
+        gap: 20,
+    },
+    _categoryModalHeader: {
+        width: '100%',
+        height: 50,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginTop: 5,
+        borderBottomColor: COLORS.darkGrey,
+        borderBottomWidth: 0.7,
+        paddingHorizontal: 20,
+    },
+    _categoryModalHeaderTitle: {
+        fontFamily: FONT_MEDIUM,
+        color: COLORS.primaryColor,
+        fontSize: 15,
+    },
+    _billNoMain: {
+        width: '91%',
+        height: Input_Field_SIZES.Input_Height,
+        borderColor: COLORS.grey,
+        borderWidth: 1,
+        borderRadius: TEXT_SIZES.BORDER_RADIUS,
+        paddingHorizontal: 15,
+        color: COLORS.blackColor,
+        fontSize: Input_Field_SIZES.Input_Font_Size,
+        fontFamily: FONT_MEDIUM,
+    },
+    _categoryModal: {
+        justifyContent: 'flex-end',
+        margin: 0,
+        padding: 0,
+    },
+});