169 lines
8.4 KiB
JavaScript
169 lines
8.4 KiB
JavaScript
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;
|