digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/components/StockDetailChild.js

@@ -0,0 +1,461 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TextInput,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import React, { useState, useEffect } from 'react';
+import {
+  COLORS,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  formatDateTime,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import { Ionicons } from '@expo/vector-icons'; // or react-native-vector-icons/Ionicons
+import SearchBar from './SearchBar';
+import { useNavigation } from '@react-navigation/native';
+import { getClientDetails } from '../database/clients';
+
+const StockDetailChild = ({ Entries }) => {
+  const navigation = useNavigation();
+
+  const [clientMap, setClientMap] = useState({});
+
+  const data = [
+    {
+      id: 1,
+      name: 'test',
+      billNo: '9191919',
+      username: 'shshs',
+      stock: 5,
+      value: 20,
+      type: 'out', // 'in' or 'out'
+      date: 'Mon, 20 Oct 25 • 12:40 PM',
+    },
+    {
+      id: 2,
+      name: 'jhhinbbhhh',
+      billNo: '66466677',
+      username: 'shshs',
+      stock: 25,
+      value: 25,
+      type: 'in',
+      date: 'Mon, 20 Oct 25 • 12:39 PM',
+    },
+  ];
+
+  const calculateRunningStock = (entries) => {
+    if (!Array.isArray(entries)) return [];
+
+    let runningStock = 0;
+
+    return entries
+      .sort((a, b) => new Date(a.created_at) - new Date(b.created_at)) // oldest first
+      .map((entry) => {
+        runningStock +=
+          (Number(entry.stockIN) || 0) - (Number(entry.stockOUT) || 0);
+        return { ...entry, currentStock: runningStock };
+      });
+  };
+
+  const clientName = async (id) => {
+    let details = await getClientDetails(id);
+    return details?.type == 2 ? details?.phone : details?.name
+  };
+
+  const updatedEntries = calculateRunningStock(Entries);
+
+  useEffect(() => {
+    const fetchClients = async () => {
+      let map = {};
+
+      for (let entry of updatedEntries) {
+        if (entry.customerId) {
+          const client = await getClientDetails(entry.customerId);
+          map[entry.id] = client?.name || "Unknown";
+        }
+      }
+
+      setClientMap(map);
+    };
+
+    fetchClients();
+  }, [Entries]);
+
+  const renderItem = async ({ item }) => {
+    let clientName = clientMap[item.id];
+    return (
+      <TouchableOpacity
+        onPress={() =>
+          navigation?.navigate('ItemEntryDetails', {
+            itemDetailId: item?.id,
+            itemId: item?.itemId,
+          })
+        }
+        activeOpacity={0.8}
+        style={styles.card}
+      >
+        <View style={styles.cardRow}>
+          {/* --- Left: Entries Section --- */}
+          <View style={styles.entrySection}>
+            <Text style={styles.date}>{formatDateTime(item?.entryDate)}</Text>
+
+            {item.details?.split('_')[0] ? (
+              <Text style={styles.name}>{item.details.split('_')[0]}</Text>
+            ) : null}
+
+            {item.details?.split('_')[2]?.trim() ? (
+              <Text style={styles.bill}>
+                Bill No. {item.details.split('_')[2].trim()}
+              </Text>
+            ) : null}
+
+            <View style={styles.userRow}>
+              <View style={styles.stockTag}>
+                <Text
+                  style={[
+                    styles.stockText,
+                    { color: Number(item?.currentStock) < 0 ? 'red' : 'green' },
+                  ]}
+                >
+                  Stock: {Math.abs(Number(item?.currentStock))}
+                </Text>
+              </View>
+              {
+                clientName &&
+                <View
+                  style={[
+                    styles._categoryChip,
+                    {
+                      backgroundColor: COLORS.whiteColor,
+                      borderColor: COLORS.primaryColor,
+                      flexDirection: 'row',
+                      gap: 5,
+                      paddingHorizontal: 5,
+                    },
+                  ]}
+                >
+                  <Ionicons
+                    name={'person-circle-outline'}
+                    color={COLORS.primaryColor}
+                    size={16}
+                  />
+                  <Text style={[styles._chipText, { color: COLORS.primaryColor }]}>
+                    {clientName}
+                  </Text>
+                </View>
+              }
+
+              {item?.bill && (
+                <View
+                  style={[
+                    styles.stockTag,
+                    { backgroundColor: COLORS.lightGrey, paddingHorizontal: 5 },
+                  ]}
+                >
+                  <Text style={[styles.stockText, { color: COLORS.blackColor }]}>
+                    Invoice
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
+
+          {/* --- Middle: IN Section --- */}
+          <View
+            style={[
+              styles.inSection,
+              {
+                backgroundColor: COLORS.lightGreenColor,
+              }, // light green
+            ]}
+          >
+            <Text style={[styles.valueText, { color: COLORS.greenColor }]}>
+              {Number(item?.stockIN) > 0 ? String(item?.stockIN) : ''}
+            </Text>
+          </View>
+
+          {/* --- Right: OUT Section --- */}
+          <View
+            style={[
+              styles.outSection,
+              { backgroundColor: '#FDEAEA' }, // light red
+            ]}
+          >
+            <Text style={[styles.valueText, { color: COLORS.redColor }]}>
+              {Number(item?.stockOUT) > 0 ? String(item?.stockOUT) : ''}
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Search Bar — only show if there is data */}
+      {updatedEntries && updatedEntries.length > 0 ? (
+        <View style={styles.searchBar}>
+          <SearchBar />
+        </View>
+      ) : (
+        // Optional: show an empty message instead
+        <View style={{ alignItems: 'center', marginTop: 20 }}>
+          <Text style={{ color: COLORS.grayColor, fontSize: 14 }}></Text>
+        </View>
+      )}
+
+      {/* Entries Label */}
+      {updatedEntries && updatedEntries.length > 0 && (
+        <View style={styles.entriesRow}>
+          <Text style={styles.entriesText}>Entries</Text>
+          <View style={{ flexDirection: 'row', gap: 70 }}>
+            <Text style={styles.entriesText}>In</Text>
+            <Text style={styles.entriesText}>Out</Text>
+          </View>
+        </View>
+      )}
+
+      {/* FlatList */}
+      <FlatList
+        data={updatedEntries.reverse()}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={renderItem}
+        contentContainerStyle={{ paddingBottom: 200, flexGrow: 1 }}
+        showsVerticalScrollIndicator={false}
+        ListEmptyComponent={() => (
+          <View
+            style={{
+              flex: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+              paddingVertical: 50,
+            }}
+          >
+            <Text style={{ color: COLORS.grayColor, fontSize: 15 }}>
+              No records available
+            </Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
+
+export default StockDetailChild;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.whiteColor,
+    // padding: 20,
+    width: '100%',
+  },
+  searchBar: {
+    // flexDirection: 'row',
+    // alignItems: 'center',
+    // backgroundColor: '#f5f5f5',
+    // borderRadius: 10,
+    // paddingHorizontal: 12,
+    // paddingVertical: 8,
+    padding: 10,
+    marginBottom: 10,
+  },
+  searchInput: {
+    flex: 1,
+    marginLeft: 8,
+    fontSize: 14,
+    color: '#333',
+  },
+  entriesRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 6,
+    padding: 10,
+    borderBottomWidth: 1,
+    borderColor: '#ddd',
+    // marginBottom: 10,
+  },
+  entriesText: {
+    color: COLORS.gray,
+    fontFamily: FONT_NORMAL,
+    fontSize: 11,
+  },
+  card: {
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: 8,
+    // padding: 12,
+    // marginBottom: 12,
+    // borderWidth: 0.5,
+    borderBottomColor: COLORS.borderColor,
+    borderBottomWidth: 1,
+    padding: 10,
+  },
+  date: {
+    fontSize: 12,
+    color: '#999',
+    marginBottom: 4,
+  },
+  name: {
+    fontSize: 14,
+    fontFamily: FONT_MEDIUM,
+  },
+  bill: {
+    fontSize: 13,
+    fontFamily: FONT_MEDIUM,
+    marginTop: 2,
+  },
+  userRow: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: 6,
+    justifyContent: 'flex-start',
+    alignSelf: 'flex-start',
+    gap: 8,
+  },
+  userTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: COLORS.primaryColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+  },
+  userText: {
+    marginLeft: 4,
+    fontSize: 12,
+    fontFamily: FONT_NORMAL,
+    color: COLORS.primaryColor,
+  },
+  stockTag: {
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    // paddingHorizontal: 6,
+    paddingVertical: 2,
+  },
+  stockText: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+
+    fontSize: 12,
+  },
+  valueContainer: {
+    position: 'absolute',
+    right: 16,
+    top: '50%',
+    // width:"50%",
+    // transform: [{ translateY: -10 }],
+    // backgroundColor:"red",
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    gap: 50,
+  },
+  valueText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+
+  //// new styling
+
+  card: {
+    backgroundColor: COLORS.whiteColor,
+    borderBottomColor: COLORS.borderColor,
+    borderBottomWidth: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+    // marginVertical: 4,
+  },
+
+  cardRow: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+
+  // --- Left Section (Entries)
+  entrySection: {
+    flex: 2,
+    backgroundColor: COLORS.whiteColor,
+    padding: 10,
+    justifyContent: 'center',
+  },
+
+  // --- Middle (IN)
+  inSection: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.whiteColor,
+    // borderLeftWidth: 1,
+    // borderColor: COLORS.borderColor,
+  },
+
+  // --- Right (OUT)
+  outSection: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.whiteColor,
+    // borderLeftWidth: 1,
+    // borderColor: COLORS.borderColor,
+  },
+
+  date: {
+    fontSize: 12,
+    color: '#999',
+    marginBottom: 4,
+  },
+  name: {
+    fontSize: 14,
+    fontFamily: FONT_MEDIUM,
+  },
+  bill: {
+    fontSize: 13,
+    fontFamily: FONT_MEDIUM,
+    marginTop: 2,
+  },
+  userRow: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    marginTop: 6,
+    gap: 8,
+  },
+  stockTag: {
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingVertical: 2,
+  },
+  stockText: {
+    fontFamily: FONT_NORMAL,
+    fontSize: 12,
+  },
+  valueText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  _categoryChip: {
+    backgroundColor: COLORS.lightGrey,
+    paddingHorizontal: 12,
+    // height: 20,
+    // flexDirection: "row",
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 100,
+    borderColor: COLORS.lightGrey,
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+    marginTop: 5,
+    // width:"20%"
+    // gap: 5,
+  },
+  _chipText: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 11,
+  },
+});