card requisite done
This commit is contained in:
169
src/screens/Card/CardRequisiteOrderDetailsScreen.js
Normal file
169
src/screens/Card/CardRequisiteOrderDetailsScreen.js
Normal file
@@ -0,0 +1,169 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView, Image } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useNavigation, useRoute } from '@react-navigation/native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import apiService from '../../services/apiService';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
import { Linking } from 'react-native';
|
||||
import { useBaseEnums } from '../../contexts/BaseEnumsContext';
|
||||
|
||||
const DetailRow = ({ label, value, showBorder=true }) => (
|
||||
<View style={[styles.detailRow, showBorder && styles.detailRowBorder]}>
|
||||
<Text style={styles.detailKey}>{label}</Text>
|
||||
<Text style={styles.detailValue}>{String(value)}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const CardRequisiteOrderDetailsScreen = () => {
|
||||
const navigation = useNavigation();
|
||||
const { params } = useRoute();
|
||||
const orderId = params?.orderId;
|
||||
|
||||
const { getLabel, getBranches } = useBaseEnums();
|
||||
|
||||
const [loading,setLoading]=useState(true);
|
||||
const [order,setOrder]=useState(null);
|
||||
const [downloading,setDownloading]=useState(false);
|
||||
const [branchName,setBranchName]=useState('');
|
||||
|
||||
const fetchDetails=async()=>{
|
||||
setLoading(true);
|
||||
const res = await apiService.getCardRequisiteOrder(orderId);
|
||||
if(res.success){
|
||||
setOrder(res.data);
|
||||
// try to resolve branch name if region & branch_id exist
|
||||
if(res.data?.region && res.data?.branch_id){
|
||||
(async()=>{
|
||||
try{
|
||||
const brs = await getBranches(res.data.region);
|
||||
const found = brs.find(b=>String(b.id)===String(res.data.branch_id));
|
||||
if(found) setBranchName(found.name);
|
||||
}catch(e){ /* silent */ }
|
||||
})();
|
||||
}
|
||||
} else { Alert.alert('Error',res.error||'Failed'); }
|
||||
setLoading(false);
|
||||
};
|
||||
useEffect(()=>{fetchDetails();},[]);
|
||||
|
||||
const handleDownload=async()=>{
|
||||
setDownloading(true);
|
||||
const res = await apiService.downloadCardRequisites(orderId);
|
||||
setDownloading(false);
|
||||
if(res.success && res.data?.url){ Linking.openURL(res.data.url); } else { Alert.alert('Ýalňyşlyk', res.error || 'Ýüklenip bilinmedi'); }
|
||||
};
|
||||
|
||||
const handleDelete=()=>{ Alert.alert('Tassykla','Pozmakçy my?',[{text:'Goýbolsun',style:'cancel'},{text:'Poz',style:'destructive',onPress:async()=>{
|
||||
const r=await apiService.deleteCardRequisiteOrder(orderId);
|
||||
if(r.success){ Alert.alert('Pozuldy',r.message||'Pozuldy',[{text:'OK',onPress:()=>navigation.goBack()}]); } else {Alert.alert('Ýalňyşlyk',r.error||'Ýalňyşlyk');}
|
||||
}}]); };
|
||||
|
||||
if(loading){return <View style={styles.centered}><ActivityIndicator size="large" color={COLORS.primary}/></View>;}
|
||||
if(!order){return <View style={styles.centered}><Text>Maglumat ýok</Text></View>;}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
<TouchableOpacity style={styles.backBtn} onPress={()=>navigation.goBack()}>
|
||||
<Ionicons name="close" size={28} color={COLORS.textPrimary}/>
|
||||
</TouchableOpacity>
|
||||
|
||||
<ScrollView contentContainerStyle={{paddingBottom:120,paddingHorizontal:24}}>
|
||||
<Text style={styles.title}>Kart rekwizitler</Text>
|
||||
|
||||
{/* Card info */}
|
||||
<View style={styles.detailCard}>
|
||||
<DetailRow label="ID" value={order.id}/>
|
||||
{order.card_type_id && <DetailRow label="Görnüşi" value={getLabel('card_types', order.card_type_id)} />}
|
||||
{order.card_name && <DetailRow label="Kartdaky ady" value={order.card_name} />}
|
||||
{order.card_number && <DetailRow label="Kart belgisi" value={order.card_number} />}
|
||||
{order.card_month && order.card_year && <DetailRow label="Möhleti" value={`${order.card_month}/${order.card_year}`} showBorder={false} />}
|
||||
</View>
|
||||
|
||||
{/* Location */}
|
||||
{(order.region || branchName) && (
|
||||
<>
|
||||
<Text style={styles.sectionTitle}>Lokasiýa</Text>
|
||||
<View style={styles.detailCard}>
|
||||
{order.region && <DetailRow label="Welaýat" value={getLabel('regions', order.region)} />}
|
||||
{(branchName || order.branch_id) && <DetailRow label="Şahamça" value={branchName || order.branch_id} showBorder={false} />}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Personal info */}
|
||||
<Text style={styles.sectionTitle}>Şahsy maglumatlar</Text>
|
||||
<View style={styles.detailCard}>
|
||||
{order.customer_name && <DetailRow label="Ady" value={order.customer_name} />}
|
||||
{order.customer_surname && <DetailRow label="Familiýasy" value={order.customer_surname} />}
|
||||
{order.customer_patronic_name && <DetailRow label="Atasynyň ady" value={order.customer_patronic_name} />}
|
||||
{order.born_at && <DetailRow label="Doglan güni" value={order.born_at} />}
|
||||
{order.phone && <DetailRow label="Telefon" value={`+993 ${order.phone}`} showBorder={false} />}
|
||||
</View>
|
||||
|
||||
{/* Passport */}
|
||||
<Text style={styles.sectionTitle}>Pasport</Text>
|
||||
<View style={styles.detailCard}>
|
||||
{(order.passport_serie || order.passport_id) && <DetailRow label="Seriýa/Belgi" value={`${order.passport_serie || ''} ${order.passport_id || ''}`.trim()} showBorder={false}/>}
|
||||
|
||||
{/* Image thumbnails */}
|
||||
<View style={styles.imageGrid}>
|
||||
{order.passport_one && (
|
||||
<TouchableOpacity onPress={()=>Linking.openURL(order.passport_one)} style={styles.imageWrapper}>
|
||||
<Image source={{ uri: order.passport_one }} style={styles.passportImage} resizeMode="cover" />
|
||||
<Text style={styles.imageLabel}>1-nji sah.</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{order.passport_two && (
|
||||
<TouchableOpacity onPress={()=>Linking.openURL(order.passport_two)} style={styles.imageWrapper}>
|
||||
<Image source={{ uri: order.passport_two }} style={styles.passportImage} resizeMode="cover" />
|
||||
<Text style={styles.imageLabel}>2-3 sah.</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{order.passport_three && (
|
||||
<TouchableOpacity onPress={()=>Linking.openURL(order.passport_three)} style={styles.imageWrapper}>
|
||||
<Image source={{ uri: order.passport_three }} style={styles.passportImage} resizeMode="cover" />
|
||||
<Text style={styles.imageLabel}>8-9 sah.</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{order.passport_four && (
|
||||
<TouchableOpacity onPress={()=>Linking.openURL(order.passport_four)} style={styles.imageWrapper}>
|
||||
<Image source={{ uri: order.passport_four }} style={styles.passportImage} resizeMode="cover" />
|
||||
<Text style={styles.imageLabel}>32 sah.</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Actions */}
|
||||
<TouchableOpacity style={styles.deleteBtn} onPress={handleDelete}>
|
||||
<Text style={styles.deleteText}>Poz</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container:{flex:1,backgroundColor:COLORS.backgroundSecondary,paddingTop:40},
|
||||
centered:{flex:1,justifyContent:'center',alignItems:'center'},
|
||||
backBtn:{alignSelf:'flex-end',marginRight:24,marginBottom:16},
|
||||
title:{fontSize:24,fontWeight:'bold',color:COLORS.textPrimary,marginBottom:24},
|
||||
detailCard:{backgroundColor:COLORS.white,borderRadius:12,padding:20,marginBottom:32},
|
||||
detailRow:{flexDirection:'row',justifyContent:'space-between',paddingVertical:12},
|
||||
detailRowBorder:{borderBottomWidth:1,borderBottomColor:COLORS.border},
|
||||
detailKey:{fontWeight:'600',color:COLORS.textSecondary},
|
||||
detailValue:{color:COLORS.textPrimary},
|
||||
sectionTitle:{fontWeight:'700',fontSize:18,marginTop:24,marginBottom:12,color:COLORS.textPrimary},
|
||||
actionBtn:{backgroundColor:COLORS.primary,paddingVertical:16,borderRadius:8,alignItems:'center',marginBottom:16},
|
||||
actionText:{color:COLORS.white,fontSize:16,fontWeight:'600'},
|
||||
deleteBtn:{backgroundColor:COLORS.error,paddingVertical:16,borderRadius:8,alignItems:'center'},
|
||||
deleteText:{color:COLORS.white,fontSize:16,fontWeight:'600'},
|
||||
imageGrid:{flexDirection:'row',flexWrap:'wrap',justifyContent:'space-between',marginTop:12},
|
||||
imageWrapper:{width:'48%',marginBottom:16},
|
||||
passportImage:{width:'100%',aspectRatio:4/3,borderRadius:8,backgroundColor:COLORS.gray?COLORS.gray[200]:"#f0f0f0"},
|
||||
imageLabel:{marginTop:4,fontSize:12,color:COLORS.textSecondary,textAlign:'center'},
|
||||
});
|
||||
|
||||
export default CardRequisiteOrderDetailsScreen;
|
||||
Reference in New Issue
Block a user