loan remaning updata

src/screens/Loan/LoanRemainingOrdersScreen.js

@@ -6,6 +6,9 @@ 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 LoanRemainingOrdersScreen = () => {
   const navigation = useNavigation();
   const [orders, setOrders] = useState([]);
@@ -57,20 +60,25 @@ const LoanRemainingOrdersScreen = () => {
     setModalLoading(false);
   };
 
-  const renderItem = ({ item }) => (
-    <TouchableOpacity
-      style={styles.card}
-      onPress={() => handleItemPress(item)}
-    >
-      <View style={styles.cardIconWrapper}>
-        <Ionicons name="stats-chart" size={24} color={COLORS.primary} />
-      </View>
-      <View style={styles.cardContent}>
-        <Text style={styles.cardTitle}>{item.account_number}</Text>
-      </View>
-      <Ionicons name="information-circle" size={20} color={COLORS.gray[400]} />
-    </TouchableOpacity>
-  );
+  const renderItem = ({ item }) => {
+    const passportLine = `Pasport: ${item.passport_serie} ${item.passport_id}`;
+    const accountLabel = 'Karz hasaby:';
+    const created = item.created_at ? new Date(item.created_at).toLocaleDateString() : '';
+
+    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.passportText}>{passportLine}</Text>
+          <Text style={styles.accountLabel}>{accountLabel}</Text>
+          <Text style={styles.accountValue}>{item.account_number}</Text>
+          <Text style={styles.dateText}>{created}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  };
 
   if (loading) {
     return (
@@ -190,39 +198,45 @@ const styles = StyleSheet.create({
   },
   card: {
     flexDirection: 'row',
-    alignItems: 'center',
-    padding: 20,
-    borderRadius: 10,
-    backgroundColor: COLORS.white,
+    backgroundColor: CARD_BG,
     marginHorizontal: 24,
     marginTop: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    elevation: 2,
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
   },
-  cardIconWrapper: {
+  circle: {
     width: 40,
     height: 40,
     borderRadius: 20,
-    backgroundColor: COLORS.backgroundSecondary,
+    backgroundColor: CIRCLE_BG,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 16,
   },
+  circleText: {
+    color: COLORS.white,
+    fontWeight: '600',
+  },
   cardContent: {
     flex: 1,
   },
-  cardTitle: {
-    fontSize: 16,
-    fontWeight: '600',
+  passportText: {
+    fontWeight: '700',
     color: COLORS.textPrimary,
     marginBottom: 4,
   },
-  cardSubtitle: {
-    fontSize: 14,
+  accountLabel: {
     color: COLORS.textSecondary,
+    fontSize: 14,
+  },
+  accountValue: {
+    color: COLORS.textPrimary,
+    marginBottom: 4,
+  },
+  dateText: {
+    color: COLORS.textSecondary,
+    fontSize: 12,
   },
   emptyContainer: {
     flex: 1,