sort/app/(tabs)/stock.tsx

import React, { useState } from 'react';
import { View, Text, TextInput, FlatList, Image, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
import { useNavigation, NavigationProp, useFocusEffect } from '@react-navigation/native';
import { BackHandler } from 'react-native';

const StockScreen = () => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        navigation.navigate('home')
        return true; // Prevent default behavior (exit app)
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);
      navigation.setOptions({ headerLeft: () => null }); // Remove back button

      return () => {
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
      };
    }, [navigation])
  );
  const [searchQuery, setSearchQuery] = useState('');
  const [products, setProducts] = useState([
    { id: 1, name: "A1-F12", sku: "-", price: 15500, qoh: 122, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 2, name: "A1-K12", sku: "-", price: 7300, qoh: 60, backgroundColor: "#bbf7d0", titleColor: "#22c55e" },
    { id: 3, name: "A1-F16", sku: "-", price: 20900, qoh: 180, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 4, name: "TP-F12", sku: "-", price: 15500, qoh: 7, backgroundColor: "#fef9c3", titleColor: "#eab308" },
    { id: 5, name: "TP-F16", sku: "-", price: 20900, qoh: 113, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 6, name: "A1-BOLD20", sku: "-", price: 25900, qoh: 136, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 7, name: "ASA K-12", sku: "-", price: 7300, qoh: 138, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 8, name: "NRTN - K12", sku: "-", price: 7300, qoh: 0, backgroundColor: "#fecaca", titleColor: "#dc2626" },
    { id: 9, name: "JRG - K12", sku: "-", price: 8700, qoh: 71, backgroundColor: "#bbf7d0", titleColor: "#22c55e" },
    { id: 10, name: "SGN - K16", sku: "-", price: 8900, qoh: 10, backgroundColor: "#fef9c3", titleColor: "#eab308" },
    { id: 11, name: "SGN - K16", sku: "-", price: 6800, qoh: 140, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 12, name: "NTN - K16", sku: "-", price: 9200, qoh: 151, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 13, name: "SHR F12", sku: "-", price: 13800, qoh: 46, backgroundColor: "#bbf7d0", titleColor: "#22c55e" },
    { id: 14, name: "SHR K12", sku: "-", price: 7800, qoh: 150, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" },
    { id: 15, name: "EVEREST", sku: "-", price: 25400, qoh: 156, backgroundColor: "#c7e3ff", titleColor: "#1e90ff" }
  ]);

  const renderStockCard = ({ item } : any) => (
    <>
      
      <View style={[styles.card, { backgroundColor: item.backgroundColor, borderTopWidth:4, borderTopColor: item.titleColor}]}>
        <Text style={[styles.cardTitle, { color: item.titleColor }]}>{item.name}</Text>
        <View style={styles.cardDates}>
          <Text style={styles.cardDate}>Rp {item.price}</Text>
          <View style={{alignItems:'flex-end'}}>
              <Text style={{color: item.titleColor, fontWeight: 'bold'}}>Saldo : {item.qoh}</Text>
          </View>
        </View>
      </View>
    </>
  );

  const searchFilter = (item : any) => {
    const query = searchQuery.toLowerCase();
    return item.name.toLowerCase().includes(query);
  };

  return (
    <>
      <View style={{
        overflow: "hidden",
        height: 120,
        flexDirection: "row",
        alignItems: "flex-end"
      }}>
        <ImageBackground
          source={require('../../assets/images/bg/SORT_bg_Order.png')}
          style={{
            flexDirection: "row"
            , alignItems: 'flex-end'
            , top: 0
            , height: 300
          }}
        >
          <View style={[{ paddingVertical: 20, paddingBottom: 30, width: "100%" }]}>
            <Text style={{
              textAlign: "center"
              , fontSize: 24
              , fontWeight: 'bold'
              , color: "white"
              , marginBottom: 5
            }}>{(`Saldo Stock`).toUpperCase()}</Text>
          </View>
        </ImageBackground>
      </View>
      <View style={styles.container}>
        <TextInput
          style={styles.searchInput}
          placeholder="Search..."
          value={searchQuery}
          onChangeText={setSearchQuery}
        />
        <FlatList 
          contentContainerStyle={styles.listContainer}
          data={products.filter(searchFilter)}
          renderItem={renderStockCard}
          keyExtractor={(item) => item.id.toString()}
          numColumns={0}
        />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  listContainer:{
    paddingHorizontal:5
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  searchInput: {
    height: 40,
    borderWidth: 2,
    borderRadius:5,
    borderColor:'#A9A9A9',
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  card: {
    flex:1,
    marginBottom: 20,
    padding: 10,
    borderRadius: 5,
    marginHorizontal:10,

    borderRadius: 8,
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 4,
  },
  cardTitle: {
    fontSize:18,
    fontWeight: 'bold',
    paddingVertical: 5,
  },
  cardDates: {
    flexDirection: 'row',
    paddingVertical: 5,
    justifyContent: 'space-between',
  },
  cardDate: {
    color: '#888',
  },
  cardContent: {
    justifyContent: 'space-between',
    paddingTop: 10,
  },
  attendeesContainer: {
    flexWrap:'wrap',
    flexDirection: 'row',
    paddingHorizontal: 10,
  },
  attendeeImage: {
    width: 30,
    height: 30,
    borderRadius: 20,
    marginLeft: -10,
    borderWidth:0.5,
    marginTop:3,
  },
  buttonsContainer: {
    flexDirection: 'row',
  },
  actionButton: {
    marginTop:15,
    backgroundColor: '#DCDCDC',
    padding:8,
    borderRadius: 5,
    borderWidth:1,
    borderColor:'#00008B',
    marginRight: 10,
  },
  buttonText: {
    color: '#00008B',
  },
});

export default StockScreen;