305 lines
9.8 KiB
TypeScript
305 lines
9.8 KiB
TypeScript
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; |