loan paid off working

src/screens/Loan/CreateLoanPaidOffLetterOrderScreen.js

@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+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 { StatusBar } from 'expo-status-bar';
+import SelectInput from '../../components/SelectInput';
+import DateInput from '../../components/DateInput';
+import { API_CONFIG } from '../../constants/api';
+import { useAuth } from '../../contexts/AuthContext';
 import apiService from '../../services/apiService';
+import { StatusBar } from 'expo-status-bar';
 
 const CreateLoanPaidOffLetterOrderScreen = () => {
   const navigation = useNavigation();
@@ -25,6 +29,57 @@ const CreateLoanPaidOffLetterOrderScreen = () => {
   const [loanReason, setLoanReason] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Options
+  const [regionOptions, setRegionOptions] = useState([]);
+  const [passportSeriesOptions, setPassportSeriesOptions] = useState([]);
+  const [branchesByRegion, setBranchesByRegion] = useState({});
+
+  const { user } = useAuth();
+
+  useEffect(() => {
+    // Prefill user passport if available
+    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);
+    }
+
+    const fetchEnums = async () => {
+      try {
+        const res = await fetch(`${API_CONFIG.BASE_URL}/base-app-enums`);
+        const enums = await res.json();
+
+        // Regions
+        const regions = Object.entries(enums.regions || {}).map(([value, label]) => ({ value, label }));
+        setRegionOptions(regions);
+
+        // Passport series
+        const pSeries = Object.keys(enums.passport_series || {}).map((key) => ({ value: key, label: key }));
+        setPassportSeriesOptions(pSeries);
+      } catch (e) {
+        console.warn('Failed loading enums', e.message);
+      }
+    };
+
+    const fetchBranches = async () => {
+      try {
+        const res = await fetch(`${API_CONFIG.BASE_URL}/branches?groupBy=region`);
+        const json = await res.json();
+        setBranchesByRegion(json);
+      } catch (e) {
+        console.warn('Failed loading branches', e.message);
+      }
+    };
+
+    fetchEnums();
+    fetchBranches();
+  }, []);
+
+  const branchOptions = region && branchesByRegion[region]
+    ? branchesByRegion[region].map((b) => ({ label: b.name, value: b.id }))
+    : [];
+
   const handleSubmit = async () => {
     // Basic validation – ensure all required fields are filled
     if (
@@ -51,7 +106,7 @@ const CreateLoanPaidOffLetterOrderScreen = () => {
       customer_name: customerName,
       customer_surname: customerSurname,
       passport_serie: passportSerie,
-      passport_id: parseInt(passportId),
+      passport_id: passportId.trim(),
       born_at: bornAt,
       phone: parseInt(phone),
       loan_contract_number: contractNumber,
@@ -85,23 +140,27 @@ const CreateLoanPaidOffLetterOrderScreen = () => {
         <Ionicons name="arrow-back" size={24} color={COLORS.textPrimary} />
       </TouchableOpacity>
 
-      <ScrollView contentContainerStyle={{ paddingBottom: 40 }} showsVerticalScrollIndicator={false}>
+      <ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }} showsVerticalScrollIndicator={false}>
         <Text style={styles.title}>Täze güwanama sargyt et</Text>
 
         {/* Region & Branch */}
-        <Input
-          label="Region (ag, ak, mr, ... )"
-          placeholder="mr"
+        <SelectInput
+          label="Welaýat"
           value={region}
-          onChangeText={setRegion}
-          autoCapitalize="none"
+          options={regionOptions}
+          onValueChange={(val) => {
+            setRegion(val);
+            setBranchId('');
+          }}
+          placeholder="Saýla"
         />
-        <Input
-          label="Şahamça ID-si"
-          placeholder="12"
+        <SelectInput
+          label="Şahamça"
           value={branchId}
-          onChangeText={setBranchId}
-          keyboardType="numeric"
+          options={branchOptions}
+          onValueChange={(val) => setBranchId(val)}
+          placeholder="Saýla"
+          disabled={branchOptions.length === 0}
         />
 
         {/* Customer */}
@@ -119,12 +178,12 @@ const CreateLoanPaidOffLetterOrderScreen = () => {
         />
 
         {/* Passport */}
-        <Input
+        <SelectInput
           label="Passport seriýasy"
-          placeholder="I-AS"
           value={passportSerie}
-          onChangeText={setPassportSerie}
-          autoCapitalize="characters"
+          options={passportSeriesOptions}
+          onValueChange={setPassportSerie}
+          placeholder="Saýla"
         />
         <Input
           label="Passport nomeri"
@@ -135,11 +194,10 @@ const CreateLoanPaidOffLetterOrderScreen = () => {
         />
 
         {/* Other personal */}
-        <Input
-          label="Doglan senesi (DD.MM.YYYY)"
-          placeholder="10.10.2000"
+        <DateInput
+          label="Doglan senesi"
           value={bornAt}
-          onChangeText={setBornAt}
+          onChange={setBornAt}
         />
         <Input
           label="Telefon belgi (+9936...)"
@@ -156,11 +214,10 @@ const CreateLoanPaidOffLetterOrderScreen = () => {
           value={contractNumber}
           onChangeText={setContractNumber}
         />
-        <Input
+        <DateInput
           label="Karz şertnama senesi"
-          placeholder="20.04.2022"
           value={contractDate}
-          onChangeText={setContractDate}
+          onChange={setContractDate}
         />
         <Input
           label="Karz mukdary"
@@ -192,11 +249,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: COLORS.backgroundSecondary,
-    paddingHorizontal: 24,
     paddingTop: 40,
   },
   backBtn: {
     marginBottom: 24,
+    marginLeft: 24,
   },
   title: {
     fontSize: 24,