sort/app/(tabs)/stock.tsx

import React, { useEffect, 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';
import config from '../../components/data/config.json'
import { Ionicons } from '@expo/vector-icons';
import CustomPicker from '@/components/native/dropdown';
import { cfg } from '@/components/lib/cfg';
import { DB } from '@/components/lib/db';

const StockScreen = () => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const [selectedValue, setSelectedValue] = useState('')
  const [showFilter, setShowFilter] = useState(false)
  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 settingFormat = [
    { 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 warna = settingFormat.map((w) => w.backgroundColor);
  const warnatitle = settingFormat.map((w) => w.titleColor);

  const [products, setProducts] = useState([]);

  

  const renderStockCard = ({ item } : any) => (
    <>
      
      <View style={[styles.card, { backgroundColor: item.backgroundColor, borderLeftWidth:4, borderLeftColor: 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, fontSize:18, fontWeight: 'bold'}}>Saldo : {item.qoh}</Text>
          </View>
        </View>
      </View>
    </>
  );

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

  const callData = async () =>{
    let data:any = await DB(`SELECT 
      pt.id,
      ss.name,
      ss.masuk,
      ss.keluar,
      ss.sisa,
      pt.list_price price
    FROM sisa_stock ss
    LEFT JOIN product_template pt ON pt.name->>'en_US' =  ss.name
    ORDER BY pt.id ASC`);
    let databaru:[] = data.map((s:any,i:number)=>{
      return { 
        id: i
        , name: s?.name
        , sku: "-"
        , price: s?.price
        , qoh: s?.sisa
        , backgroundColor: warna[i] ? warna[i]:warna.pop()
        , titleColor: warnatitle[i] ? warnatitle[i] : warnatitle.pop() 
      }
    });
    setProducts(databaru);
  }

  useEffect(()=>{
    callData();
  },[callData]);

  cfg.action['stock'] = () => {
    callData()
  }

  const dataPilih = [
    { label: 'SISA STOCK', value: 1 },
    { label: 'STOCK KELUAR', value: 2 },
    { label: 'STOCK MASUK', value: 3 },
  ]

  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}>
        <View style={[{flexDirection:"row", paddingHorizontal:15,marginBottom:10}]}>
          <TouchableOpacity onPress={()=>{navigation.navigate('home')}}>
            <View style={[{ borderRadius: 8, paddingHorizontal: 8, paddingVertical: 5, backgroundColor: config.color.primary }]}>
              <Text style={{fontSize:16, color:"white"}}>Back</Text>
            </View>
          </TouchableOpacity>
        </View>
        <View style={[{
          marginHorizontal:15
          , flexDirection: 'row',
        }]}>
          <TextInput
            style={styles.searchInput}
            placeholder="Search..."
            value={searchQuery}
            onChangeText={setSearchQuery}
          />
          <TouchableOpacity onPress={()=>{
            setShowFilter(!showFilter);
          }}>
            <View style={[{height:40, width:40,marginLeft:10,borderRadius:5,backgroundColor:"gray", flexDirection:"row", alignItems:"center", justifyContent:"center"}]}>
              <Ionicons name="filter-outline" color={"white"} style={{fontSize:20}} />
            </View>
          </TouchableOpacity>
        </View>
        {showFilter? <>
        <View style={[{height:75, flexDirection:"row", marginHorizontal:15}]}>
          <View style={{flex:1, backgroundColor:"gray", height:60, padding:15, borderRadius:5}}>
            <CustomPicker
              options={dataPilih}
              selectedValue={selectedValue}
              onValueChange={setSelectedValue}
              label={`Pilih Type`}
            />
          </View>
          <TouchableOpacity>
            <View style={{
              flexDirection:"row"
              , justifyContent:"center"
              , alignItems: "center"
              , height: 60
              , width: 40
              , backgroundColor:"#eee"
              , borderRadius:10
              , marginHorizontal:5
            }}>
              <Ionicons name="chevron-up" style={{fontSize:30}} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={{
              flexDirection:"row"
              , justifyContent:"center"
              , alignItems: "center"
              , height: 60
              , width: 40
              , backgroundColor:"#eee"
              , borderRadius:10
              , marginHorizontal:5
            }}>
              <Ionicons name="chevron-down" style={{fontSize:30}} />
            </View>
          </TouchableOpacity>
        </View>
        </> :<></>}
        <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: {
    flex:1,
    height: 40,
    borderWidth: 2,
    borderRadius:5,
    borderColor:'#A9A9A9',
    marginBottom: 15,
    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',
    fontSize: 16,
    fontWeight:'medium'
  },
  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;