439 lines
21 KiB
TypeScript
439 lines
21 KiB
TypeScript
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
|
import { ScrollView, View, Text, Image, TouchableOpacity, BackHandler, Dimensions, ImageBackground } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import config from '../../components/data/config.json'
|
|
import { styles } from '@/components/style/style';
|
|
import { useNavigation, NavigationProp, useFocusEffect } from '@react-navigation/native';
|
|
import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import { cfg, getStorage } from '@/components/lib/cfg';
|
|
import { DB } from '@/components/lib/db';
|
|
import DetailOrder from '@/components/pageComponent/detailOrder';
|
|
import debounce from 'lodash.debounce';
|
|
|
|
const formatNumber = function (number: any) {
|
|
return number.toLocaleString('id-ID', {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
});
|
|
}
|
|
|
|
|
|
function formatDate(dateString: any) {
|
|
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
|
|
// Parse the date string
|
|
const date = new Date(dateString);
|
|
|
|
// Extract year, month, and date
|
|
const year = date.getFullYear();
|
|
const month = months[date.getMonth()];
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
// Format the date string
|
|
const formattedDate = `${day} ${month} ${year}`;
|
|
|
|
// Return the object with the desired structure
|
|
return {
|
|
bulan: month,
|
|
tanggal: day,
|
|
tahun: year,
|
|
date: formattedDate
|
|
};
|
|
}
|
|
const Contact = ({ data: mapOfData, setDataOrder, setDataOrderList, setShowDetail }: any) => {
|
|
return (
|
|
<>
|
|
{(Array.isArray(mapOfData)?mapOfData:[]).map((data: any, key: number) =>
|
|
<TouchableOpacity key={key} onPress={() => {
|
|
DB(`
|
|
SELECT
|
|
s.name
|
|
, s.product_uom_qty as qty
|
|
, s.price_unit
|
|
, s.price_tax
|
|
, s.price_total
|
|
, s.price_subtotal
|
|
, s.product_uom
|
|
, u.name->>'en_US' satuan
|
|
FROM sale_order_line s
|
|
LEFT JOIN uom_uom u ON s.product_uom = u.id
|
|
WHERE s.order_id = ${data?.id}
|
|
`).then(function (list) {
|
|
setDataOrder(data);
|
|
setDataOrderList(list);
|
|
setShowDetail(true)
|
|
})
|
|
}}>
|
|
<View style={{
|
|
paddingLeft: 10,
|
|
backgroundColor: config.color.textbiru,
|
|
marginBottom: 10,
|
|
overflow: 'hidden',
|
|
borderRadius: 5
|
|
}}>
|
|
<View style={[
|
|
{ padding: 10, backgroundColor: 'white' }
|
|
, { flexDirection: "row", alignItems: "center" }
|
|
]}>
|
|
<View style={[{ flexDirection: "row" }, { flex: 1 }]}>
|
|
<View style={{ width: 38 }}>
|
|
<Text style={{
|
|
fontSize: 14
|
|
, textAlign: 'center'
|
|
, fontWeight: 'bold'
|
|
}}>{formatDate(data?.date_order).bulan}</Text>
|
|
<Text style={{
|
|
fontSize: 24
|
|
, textAlign: 'center'
|
|
, fontWeight: '900'
|
|
}}>{formatDate(data?.date_order).tanggal}</Text>
|
|
<Text style={{
|
|
fontSize: 14
|
|
, textAlign: 'center'
|
|
, fontWeight: 'bold'
|
|
}}>{formatDate(data?.date_order).tahun}</Text>
|
|
</View>
|
|
<View style={{ paddingHorizontal: 10, flexDirection: 'column' }}>
|
|
<Text ellipsizeMode='tail' style={[{
|
|
flex: 1
|
|
, fontWeight: '700'
|
|
, fontSize: 16
|
|
}]}>
|
|
Order : {data?.name}
|
|
</Text>
|
|
<Text ellipsizeMode='tail' style={[{
|
|
flex: 1
|
|
, fontWeight: '700'
|
|
, fontSize: 18
|
|
}]}>
|
|
{data?.cus.toUpperCase()}
|
|
</Text>
|
|
<Text ellipsizeMode='tail' style={[{
|
|
flex: 1,
|
|
color: 'red',
|
|
fontWeight: 'bold'
|
|
, fontSize: 18
|
|
}]}>
|
|
Rp {formatNumber(Number(data?.amount_total))}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{ width: 120, flexDirection: 'column' }}>
|
|
<View style={{ height: '100%', flex: 1 }}>
|
|
<Text style={{ textAlign: 'right', fontSize: 12, fontWeight: '800' }}>Created Date</Text>
|
|
<Text style={{ textAlign: 'right', fontSize: 14, fontWeight: '800' }}>{formatDate(data?.write_date).date}</Text>
|
|
<Text style={{ color: 'red', marginTop: 10, textAlign: 'right', fontSize: 18, fontWeight: '800' }}>{`Not Paid Yet`}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const HistorySreen = () => {
|
|
const [bgHead, setBgHead] = useState<any>(null)
|
|
const [nama, setNama] = useState('John Doe');
|
|
const [Id, setId] = useState('John Doe');
|
|
const [formTitle, setFormTitle] = useState('Perusahaan');
|
|
const [formArea, setFormArea] = useState('none');
|
|
const [email, setEmail] = useState('example@mail.com');
|
|
const [inputVal, setInputVal] = useState('');
|
|
const [formName, setFormName] = useState('');
|
|
const [datatext, setDataText] = useState('example@mail.com');
|
|
const inputRef = useRef<TextInput>(null); // Create a ref for the TextInput
|
|
let heightWIndow = Dimensions.get('window').height + 80;
|
|
const [contact, setContact] = useState<any>([]);
|
|
const [salesTotal, setSalesTotal]=useState(0);
|
|
const [showDetail, setShowDetail]=useState(false);
|
|
const [dataOrder, setDataOrder] = useState<any>({})
|
|
const [dataOrderList, setDataOrderList] = useState<any>([])
|
|
const [produk, setProduk] = useState<{
|
|
name: string
|
|
, value: string
|
|
}[]>([]);
|
|
|
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
|
|
|
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
|
|
const onBackPress = () => {
|
|
if(showDetail === true){
|
|
setShowDetail(false)
|
|
}else{
|
|
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, showDetail, setShowDetail])
|
|
);
|
|
const [pagin, setPagin] = useState(0);
|
|
const [search, setSearch] = useState('');
|
|
const callData = async (pagin=0) => {
|
|
let sales: any = await DB(`
|
|
SELECT
|
|
sa.write_date,
|
|
sa.date_order,
|
|
sa.name,
|
|
sa.access_token as token,
|
|
sa.partner_id,
|
|
rp.name as cus,
|
|
sa.id,
|
|
rp.email,
|
|
rp.street,
|
|
sa.amount_total,
|
|
sa.amount_tax,
|
|
sa.amount_untaxed,
|
|
sa.amount_to_invoice
|
|
FROM sale_order sa
|
|
LEFT JOIN res_partner rp ON sa.partner_id = rp.id
|
|
WHERE lower(rp.name) LIKE '%${search}%'
|
|
ORDER BY sa.name DESC LIMIT 10 OFFSET ${pagin}
|
|
`);
|
|
let salesTotalNumber: any = await DB(`
|
|
SELECT
|
|
count(*) as total
|
|
FROM sale_order sa
|
|
`);
|
|
setSalesTotal(salesTotalNumber.length > 0 ? Number(salesTotalNumber[0].total):0)
|
|
console.log(pagin)
|
|
if(pagin == 0){
|
|
setContact(sales);
|
|
}else{
|
|
setContact(contact.concat(sales) );
|
|
}
|
|
};
|
|
|
|
cfg.action['history'] = () => {
|
|
setPagin(0);
|
|
setSearch('')
|
|
callData(pagin)
|
|
}
|
|
|
|
useEffect(() => {
|
|
(async function () {
|
|
callData()
|
|
let data: any = await AsyncStorage.getItem('login');
|
|
data = JSON.parse(data);
|
|
data = data.length > 0 ? data[0] : {};
|
|
setId(data?.id)
|
|
setNama(data?.name)
|
|
setEmail("Salesman")
|
|
let country = 'Indonesia';
|
|
if (data?.country_id) {
|
|
const negara: any = await getStorage('negara')
|
|
const [{ name }] = negara.filter((s: any) => s?.id == data?.country_id);
|
|
country = name;
|
|
}
|
|
})();
|
|
}, [])
|
|
|
|
const customerBack = function () {
|
|
navigation.navigate('home')
|
|
}
|
|
|
|
const onScroll = (event: any) => {
|
|
const yOffset = event.nativeEvent.contentOffset.y;
|
|
if (yOffset > 190) {
|
|
setBgHead(config.color.primary)
|
|
} else {
|
|
setBgHead(null)
|
|
}
|
|
};
|
|
|
|
const debouncedFetchData = useCallback(debounce((query) => {
|
|
callData();
|
|
}, 300), [callData]);
|
|
|
|
const handleInputChange = (text:string) => {
|
|
setSearch(text);
|
|
setPagin(0)
|
|
debouncedFetchData(text); // Mengambil data setelah 500ms tidak mengetik
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{
|
|
showDetail === true?
|
|
<DetailOrder order={dataOrder} orderlist={dataOrderList} config={config} act={setShowDetail} />
|
|
:<>
|
|
<GestureHandlerRootView>
|
|
<ScrollView onScroll={onScroll}>
|
|
<View style={[{
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
backgroundColor: bgHead != '' ? bgHead : 'none',
|
|
padding: 10,
|
|
zIndex: 3, // Make sure it stays on top of other content
|
|
}, styles.flexStartBottom, { width: '100%', height: 80, justifyContent: 'flex-start', position: 'absolute', top: 0 }]}>
|
|
<TouchableOpacity onPress={customerBack}>
|
|
<Ionicons style={{ padding: 8, marginHorizontal: 8, borderRadius: 30, backgroundColor: "rgba(0,0,0,.2)" }} name='arrow-back-outline' size={20} color={'white'}></Ionicons>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.container}>
|
|
<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: 70, width: "100%" }, styles.header]}>
|
|
<Image
|
|
source={{ uri: 'https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg' }}
|
|
style={[styles.profilePic]}
|
|
/>
|
|
<Text style={[styles.name, { fontSize: 24, color: "white" }]}>{nama.toLocaleUpperCase()}</Text>
|
|
<Text style={[styles.jobTitle, { fontSize: 16, color: "white" }]}>{email}</Text>
|
|
</View>
|
|
</ImageBackground>
|
|
<View style={{position:"static", top:-80}}>
|
|
<View style={{ paddingHorizontal: 20, paddingVertical: 10 }}>
|
|
<View style={{
|
|
backgroundColor : "orange"
|
|
, padding : 10
|
|
, paddingVertical : 20
|
|
, borderRadius : 15
|
|
, flexDirection : 'row'
|
|
}}>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{
|
|
fontSize : 12
|
|
, color : '#000'
|
|
, fontWeight : '600'
|
|
, textAlign : 'center'
|
|
}}>{`Total\nAll Orders`.toUpperCase()}</Text>
|
|
<Text style={{
|
|
fontSize : 28
|
|
, color : '#000'
|
|
, fontWeight : 'bold'
|
|
, textAlign : 'center'
|
|
}}>{salesTotal}</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{
|
|
fontSize: 12
|
|
, color: '#000'
|
|
, fontWeight: '600'
|
|
, textAlign: 'center'
|
|
}}>{`Total\nCash Order`.toUpperCase()}</Text>
|
|
<Text style={{
|
|
fontSize: 28
|
|
, color: '#000'
|
|
, fontWeight: 'bold'
|
|
, textAlign: 'center'
|
|
}}>0</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{
|
|
fontSize: 12
|
|
, color: '#000'
|
|
, fontWeight: '600'
|
|
, textAlign: 'center'
|
|
}}>{`Total\nCredit Order`.toUpperCase()}</Text>
|
|
<View style={{
|
|
flexDirection: 'row'
|
|
, justifyContent: 'center'
|
|
}}>
|
|
<View>
|
|
<Text style={{
|
|
fontSize: 28
|
|
, color: '#000'
|
|
, fontWeight: 'bold'
|
|
, textAlign: 'center'
|
|
}} >1</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{
|
|
fontSize: 12
|
|
, color: '#000'
|
|
, fontWeight: 'bold'
|
|
, textAlign: 'center'
|
|
}}>st</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{marginVertical:10, flexDirection:"row", paddingHorizontal:20}}>
|
|
<TextInput
|
|
value={search}
|
|
onChangeText={handleInputChange} style={{
|
|
flex:1,
|
|
backgroundColor:"white",
|
|
height:40,
|
|
paddingHorizontal: 10,
|
|
borderColor: config.color.primary,
|
|
borderWidth:1,
|
|
borderRadius: 10
|
|
}} placeholder={`search`}></TextInput>
|
|
<View style={{
|
|
width:50
|
|
, height: 40
|
|
, marginLeft:10
|
|
, flexDirection: "row"
|
|
, justifyContent:"center"
|
|
, alignItems:"center"
|
|
, backgroundColor: config.color.primary
|
|
, borderRadius: 10
|
|
}}>
|
|
<Ionicons name="search" size={20} color="white" />
|
|
</View>
|
|
</View>
|
|
<View style={[{ paddingHorizontal: 20, paddingVertical: 5 }]}>
|
|
<Text style={{fontSize:24, textAlign:'center', fontWeight:'600'}}>Order List</Text>
|
|
</View>
|
|
<View style={[{ paddingHorizontal: 20, paddingVertical: 5 }]}>
|
|
<Contact setShowDetail={setShowDetail} setDataOrderList={setDataOrderList} setDataOrder={setDataOrder} data={contact}></Contact>
|
|
</View>
|
|
<View>
|
|
<View style={{
|
|
flexDirection:"row",
|
|
justifyContent:"center",
|
|
alignItems:"center"
|
|
}}>
|
|
<TouchableOpacity onPress={()=>{
|
|
let p = pagin+10;
|
|
setPagin( p )
|
|
callData(p)
|
|
}}>
|
|
<View style={{
|
|
paddingHorizontal: 20
|
|
, paddingVertical: 10
|
|
, backgroundColor:config.color.textbiru
|
|
, borderColor:"#ddd"
|
|
, borderRadius: 20
|
|
, width: 200
|
|
}}>
|
|
<Text style={{color:"white", textAlign:"center", fontSize:20, fontWeight:"600"}}>Show More</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</GestureHandlerRootView>
|
|
</>
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
|
|
|
|
export default HistorySreen; |