84 lines
4.2 KiB
JavaScript
84 lines
4.2 KiB
JavaScript
import React, { useCallback, useState } from 'react';
|
|
import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl, SafeAreaView } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useNavigation, useFocusEffect } from '@react-navigation/native';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import apiService from '../../services/apiService';
|
|
import { COLORS } from '../../constants/colors';
|
|
import { useBaseEnums } from '../../contexts/BaseEnumsContext';
|
|
|
|
const CARD_BG = '#F1F9F1';
|
|
const CIRCLE_BG = '#A2E4A4';
|
|
|
|
const CardOrdersScreen = () => {
|
|
const navigation = useNavigation();
|
|
const [orders,setOrders] = useState([]);
|
|
const [loading,setLoading]=useState(true);
|
|
const [refreshing,setRefreshing]=useState(false);
|
|
const { getLabel } = useBaseEnums();
|
|
|
|
const fetchData = async()=>{
|
|
try{
|
|
const res = await apiService.getCardOrders();
|
|
if(res.success) setOrders(Array.isArray(res.data)?res.data:[]);
|
|
else console.warn(res.error);
|
|
}catch(e){ console.warn(e.message);} finally {setLoading(false); setRefreshing(false);} };
|
|
|
|
useFocusEffect(useCallback(()=>{ fetchData(); },[]));
|
|
|
|
const onRefresh = ()=>{ setRefreshing(true); fetchData(); };
|
|
|
|
const handlePress = (item)=>{ navigation.navigate('CardOrderDetails',{orderId:item.id}); };
|
|
|
|
const renderItem=({item})=>{
|
|
const created = item.created_at? new Date(item.created_at).toLocaleDateString():'';
|
|
return (
|
|
<TouchableOpacity style={styles.card} onPress={()=>handlePress(item)}>
|
|
<View style={styles.circle}><Text style={styles.circleText}>{item.id}</Text></View>
|
|
<View style={styles.content}>
|
|
<Text style={styles.titleText}>{item.unique_id}</Text>
|
|
<Text style={styles.line}>Kart görnüşi: {getLabel('card_types',item.card_type_id)}</Text>
|
|
<Text style={styles.line}>Tölenildi: {item.paid? 'Hawa':'Ýok'}</Text>
|
|
<Text style={styles.status}>{item.status}</Text>
|
|
<Text style={styles.date}>{created}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
); };
|
|
|
|
if(loading) return <View style={styles.center}><ActivityIndicator size="large" color={COLORS.primary}/></View>;
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<StatusBar style="dark" />
|
|
<View style={styles.header}>
|
|
<TouchableOpacity onPress={()=>navigation.goBack()} style={{paddingRight:12}}>
|
|
<Ionicons name="arrow-back" size={24} color={COLORS.textPrimary}/>
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerTitle}>Täze kart sargytlary</Text>
|
|
</View>
|
|
<FlatList data={orders} keyExtractor={i=>i.id.toString()} renderItem={renderItem} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh}/>} contentContainerStyle={orders.length===0 && styles.empty} ListEmptyComponent={<Text style={styles.emptyText}>Sargyt ýok</Text>} />
|
|
<TouchableOpacity style={styles.fab} onPress={()=>navigation.navigate('CreateCardOrder')}>
|
|
<Ionicons name="add" size={28} color={COLORS.white}/>
|
|
</TouchableOpacity>
|
|
</SafeAreaView>
|
|
); };
|
|
|
|
const styles = StyleSheet.create({
|
|
container:{flex:1,backgroundColor:COLORS.backgroundSecondary},
|
|
header:{flexDirection:'row',alignItems:'center',paddingHorizontal:24,paddingVertical:16},
|
|
headerTitle:{fontSize:20,fontWeight:'bold',color:COLORS.textPrimary},
|
|
center:{flex:1,justifyContent:'center',alignItems:'center'},
|
|
card:{flexDirection:'row',backgroundColor:CARD_BG,marginHorizontal:24,marginTop:16,borderRadius:12,padding:16},
|
|
circle:{width:40,height:40,borderRadius:20,backgroundColor:CIRCLE_BG,alignItems:'center',justifyContent:'center',marginRight:16},
|
|
circleText:{color:COLORS.white,fontWeight:'600'},
|
|
content:{flex:1},
|
|
titleText:{fontWeight:'700',color:COLORS.textPrimary},
|
|
line:{fontSize:12,color:COLORS.textSecondary},
|
|
status:{fontSize:13,fontWeight:'600',marginTop:2},
|
|
date:{fontSize:11,color:COLORS.textSecondary},
|
|
fab:{position:'absolute',bottom:32,right:32,width:56,height:56,borderRadius:28,backgroundColor:COLORS.primary,alignItems:'center',justifyContent:'center',elevation:4},
|
|
empty:{flex:1,justifyContent:'center',alignItems:'center'},
|
|
emptyText:{color:COLORS.textSecondary,fontSize:16},
|
|
});
|
|
|
|
export default CardOrdersScreen;
|