card remaning done

src/screens/Card/CreateCardBalanceOrderScreen.js

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView, ScrollView } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
+import apiService from '../../services/apiService';
+import { COLORS } from '../../constants/colors';
+import Input from '../../components/Input';
+import SelectInput from '../../components/SelectInput';
+import { StatusBar } from 'expo-status-bar';
+import { useAuth } from '../../contexts/AuthContext';
+
+const monthOptions = Array.from({ length: 12 }).map((_, i) => {
+  const m = String(i + 1).padStart(2, '0');
+  return { label: m, value: m };
+});
+const yearOptions = Array.from({ length: 60 }).map((_, i) => {
+  const y = String(new Date().getFullYear() + i);
+  return { label: y, value: y };
+});
+
+const PASSPORT_SERIES = ['I-AS','I-MR','II-MR','I-AH','II-AH','I-LB','II-LB','I-BN','II-BN','I-DZ','II-DZ'];
+
+const CreateCardBalanceOrderScreen = () => {
+  const navigation = useNavigation();
+  const [cardNumber, setCardNumber] = useState('');
+  const [cardMonth, setCardMonth] = useState('');
+  const [cardYear, setCardYear] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { user } = useAuth();
+  const [passportSerie, setPassportSerie] = useState('');
+  const [passportId, setPassportId] = useState('');
+
+  const handleCardNumberChange = (value) => {
+    // Keep only digits
+    const digits = value.replace(/[^0-9]/g, '').slice(0, 16);
+    // Group into chunks of 4
+    const parts = digits.match(/.{1,4}/g) || [];
+    const formatted = parts.join(' ');
+    setCardNumber(formatted);
+  };
+
+  useEffect(() => {
+    if (user) {
+      if (user.passport_serie) setPassportSerie(user.passport_serie);
+      if (user.passport_id) setPassportId(String(user.passport_id));
+    }
+  }, [user]);
+
+  const handleSubmit = async () => {
+    if (!cardNumber.trim() || !cardMonth || !cardYear || !passportSerie || !passportId.trim()) {
+      Alert.alert('Error', 'All fields are required');
+      return;
+    }
+    setLoading(true);
+    // Remove spaces before sending
+    const rawCard = cardNumber.replace(/\s+/g, '');
+    const res = await apiService.createCardBalanceOrder(rawCard, cardMonth, cardYear, passportSerie, passportId.trim());
+    setLoading(false);
+    if (res.success) {
+      Alert.alert('Success', res.message || 'Order created successfully', [
+        { text: 'OK', onPress: () => navigation.goBack() },
+      ]);
+    } else {
+      Alert.alert('Error', res.error || 'Could not create order');
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar style="dark" />
+      <ScrollView contentContainerStyle={{ paddingHorizontal: 24, paddingTop: 40, paddingBottom: 40 }}>
+        <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
+          <Ionicons name="arrow-back" size={24} color={COLORS.textPrimary} />
+        </TouchableOpacity>
+
+        <Text style={styles.title}>Täze sargyt</Text>
+
+        <SelectInput
+          label="*Passport seriýasy"
+          value={passportSerie}
+          onValueChange={setPassportSerie}
+          options={PASSPORT_SERIES.map((v) => ({ label: v, value: v }))}
+          placeholder="Saýla"
+        />
+
+        <Input
+          label="*Passport belgisi"
+          placeholder="123456"
+          value={passportId}
+          onChangeText={setPassportId}
+          keyboardType="numeric"
+        />
+
+        <Input
+          label="*Kart belgisi"
+          placeholder="9934 6121 0000 0243"
+          value={cardNumber}
+          onChangeText={handleCardNumberChange}
+          keyboardType="numeric"
+          maxLength={19} // 16 digits + 3 spaces
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        <SelectInput
+          label="*Aý"
+          value={cardMonth}
+          onValueChange={setCardMonth}
+          options={monthOptions}
+          placeholder="Saýla"
+        />
+
+        <SelectInput
+          label="*Ýyl"
+          value={cardYear}
+          onValueChange={setCardYear}
+          options={yearOptions}
+          placeholder="Saýla"
+        />
+
+        <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,
+  },
+  backBtn: {
+    marginBottom: 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 CreateCardBalanceOrderScreen;