Files
tbbank-react-native-mobile/src/screens/Loan/CreateLoanOrderScreen.js

204 lines
11 KiB
JavaScript

import React, { useState, useEffect } from 'react';
import { Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView, SafeAreaView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { COLORS } from '../../constants/colors';
import Input from '../../components/Input';
import SelectInput from '../../components/SelectInput';
import DateInput from '../../components/DateInput';
import { API_CONFIG } from '../../constants/api';
import apiService from '../../services/apiService';
import { useAuth } from '../../contexts/AuthContext';
import { useBaseEnums } from '../../contexts/BaseEnumsContext';
import { StatusBar } from 'expo-status-bar';
const CreateLoanOrderScreen = () => {
const navigation = useNavigation();
const { user } = useAuth();
const { getOptions } = useBaseEnums();
const [loanType, setLoanType] = useState('');
const [loanAmount, setLoanAmount] = useState('');
const [region, setRegion] = useState('');
const [branchId, setBranchId] = useState('');
const [customerName, setCustomerName] = useState('');
const [customerSurname, setCustomerSurname] = useState('');
const [customerPatro, setCustomerPatro] = useState('');
const [passportSerie, setPassportSerie] = useState('');
const [passportId, setPassportId] = useState('');
const [bornAt, setBornAt] = useState('');
const [phone, setPhone] = useState('');
const [loading, setLoading] = useState(false);
const [loanTypeOptions, setLoanTypeOptions] = useState([]);
const [regionOptions, setRegionOptions] = useState([]);
const [passportSeriesOptions, setPassportSeriesOptions] = useState([]);
const [educationOptions, setEducationOptions] = useState([]);
const [marriageOptions, setMarriageOptions] = useState([]);
const [education, setEducation] = useState('');
const [marriageStatus, setMarriageStatus] = useState('');
const [passportAddress, setPassportAddress] = useState('');
const [realAddress, setRealAddress] = useState('');
const [passportGivenAt, setPassportGivenAt] = useState('');
const [passportGivenBy, setPassportGivenBy] = useState('');
const [bornPlace, setBornPlace] = useState('');
const [email, setEmail] = useState('');
const [phoneAdditional, setPhoneAdditional] = useState('');
const [phoneHome, setPhoneHome] = useState('');
const [workCompany, setWorkCompany] = useState('');
const [workCompanyAccNum, setWorkCompanyAccNum] = useState('');
const [workRegion, setWorkRegion] = useState('');
const [workProvinceId, setWorkProvinceId] = useState('');
const [workPosition, setWorkPosition] = useState('');
const [workSalary, setWorkSalary] = useState('');
const [workStartedAt, setWorkStartedAt] = useState('');
const [branchesByRegion, setBranchesByRegion] = useState({});
useEffect(() => {
if (user) {
if (user.passport_serie) setPassportSerie(user.passport_serie);
if (user.passport_id) setPassportId(String(user.passport_id));
if (user.phone) setPhone(String(user.phone).slice(-8));
if (user.region) setRegion(user.region);
if (user.name) {
const parts = user.name.split(' ');
setCustomerName(parts[0]);
setCustomerSurname(parts[1] || '');
}
}
const baseRegions = getOptions('regions');
const pSeries = getOptions('passport_series');
const loanTypes = getOptions('loan_types');
const educ = getOptions('educations');
const marriages = getOptions('marriage_statuses');
setRegionOptions(baseRegions);
setPassportSeriesOptions(pSeries);
setLoanTypeOptions(loanTypes);
setEducationOptions(educ);
setMarriageOptions(marriages);
const fetchBranches = async () => {
try {
const res = await fetch(`${API_CONFIG.BASE_URL}/branches?groupBy=region`);
const json = await res.json();
setBranchesByRegion(json);
} catch {}
};
fetchBranches();
}, []);
const branchOptions = region && branchesByRegion[region] ? branchesByRegion[region].map((b) => ({ label: b.name, value: b.id })) : [];
const handleSubmit = async () => {
if (!loanType || !loanAmount || !region || !branchId || !customerName || !customerSurname || !passportSerie || !passportId || !bornAt || !phone || !education || !marriageStatus || !passportAddress || !realAddress) {
Alert.alert('Error', 'Fill all required fields');
return;
}
const payload = {
loan_type: parseInt(loanType),
loan_amount: parseInt(loanAmount),
region,
branch_id: parseInt(branchId),
customer_name: customerName,
customer_surname: customerSurname,
customer_patronic_name: customerPatro || null,
education,
marriage_status: marriageStatus,
passport_address: passportAddress,
real_address: realAddress,
passport_serie: passportSerie,
passport_id: passportId.trim(),
passport_given_at: passportGivenAt,
passport_given_by: passportGivenBy,
born_place: bornPlace,
born_at: bornAt,
phone: parseInt(phone),
email: email || null,
phone_additional: phoneAdditional ? parseInt(phoneAdditional) : null,
phone_home: phoneHome || null,
work_company: workCompany || null,
work_company_accountant_number: workCompanyAccNum || null,
work_region: workRegion || null,
work_province_id: workProvinceId ? parseInt(workProvinceId) : null,
work_position: workPosition || null,
work_salary: workSalary ? parseInt(workSalary) : null,
work_started_at: workStartedAt || null,
};
setLoading(true);
const res = await apiService.createLoanOrder(payload);
setLoading(false);
if (res.success) {
Alert.alert('Success', res.message || 'Order created', [{ text: 'OK', onPress: () => navigation.goBack() }]);
} else {
Alert.alert('Error', res.error || 'Could not create');
}
};
return (
<SafeAreaView style={styles.container}>
<StatusBar style="dark" />
<TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
<Ionicons name="arrow-back" size={24} color={COLORS.textPrimary} />
</TouchableOpacity>
<ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }} showsVerticalScrollIndicator={false}>
<Text style={styles.title}>Täze karz sargyt</Text>
<SelectInput label="Karzyň görnüşi" value={loanType} options={loanTypeOptions} onValueChange={setLoanType} placeholder="Saýla" />
<Input label="Karz mukdary" placeholder="20000" value={loanAmount} onChangeText={setLoanAmount} keyboardType="numeric" />
<SelectInput label="Welaýat" value={region} options={regionOptions} onValueChange={(val) => { setRegion(val); setBranchId(''); }} placeholder="Saýla" />
<SelectInput label="Şahamça" value={branchId} options={branchOptions} onValueChange={setBranchId} placeholder="Saýla" disabled={branchOptions.length === 0} />
<Input label="Ady" placeholder="Mahmyt" value={customerName} onChangeText={setCustomerName} />
<Input label="Familiýasy" placeholder="Allaberdiyev" value={customerSurname} onChangeText={setCustomerSurname} />
<Input label="Atasynyň ady" placeholder="" value={customerPatro} onChangeText={setCustomerPatro} />
<SelectInput label="Bilimi" value={education} options={educationOptions} onValueChange={setEducation} placeholder="Saýla" />
<SelectInput label="Maşgala ýagdaýy" value={marriageStatus} options={marriageOptions} onValueChange={setMarriageStatus} placeholder="Saýla" />
<Input label="Ýazgy edilen salgyňyz" placeholder="Kemine 100/190" value={passportAddress} onChangeText={setPassportAddress} />
<Input label="Häzirki ýaşaýyş ýeri" placeholder="Kemine 100/200" value={realAddress} onChangeText={setRealAddress} />
<SelectInput label="Passport seriýasy" value={passportSerie} options={passportSeriesOptions} onValueChange={setPassportSerie} placeholder="Saýla" />
<Input label="Passport nomeri" placeholder="100999" value={passportId} onChangeText={setPassportId} keyboardType="numeric" />
<DateInput label="Passport berlen senesi" value={passportGivenAt} onChange={setPassportGivenAt} />
<Input label="Kim tarapyndan berildi" placeholder="Ashgabat polisiýasy tarapyndan" value={passportGivenBy} onChangeText={setPassportGivenBy} />
<Input label="Doglan ýeri (passport)" placeholder="Ashgabat" value={bornPlace} onChangeText={setBornPlace} />
<Input label="E-poçta" placeholder="example@mail.com" value={email} onChangeText={setEmail} keyboardType="email-address" />
<DateInput label="Doglan senesi" value={bornAt} onChange={setBornAt} />
<Input label="Telefon (+9936...)" value={phone} onChangeText={setPhone} keyboardType="numeric" />
<Input label="Telefon goşmaça" value={phoneAdditional} onChangeText={setPhoneAdditional} keyboardType="numeric" />
<Input label="Öý telefony" value={phoneHome} onChangeText={setPhoneHome} />
<Input label="Işleýän edaranyň/kärhananyň ady" value={workCompany} onChangeText={setWorkCompany} />
<Input label="Işgärler bölüminiň iş belgisi" value={workCompanyAccNum} onChangeText={setWorkCompanyAccNum} />
<SelectInput label="Işleýän welaýatyňyz" value={workRegion} options={regionOptions} onValueChange={(val)=>{setWorkRegion(val); setWorkProvinceId('');}} placeholder="Saýla" />
<SelectInput label="Işleýän etrabyňyz" value={workProvinceId} options={workRegion && branchesByRegion[workRegion] ? branchesByRegion[workRegion].map(b=>({label:b.name,value:b.id})) : []} onValueChange={setWorkProvinceId} placeholder="Saýla" disabled={!workRegion} />
<Input label="Wezipe" value={workPosition} onChangeText={setWorkPosition} />
<Input label="Zähmet haky" value={workSalary} onChangeText={setWorkSalary} keyboardType="numeric" />
<DateInput label="Işe başlan wagtyňyz" value={workStartedAt} onChange={setWorkStartedAt} />
<TouchableOpacity style={styles.submitBtn} onPress={handleSubmit} disabled={loading}>
{loading ? <ActivityIndicator color={COLORS.white} /> : <Text style={styles.submitText}>Ýatda sakla</Text>}
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: COLORS.backgroundSecondary, paddingTop: 40 },
backBtn: { marginBottom: 24, marginLeft: 24 },
title: { fontSize: 24, fontWeight: 'bold', color: COLORS.textPrimary, marginBottom: 24 },
submitBtn: { marginTop: 32, backgroundColor: COLORS.primary, paddingVertical: 16, borderRadius: 8, alignItems: 'center' },
submitText: { color: COLORS.white, fontSize: 16, fontWeight: '600' },
});
export default CreateLoanOrderScreen;