nurmuhammet/tbbank-react-native-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some style adjustments

Browse Source
This commit is contained in:
Nurmuhammet Allanov
2025-07-08 12:29:15 +05:00
parent 381bd5fa32
commit cd8b129f16
5 changed files with 86 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/DateInput.js
View File

@@ -18,7 +18,7 @@ const parseDate = (str) => {
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day)); return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
}; };
const DateInput = ({ label, value, onChange, placeholder = 'Saýla', maximumDate, minimumDate }) => { const DateInput = ({ label, value, onChange, placeholder = 'Saýla', maximumDate, minimumDate, error = false }) => {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [tempDate, setTempDate] = useState(value ? (typeof value === 'string' ? parseDate(value) : value) : new Date()); const [tempDate, setTempDate] = useState(value ? (typeof value === 'string' ? parseDate(value) : value) : new Date());
@@ -43,8 +43,10 @@ const DateInput = ({ label, value, onChange, placeholder = 'Saýla', maximumDate
return ( return (
<View style={styles.container}> <View style={styles.container}>
{label && <Text style={styles.label}>{label}</Text>} {label && (
<TouchableOpacity style={styles.selectBox} onPress={open} activeOpacity={0.7}> <Text style={[styles.label, typeof label === 'string' && label.trim().startsWith('*') && styles.requiredLabel]}>{label}</Text>
)}
<TouchableOpacity style={[styles.selectBox, error && styles.error]} onPress={open} activeOpacity={0.7}>
<Text style={[styles.selectText, !value && { color: COLORS.gray[400] }]}>{value || placeholder}</Text> <Text style={[styles.selectText, !value && { color: COLORS.gray[400] }]}>{value || placeholder}</Text>
<Ionicons name="calendar" size={18} color={COLORS.gray[400]} /> <Ionicons name="calendar" size={18} color={COLORS.gray[400]} />
</TouchableOpacity> </TouchableOpacity>
@@ -101,6 +103,9 @@ const styles = StyleSheet.create({
color: COLORS.textPrimary, color: COLORS.textPrimary,
marginBottom: 8, marginBottom: 8,
}, },
requiredLabel: {
color: COLORS.error,
},
selectBox: { selectBox: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
@@ -112,6 +117,9 @@ const styles = StyleSheet.create({
paddingHorizontal: 16, paddingHorizontal: 16,
minHeight: 52, minHeight: 52,
}, },
error: {
borderColor: COLORS.error,
},
selectText: { selectText: {
fontSize: 16, fontSize: 16,
color: COLORS.textPrimary, color: COLORS.textPrimary,

7
src/components/ImageInput.js
View File

@@ -34,7 +34,9 @@ const ImageInput = ({ label, image, onChange, error = false }) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
{label && <Text style={styles.label}>{label}</Text>} {label && (
<Text style={[styles.label, typeof label === 'string' && label.trim().startsWith('*') && styles.requiredLabel]}>{label}</Text>
)}
<TouchableOpacity style={[styles.box, error && styles.error]} activeOpacity={0.8} onPress={pickImage}> <TouchableOpacity style={[styles.box, error && styles.error]} activeOpacity={0.8} onPress={pickImage}>
{image ? ( {image ? (
<Image source={{ uri: image.uri ? image.uri : image }} style={styles.preview} /> <Image source={{ uri: image.uri ? image.uri : image }} style={styles.preview} />
@@ -59,6 +61,9 @@ const styles = StyleSheet.create({
color: COLORS.textPrimary, color: COLORS.textPrimary,
marginBottom: 8, marginBottom: 8,
}, },
requiredLabel: {
color: COLORS.error,
},
box: { box: {
borderWidth: 1, borderWidth: 1,
borderColor: COLORS.gray[300], borderColor: COLORS.gray[300],

9
src/components/Input.js
View File

@@ -27,7 +27,11 @@ const Input = forwardRef(({
return ( return (
<View style={[styles.container, style]}> <View style={[styles.container, style]}>
{label && <Text style={styles.label}>{label}</Text>} {label && (
<Text style={[styles.label, typeof label === 'string' && label.trim().startsWith('*') && styles.requiredLabel]}>
{label}
</Text>
)}
<View style={[ <View style={[
styles.inputContainer, styles.inputContainer,
isFocused && styles.focused, isFocused && styles.focused,
@@ -83,6 +87,9 @@ const styles = StyleSheet.create({
color: COLORS.textPrimary, color: COLORS.textPrimary,
marginBottom: 8, marginBottom: 8,
}, },
requiredLabel: {
color: COLORS.error,
},
inputContainer: { inputContainer: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',

7
src/components/SelectInput.js
View File

@@ -52,7 +52,9 @@ const SelectInput = ({
return ( return (
<View style={styles.container}> <View style={styles.container}>
{label && <Text style={styles.label}>{label}</Text>} {label && (
<Text style={[styles.label, typeof label === 'string' && label.trim().startsWith('*') && styles.requiredLabel]}>{label}</Text>
)}
<TouchableOpacity <TouchableOpacity
style={[styles.selectBox, disabled && styles.disabled, error && styles.error]} style={[styles.selectBox, disabled && styles.disabled, error && styles.error]}
onPress={openModal} onPress={openModal}
@@ -108,6 +110,9 @@ const styles = StyleSheet.create({
color: COLORS.textPrimary, color: COLORS.textPrimary,
marginBottom: 8, marginBottom: 8,
}, },
requiredLabel: {
color: COLORS.error,
},
selectBox: { selectBox: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',

89
src/screens/Loan/CreateLoanOrderScreen.js
View File

@@ -62,6 +62,10 @@ const CreateLoanOrderScreen = () => {
const [cardMonth, setCardMonth] = useState(''); const [cardMonth, setCardMonth] = useState('');
const [cardYear, setCardYear] = useState(''); const [cardYear, setCardYear] = useState('');
const [submitted, setSubmitted] = useState(false);
const req = (l) => `${l} *`;
const [passportOne, setPassportOne] = useState(null); const [passportOne, setPassportOne] = useState(null);
const [passportTwo, setPassportTwo] = useState(null); const [passportTwo, setPassportTwo] = useState(null);
const [passportThree, setPassportThree] = useState(null); const [passportThree, setPassportThree] = useState(null);
@@ -77,6 +81,13 @@ const CreateLoanOrderScreen = () => {
return { value: year.toString(), label: year.toString() }; return { value: year.toString(), label: year.toString() };
}); });
const handleLoanAmountChange = (text) => {
const numValue = parseInt(text) || 0;
if (numValue <= 40000) {
setLoanAmount(text);
}
};
const formatCardNumber = (text) => { const formatCardNumber = (text) => {
const digits = text.replace(/[^0-9]/g, '').slice(0, 16); const digits = text.replace(/[^0-9]/g, '').slice(0, 16);
const parts = []; const parts = [];
@@ -129,7 +140,8 @@ const CreateLoanOrderScreen = () => {
const branchOptions = region && branchesByRegion[region] ? branchesByRegion[region].map((b) => ({ label: b.name, value: b.id })) : []; const branchOptions = region && branchesByRegion[region] ? branchesByRegion[region].map((b) => ({ label: b.name, value: b.id })) : [];
const handleSubmit = async () => { const handleSubmit = async () => {
if (!loanType || !loanAmount || !region || !branchId || !customerName || !customerSurname || !passportSerie || !passportId || !bornAt || !phone || !education || !marriageStatus || !passportAddress || !realAddress || !passportOne || !passportTwo || !passportThree || !passportFour || !cardNumber || !cardName || !cardMonth || !cardYear) { setSubmitted(true);
if (!loanType || !loanAmount || !region || !branchId || !customerName || !customerSurname || !passportSerie || !passportId || !passportGivenAt || !passportGivenBy || !bornAt || !bornPlace || !phone || !phoneHome || !education || !marriageStatus || !passportAddress || !realAddress || !workCompany || !workCompanyAccNum || !workRegion || !workProvinceId || !workPosition || !workSalary || !workStartedAt || !passportOne || !passportTwo || !passportThree || !passportFour || !cardNumber || !cardName || !cardMonth || !cardYear) {
Alert.alert('Error', 'Fill all required fields'); Alert.alert('Error', 'Fill all required fields');
return; return;
} }
@@ -231,54 +243,62 @@ const CreateLoanOrderScreen = () => {
<ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }} showsVerticalScrollIndicator={false}> <ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }} showsVerticalScrollIndicator={false}>
<Text style={styles.title}>Täze karz sargyt</Text> <Text style={styles.title}>Täze karz sargyt</Text>
<Text style={styles.note}>* bilen bellenilen meýdanlar hökmanydyr</Text>
<SelectInput label="Karzyň görnüşi" value={loanType} options={loanTypeOptions} onValueChange={setLoanType} placeholder="Saýla" /> <SelectInput label={req('Karzyň görnüşi')} value={loanType} options={loanTypeOptions} onValueChange={setLoanType} placeholder="Saýla" error={submitted && !loanType} />
<Input label="Karz mukdary" placeholder="20000" value={loanAmount} onChangeText={setLoanAmount} keyboardType="numeric" /> <Input
label={req('Karz mukdary')}
placeholder="20000"
value={loanAmount}
onChangeText={handleLoanAmountChange}
keyboardType="numeric"
error={submitted && !loanAmount}
/>
<SelectInput label="Welaýat" value={region} options={regionOptions} onValueChange={(val) => { setRegion(val); setBranchId(''); }} placeholder="Saýla" /> <SelectInput label={req('Welaýat')} value={region} options={regionOptions} onValueChange={(val) => { setRegion(val); setBranchId(''); }} placeholder="Saýla" error={submitted && !region} />
<SelectInput label="Şahamça" value={branchId} options={branchOptions} onValueChange={setBranchId} placeholder="Saýla" disabled={branchOptions.length === 0} /> <SelectInput label={req('Şahamça')} value={branchId} options={branchOptions} onValueChange={setBranchId} placeholder="Saýla" disabled={branchOptions.length === 0} error={submitted && !branchId} />
<Input label="Ady" placeholder="Mahmyt" value={customerName} onChangeText={setCustomerName} /> <Input label={req('Ady')} placeholder="Mahmyt" value={customerName} onChangeText={setCustomerName} error={submitted && !customerName} />
<Input label="Familiýasy" placeholder="Allaberdiyev" value={customerSurname} onChangeText={setCustomerSurname} /> <Input label={req('Familiýasy')} placeholder="Allaberdiyev" value={customerSurname} onChangeText={setCustomerSurname} error={submitted && !customerSurname} />
<Input label="Atasynyň ady" placeholder="" value={customerPatro} onChangeText={setCustomerPatro} /> <Input label="Atasynyň ady" placeholder="" value={customerPatro} onChangeText={setCustomerPatro} />
<SelectInput label="Bilimi" value={education} options={educationOptions} onValueChange={setEducation} placeholder="Saýla" /> <SelectInput label={req('Bilimi')} value={education} options={educationOptions} onValueChange={setEducation} placeholder="Saýla" error={submitted && !education} />
<SelectInput label="Maşgala ýagdaýy" value={marriageStatus} options={marriageOptions} onValueChange={setMarriageStatus} placeholder="Saýla" /> <SelectInput label={req('Maşgala ýagdaýy')} value={marriageStatus} options={marriageOptions} onValueChange={setMarriageStatus} placeholder="Saýla" error={submitted && !marriageStatus} />
<DateInput label="Doglan senesi" value={bornAt} onChange={setBornAt} /> <DateInput label={req('Doglan senesi')} value={bornAt} onChange={setBornAt} error={submitted && !bornAt} />
<Input label="Ýazgy edilen salgyňyz" placeholder="Kemine 100/190" value={passportAddress} onChangeText={setPassportAddress} /> <Input label={req('Ýazgy edilen salgyňyz')} placeholder="Kemine 100/190" value={passportAddress} onChangeText={setPassportAddress} error={submitted && !passportAddress} />
<Input label="Häzirki ýaşaýyş ýeri" placeholder="Kemine 100/200" value={realAddress} onChangeText={setRealAddress} /> <Input label={req('Häzirki ýaşaýyş ýeri')} placeholder="Kemine 100/200" value={realAddress} onChangeText={setRealAddress} error={submitted && !realAddress} />
<SelectInput label="Passport seriýasy" value={passportSerie} options={passportSeriesOptions} onValueChange={setPassportSerie} placeholder="Saýla" /> <SelectInput label={req('Passport seriýasy')} value={passportSerie} options={passportSeriesOptions} onValueChange={setPassportSerie} placeholder="Saýla" error={submitted && !passportSerie} />
<Input label="Passport nomeri" placeholder="100999" value={passportId} onChangeText={setPassportId} keyboardType="numeric" /> <Input label={req('Passport nomeri')} placeholder="100999" value={passportId} onChangeText={setPassportId} keyboardType="numeric" error={submitted && !passportId} />
<DateInput label="Passport berlen senesi" value={passportGivenAt} onChange={setPassportGivenAt} /> <DateInput label={req('Passport berlen senesi')} value={passportGivenAt} onChange={setPassportGivenAt} error={submitted && !passportGivenAt} />
<Input label="Kim tarapyndan berildi" placeholder="Ashgabat polisiýasy tarapyndan" value={passportGivenBy} onChangeText={setPassportGivenBy} /> <Input label={req('Kim tarapyndan berildi')} placeholder="Ashgabat polisiýasy tarapyndan" value={passportGivenBy} onChangeText={setPassportGivenBy} error={submitted && !passportGivenBy} />
<Input label="Doglan ýeri (passport)" placeholder="Ashgabat" value={bornPlace} onChangeText={setBornPlace} /> <Input label={req('Doglan ýeri (passport)')} placeholder="Ashgabat" value={bornPlace} onChangeText={setBornPlace} error={submitted && !bornPlace} />
<Input label="E-poçta" placeholder="example@mail.com" value={email} onChangeText={setEmail} keyboardType="email-address" /> <Input label="E-poçta" placeholder="example@mail.com" value={email} onChangeText={setEmail} keyboardType="email-address" />
<Input label="Telefon (+9936...)" value={phone} onChangeText={setPhone} keyboardType="numeric" /> <Input label={req('Telefon (+9936...)')} value={phone} onChangeText={setPhone} keyboardType="numeric" error={submitted && !phone} />
<Input label="Telefon goşmaça" value={phoneAdditional} onChangeText={setPhoneAdditional} keyboardType="numeric" /> <Input label="Telefon goşmaça" value={phoneAdditional} onChangeText={setPhoneAdditional} keyboardType="numeric" />
<Input label="Öý telefony" value={phoneHome} onChangeText={setPhoneHome} /> <Input label={req('Öý telefony')} value={phoneHome} onChangeText={setPhoneHome} error={submitted && !phoneHome} />
<Input label="Işleýän edaranyň/kärhananyň ady" value={workCompany} onChangeText={setWorkCompany} /> <Input label={req('Işleýän edaranyň/kärhananyň ady')} value={workCompany} onChangeText={setWorkCompany} error={submitted && !workCompany} />
<Input label="Işgärler bölüminiň iş belgisi" value={workCompanyAccNum} onChangeText={setWorkCompanyAccNum} /> <Input label={req('Işgärler bölüminiň iş belgisi')} value={workCompanyAccNum} onChangeText={setWorkCompanyAccNum} error={submitted && !workCompanyAccNum} />
<SelectInput label="Işleýän welaýatyňyz" value={workRegion} options={regionOptions} onValueChange={(val)=>{setWorkRegion(val); setWorkProvinceId('');}} placeholder="Saýla" /> <SelectInput label={req('Işleýän welaýatyňyz')} value={workRegion} options={regionOptions} onValueChange={(val)=>{setWorkRegion(val); setWorkProvinceId('');}} placeholder="Saýla" error={submitted && !workRegion} />
<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} /> <SelectInput label={req('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} error={submitted && !workProvinceId} />
<Input label="Wezipe" value={workPosition} onChangeText={setWorkPosition} /> <Input label={req('Wezipe')} value={workPosition} onChangeText={setWorkPosition} error={submitted && !workPosition} />
<Input label="Zähmet haky" value={workSalary} onChangeText={setWorkSalary} keyboardType="numeric" /> <Input label={req('Zähmet haky')} value={workSalary} onChangeText={setWorkSalary} keyboardType="numeric" error={submitted && !workSalary} />
<DateInput label="Işe başlan wagtyňyz" value={workStartedAt} onChange={setWorkStartedAt} /> <DateInput label={req('Işe başlan wagtyňyz')} value={workStartedAt} onChange={setWorkStartedAt} error={submitted && !workStartedAt} />
{/* Card info */} {/* Card info */}
<Input label="Kart belgisi" placeholder="xxxx-xxxx-xxxx-xxxx" value={cardNumber} onChangeText={handleCardNumberChange} keyboardType="numeric" /> <Input label={req('Kart belgisi')} placeholder="xxxx-xxxx-xxxx-xxxx" value={cardNumber} onChangeText={handleCardNumberChange} keyboardType="numeric" error={submitted && !cardNumber} />
<Input label="Kartdaky ady" value={cardName} onChangeText={setCardName} /> <Input label={req('Kartdaky ady')} value={cardName} onChangeText={setCardName} error={submitted && !cardName} />
<SelectInput label="Kart Möhleti (aý)" value={cardMonth} options={monthOptions} onValueChange={setCardMonth} placeholder="Saýla" /> <SelectInput label={req('Kart Möhleti (aý)')} value={cardMonth} options={monthOptions} onValueChange={setCardMonth} placeholder="Saýla" error={submitted && !cardMonth} />
<SelectInput label="Kart Möhleti (ýyl)" value={cardYear} options={yearOptions} onValueChange={setCardYear} placeholder="Saýla" /> <SelectInput label={req('Kart Möhleti (ýyl)')} value={cardYear} options={yearOptions} onValueChange={setCardYear} placeholder="Saýla" error={submitted && !cardYear} />
<View style={styles.passportGrid}> <View style={styles.passportGrid}>
<ImageInput label="Pasport (sahypa 1)" image={passportOne} onChange={setPassportOne} /> <ImageInput label={req('Pasport (sahypa 1)')} image={passportOne} onChange={setPassportOne} error={submitted && !passportOne} />
<ImageInput label="Pasport (2-3-nji sahypa)" image={passportTwo} onChange={setPassportTwo} /> <ImageInput label={req('Pasport (2-3-nji sahypa)')} image={passportTwo} onChange={setPassportTwo} error={submitted && !passportTwo} />
<ImageInput label="Pasport (8-9 sahypa)" image={passportThree} onChange={setPassportThree} /> <ImageInput label={req('Pasport (8-9 sahypa)')} image={passportThree} onChange={setPassportThree} error={submitted && !passportThree} />
<ImageInput label="Pasport (32-nji sahypa)" image={passportFour} onChange={setPassportFour} /> <ImageInput label={req('Pasport (32-nji sahypa)')} image={passportFour} onChange={setPassportFour} error={submitted && !passportFour} />
</View> </View>
<TouchableOpacity style={styles.submitBtn} onPress={handleSubmit} disabled={loading}> <TouchableOpacity style={styles.submitBtn} onPress={handleSubmit} disabled={loading}>
@@ -293,6 +313,7 @@ const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: COLORS.backgroundSecondary, paddingTop: 40 }, container: { flex: 1, backgroundColor: COLORS.backgroundSecondary, paddingTop: 40 },
backBtn: { marginBottom: 24, marginLeft: 24 }, backBtn: { marginBottom: 24, marginLeft: 24 },
title: { fontSize: 24, fontWeight: 'bold', color: COLORS.textPrimary, marginBottom: 24 }, title: { fontSize: 24, fontWeight: 'bold', color: COLORS.textPrimary, marginBottom: 24 },
note: { fontSize: 14, color: COLORS.error, marginBottom: 24 },
submitBtn: { marginTop: 32, backgroundColor: COLORS.primary, paddingVertical: 16, borderRadius: 8, alignItems: 'center' }, submitBtn: { marginTop: 32, backgroundColor: COLORS.primary, paddingVertical: 16, borderRadius: 8, alignItems: 'center' },
submitText: { color: COLORS.white, fontSize: 16, fontWeight: '600' }, submitText: { color: COLORS.white, fontSize: 16, fontWeight: '600' },
passportGrid: { passportGrid: {