loan order details more beautiful

2025-07-08 16:06:22 +05:00
parent af13251758
commit a520a9065f
12 changed files with 1126 additions and 446 deletions
--- a/src/screens/Card/CardTransactionOrdersScreen.js
+++ b/src/screens/Card/CardTransactionOrdersScreen.js
@@ -0,0 +1,190 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import apiService from '../../services/apiService';
+import { COLORS } from '../../constants/colors';
+import { StatusBar } from 'expo-status-bar';
+
+const CARD_BG = '#F1F9F1';
+const CIRCLE_BG = '#A2E4A4';
+
+const CardTransactionOrdersScreen = () => {
+  const navigation = useNavigation();
+  const [orders, setOrders] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const fetchOrders = async () => {
+    try {
+      const res = await apiService.getCardTransactionOrders();
+      if (res.success) {
+        setOrders(Array.isArray(res.data) ? res.data : []);
+      } else {
+        console.warn(res.error);
+      }
+    } catch (e) {
+      console.warn(e.message);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchOrders();
+    }, [])
+  );
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    fetchOrders();
+  };
+
+  const handleItemPress = (item) => {
+    navigation.navigate('CardTransactionOrderDetails', { orderId: item.id });
+  };
+
+  const renderItem = ({ item }) => {
+    const cardNum = item.card_number || '';
+    const masked = cardNum ? `${cardNum.slice(0, 6)}******${cardNum.slice(-4)}` : '';
+    const created = item.created_at ? new Date(item.created_at).toLocaleDateString() : '';
+    const passportLine = item.passport_serie && item.passport_id ? `Pasport: ${item.passport_serie} ${item.passport_id}` : '';
+
+    return (
+      <TouchableOpacity style={styles.card} onPress={() => handleItemPress(item)}>
+        <View style={styles.circle}>
+          <Text style={styles.circleText}>{item.id}</Text>
+        </View>
+        <View style={styles.cardContent}>
+          <Text style={styles.cardNumber}>{masked}</Text>
+          {passportLine !== '' && <Text style={styles.passportText}>{passportLine}</Text>}
+          <Text style={styles.dateText}>{created}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  if (loading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color={COLORS.primary} />
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar style="dark" />
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.goBack()} style={{ paddingRight: 12 }}>
+          <Ionicons name="arrow-back" size={24} color={COLORS.textPrimary} />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Kart hereketleri</Text>
+      </View>
+      <FlatList
+        data={orders}
+        keyExtractor={(item) => item.id?.toString()}
+        renderItem={renderItem}
+        contentContainerStyle={orders.length === 0 && styles.emptyContainer}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        ListEmptyComponent={<Text style={styles.emptyText}>No orders yet</Text>}
+      />
+
+      {/* Floating Action Button */}
+      <TouchableOpacity
+        style={styles.fab}
+        onPress={() => navigation.navigate('CreateCardTransactionOrder')}
+      >
+        <Ionicons name="add" size={28} color={COLORS.white} />
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundSecondary,
+  },
+  centered: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: COLORS.textPrimary,
+  },
+  card: {
+    flexDirection: 'row',
+    backgroundColor: CARD_BG,
+    marginHorizontal: 24,
+    marginTop: 16,
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+  },
+  circle: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: CIRCLE_BG,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  circleText: {
+    color: COLORS.white,
+    fontWeight: '600',
+  },
+  cardContent: {
+    flex: 1,
+  },
+  cardNumber: {
+    fontWeight: '700',
+    color: COLORS.textPrimary,
+    marginBottom: 4,
+  },
+  dateText: {
+    color: COLORS.textSecondary,
+    fontSize: 12,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: 16,
+    color: COLORS.textSecondary,
+  },
+  fab: {
+    position: 'absolute',
+    bottom: 32,
+    right: 32,
+    backgroundColor: COLORS.primary,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 4,
+  },
+  passportText: {
+    color: COLORS.textSecondary,
+    fontSize: 14,
+    marginBottom: 2,
+  },
+});
+
+export default CardTransactionOrdersScreen;