loan order details more beautiful
This commit is contained in:
@@ -6,14 +6,30 @@ import apiService from '../../services/apiService';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
|
||||
const formatDate = (dstr) => {
|
||||
if (!dstr) return '-';
|
||||
const d = new Date(dstr);
|
||||
return isNaN(d) ? dstr : d.toLocaleDateString('tk-TM');
|
||||
// Helper formatters
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '';
|
||||
const d = new Date(dateStr);
|
||||
if (isNaN(d)) return dateStr;
|
||||
return d.toLocaleDateString('tk-TM');
|
||||
};
|
||||
|
||||
const DetailRow = ({ label, value, last }) => (
|
||||
<View style={[styles.detailRow, !last && styles.detailRowBorder]}>
|
||||
const formatDateTime = (dateStr) => {
|
||||
if (!dateStr) return '';
|
||||
const d = new Date(dateStr);
|
||||
if (isNaN(d)) return dateStr;
|
||||
return d.toLocaleString('tk-TM', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
// Key/value row
|
||||
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>
|
||||
@@ -76,6 +92,11 @@ const LoanOrderDetailsScreen = () => {
|
||||
);
|
||||
}
|
||||
|
||||
// Pre-computed helpers
|
||||
const fullName = `${order.customer_name ?? ''} ${order.customer_surname ?? ''} ${order.customer_patronic_name ?? ''}`.trim();
|
||||
const guarantorFullName = `${order.guarantor_name ?? ''} ${order.guarantor_surname ?? ''} ${order.guarantor_patronic_name ?? ''}`.trim();
|
||||
const guarantor2FullName = `${order.guarantor_2_name ?? ''} ${order.guarantor_2_surname ?? ''} ${order.guarantor_2_patronic_name ?? ''}`.trim();
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
@@ -83,32 +104,115 @@ const LoanOrderDetailsScreen = () => {
|
||||
<Ionicons name="close" size={28} color={COLORS.textPrimary} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }}>
|
||||
<Text style={styles.title}>Karz sargyt maglumatlary</Text>
|
||||
{/* Ensure enough bottom padding so content is not hidden behind the tab bar */}
|
||||
<ScrollView contentContainerStyle={{ paddingBottom: 120, paddingRight: 16, paddingLeft: 16 }}>
|
||||
<Text style={styles.title}>Karz sargyt: {order.unique_id}</Text>
|
||||
|
||||
{/* Basic order info */}
|
||||
<View style={styles.detailCard}>
|
||||
<DetailRow label="ID" value={order.id} />
|
||||
<DetailRow label="Karz mukdary" value={order.loan_amount} />
|
||||
<DetailRow label="Loan type" value={order.loan_type} />
|
||||
<DetailRow label="Status" value={order.status ?? '-'} />
|
||||
<DetailRow label="Bellik" value={order.notes ?? '-'} last />
|
||||
{order.unique_id && <DetailRow label="ID" value={order.unique_id} />}
|
||||
{order.created_at && <DetailRow label="Döredilen wagty" value={formatDateTime(order.created_at)} />}
|
||||
{order.updated_at && <DetailRow label="Täzelenen wagty" value={formatDateTime(order.updated_at)} />}
|
||||
{order.status && <DetailRow label="Status" value={order.status} />}
|
||||
<DetailRow label="Bellik" value={order.notes ?? '-'} showBorder={false} />
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionTitle}>Müşderi</Text>
|
||||
{/* Loan details */}
|
||||
<Text style={styles.sectionTitle}>Karz barada maglumatlar</Text>
|
||||
<View style={styles.detailCard}>
|
||||
<DetailRow label="FIO" value={`${order.customer_name} ${order.customer_surname} ${order.customer_patronic_name ?? ''}`.trim()} />
|
||||
<DetailRow label="Doglan senesi" value={formatDate(order.born_at)} />
|
||||
<DetailRow label="Telefon" value={order.phone} />
|
||||
<DetailRow label="Passport" value={`${order.passport_serie} ${order.passport_id}`} last />
|
||||
{order.loan_amount && <DetailRow label="Karzyň möçberi" value={order.loan_amount} />}
|
||||
{order.loan_type && <DetailRow label="Karzyň görnüşi" value={order.loan_type} showBorder={order.satisfiable ? true : false} />}
|
||||
{order.satisfiable && <DetailRow label="Ýerine ýetirme ýagdaýy" value={order.satisfiable} showBorder={false} />}
|
||||
</View>
|
||||
|
||||
{/* Address */}
|
||||
<Text style={styles.sectionTitle}>Salgylary</Text>
|
||||
{/* Location */}
|
||||
{(order.region || order.branch) && (
|
||||
<>
|
||||
<Text style={styles.sectionTitle}>Lokasiýa</Text>
|
||||
<View style={styles.detailCard}>
|
||||
{order.region && <DetailRow label="Welaýat" value={order.region} />}
|
||||
{order.branch && <DetailRow label="Şahamça" value={order.branch} showBorder={false} />}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Personal information */}
|
||||
<Text style={styles.sectionTitle}>Şahsy maglumatlar</Text>
|
||||
<View style={styles.detailCard}>
|
||||
<DetailRow label="Passport salgysy" value={order.passport_address} />
|
||||
<DetailRow label="Real salgysy" value={order.real_address} last />
|
||||
<DetailRow label="Doly ady" value={fullName} />
|
||||
{order.born_at && <DetailRow label="Doglan güni" value={formatDate(order.born_at)} />}
|
||||
{order.born_place && <DetailRow label="Doglan ýeri" value={order.born_place} />}
|
||||
{order.marriage_status && <DetailRow label="Maşgala ýagdaýy" value={order.marriage_status} />}
|
||||
{order.education && <DetailRow label="Bilimi" value={order.education} />}
|
||||
{order.phone && <DetailRow label="Telefon" value={`+993 ${order.phone}`} />}
|
||||
{order.phone_additional && <DetailRow label="Goşmaça telefon" value={order.phone_additional} />}
|
||||
{order.phone_home && <DetailRow label="Öý telefon" value={order.phone_home} />}
|
||||
{order.email && <DetailRow label="E-poçta" value={order.email} />}
|
||||
{order.passport_serie && order.passport_id && <DetailRow label="Pasport" value={`${order.passport_serie} ${order.passport_id}`} />}
|
||||
{order.passport_given_at && <DetailRow label="Pasport berlen senesi" value={formatDate(order.passport_given_at)} />}
|
||||
{order.passport_given_by && <DetailRow label="Pasport beren gurama" value={order.passport_given_by} />}
|
||||
{order.passport_address && <DetailRow label="Ýaşaýan salgysy" value={order.passport_address} showBorder={false} />}
|
||||
</View>
|
||||
|
||||
{/* Work info */}
|
||||
{(order.work_company || order.work_position) && (
|
||||
<>
|
||||
<Text style={styles.sectionTitle}>Iş barada maglumatlar</Text>
|
||||
<View style={styles.detailCard}>
|
||||
{order.work_company && <DetailRow label="Işleýän ýeri" value={order.work_company} />}
|
||||
{order.work_position && <DetailRow label="Wezipesi" value={order.work_position} />}
|
||||
{order.work_salary && <DetailRow label="Zähmet haky" value={order.work_salary} />}
|
||||
{order.work_started_at && <DetailRow label="Işe başlan senesi" value={formatDate(order.work_started_at)} />}
|
||||
{order.work_company_accountant_number && <DetailRow label="Işgärler bölüminiň iş belgisi" value={order.work_company_accountant_number} />}
|
||||
{order.work_region && <DetailRow label="Iş ýeriniň etraby" value={order.work_region} />}
|
||||
{order.work_province && <DetailRow label="Iş ýeriniň welaýaty" value={order.work_province} showBorder={false} />}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Applicant card info */}
|
||||
{order.card_number && (
|
||||
<>
|
||||
<Text style={styles.sectionTitle}>Kartanyň maglumatlary (Arza beriji)</Text>
|
||||
<View style={styles.detailCard}>
|
||||
{order.card_name && <DetailRow label="Kartanyň ady" value={order.card_name} />}
|
||||
<DetailRow label="Kartanyň belgisi" value={order.card_number} />
|
||||
{order.card_month && <DetailRow label="Karta – aý" value={order.card_month} />}
|
||||
{order.card_year && <DetailRow label="Karta – ýyl" value={order.card_year} showBorder={false} />}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Guarantor 1 */}
|
||||
{guarantorFullName.trim() && (
|
||||
<>
|
||||
<Text style={styles.sectionTitle}>Zamun (1)</Text>
|
||||
<View style={styles.detailCard}>
|
||||
<DetailRow label="Doly ady" value={guarantorFullName} />
|
||||
{order.guarantor_card_name && <DetailRow label="Kartanyň ady" value={order.guarantor_card_name} />}
|
||||
{order.guarantor_card_number && <DetailRow label="Kartanyň belgisi" value={order.guarantor_card_number} />}
|
||||
{order.guarantor_card_month && <DetailRow label="Karta – aý" value={order.guarantor_card_month} />}
|
||||
{order.guarantor_card_year && <DetailRow label="Karta – ýyl" value={order.guarantor_card_year} />}
|
||||
{order.guarantor_note && <DetailRow label="Bellik" value={order.guarantor_note} showBorder={false} />}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Guarantor 2 */}
|
||||
{guarantor2FullName.trim() && (
|
||||
<>
|
||||
<Text style={styles.sectionTitle}>Zamun (2)</Text>
|
||||
<View style={styles.detailCard}>
|
||||
<DetailRow label="Doly ady" value={guarantor2FullName} />
|
||||
{order.guarantor_2_card_name && <DetailRow label="Kartanyň ady" value={order.guarantor_2_card_name} />}
|
||||
{order.guarantor_2_card_number && <DetailRow label="Kartanyň belgisi" value={order.guarantor_2_card_number} />}
|
||||
{order.guarantor_2_card_month && <DetailRow label="Karta – aý" value={order.guarantor_2_card_month} />}
|
||||
{order.guarantor_2_card_year && <DetailRow label="Karta – ýyl" value={order.guarantor_2_card_year} />}
|
||||
{order.guarantor_2_note && <DetailRow label="Bellik" value={order.guarantor_2_note} showBorder={false} />}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
<TouchableOpacity style={styles.deleteBtn} onPress={handleDelete}>
|
||||
<Text style={styles.deleteText}>Poz</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -118,7 +222,12 @@ const LoanOrderDetailsScreen = () => {
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: COLORS.backgroundSecondary },
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 40,
|
||||
},
|
||||
centered: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||
backBtn: { alignSelf: 'flex-end', marginBottom: 16, marginRight: 24 },
|
||||
title: { fontSize: 24, fontWeight: 'bold', color: COLORS.textPrimary, marginBottom: 24 },
|
||||
|
||||
Reference in New Issue
Block a user