Implement transaction fetching and display in HomeScreen, update TransactionList for localization and improved data handling

src/components/TransactionList.js

@@ -7,13 +7,13 @@ const TransactionList = ({ transactions }) => {
   if (!transactions || transactions.length === 0) {
     return (
       <View style={styles.container}>
-        <Text style={styles.emptyText}>No transactions yet.</Text>
+        <Text style={styles.emptyText}>Soňky 10 günde kart hereketleri ýok...</Text>
       </View>
     );
   }
 
   const groupedTransactions = transactions.reduce((acc, transaction) => {
-    const date = new Date(transaction.date).toLocaleDateString('en-US', {
+    const date = new Date(transaction.date).toLocaleDateString('tk', {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
@@ -36,7 +36,7 @@ const TransactionList = ({ transactions }) => {
       </View>
       <View style={styles.transactionDetails}>
         <Text style={styles.transactionTitle}>{item.description}</Text>
-        <Text style={styles.transactionDate}>{new Date(item.date).toLocaleTimeString()}</Text>
+        <Text style={styles.transactionDate}>{item.time ?? '-'}</Text>
       </View>
       <Text
         style={[
@@ -56,7 +56,7 @@ const TransactionList = ({ transactions }) => {
       <FlatList
         data={groupedTransactions[date]}
         renderItem={renderTransactionItem}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={(item) => item.id?.toString()}
         scrollEnabled={false}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />

src/screens/Main/HomeScreen.js

@@ -110,7 +110,8 @@ const HomeScreen = () => {
   const [cardBalanceError, setCardBalanceError] = useState(null);
   const [isBalanceVisible, setIsBalanceVisible] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
-  const [transactions, setTransactions] = useState(STATIC_TRANSACTIONS);
+  const [transactions, setTransactions] = useState([]);
+  const [loadingTransactions, setLoadingTransactions] = useState(true);
 
   const showBalanceCard = !loadingCardBalance && cardBalanceError === null && cardBalance !== null;
 
@@ -140,10 +141,12 @@ const HomeScreen = () => {
       // Ensure user has filled all required card & passport fields
       if (!user?.passport_serie || !user?.passport_id || !user?.card_number || !user?.card_month || !user?.card_year) {
         setLoadingCardBalance(false);
+        setLoadingTransactions(false);
         return;
       }
 
       setLoadingCardBalance(true);
+      setLoadingTransactions(true);
 
       try {
         const res = await apiService.getCardBalanceQuickCheck();
@@ -165,6 +168,19 @@ const HomeScreen = () => {
       } finally {
         setLoadingCardBalance(false);
       }
+
+      try {
+        const transRes = await apiService.getCardTransactionsLastMonth();
+        if (transRes.success) {
+          setTransactions(transRes.data || []);
+        } else {
+          console.warn('Failed to fetch transactions:', transRes.error);
+        }
+      } catch (e) {
+        console.warn('Error fetching transactions:', e);
+      } finally {
+        setLoadingTransactions(false);
+      }
     };
 
     fetchCardData();
@@ -189,6 +205,8 @@ const HomeScreen = () => {
         if (!user?.passport_serie || !user?.passport_id || !user?.card_number || !user?.card_month || !user?.card_year) {
           setCardBalance(null); // Clear previous balance if conditions are not met
           setCardBalanceError(null);
+          setTransactions([]);
+          setLoadingTransactions(false);
           return;
         }
         try {
@@ -208,6 +226,16 @@ const HomeScreen = () => {
         } catch (e) {
           console.warn('Error fetching card balance during refresh:', e);
         }
+        try {
+          const transRes = await apiService.getCardTransactionsLastMonth();
+          if (transRes.success) {
+            setTransactions(transRes.data || []);
+          } else {
+            console.warn('Failed to fetch transactions during refresh:', transRes.error);
+          }
+        } catch (e) {
+          console.warn('Error fetching transactions during refresh:', e);
+        }
       })(),
     ]);
     setRefreshing(false);
@@ -275,12 +303,16 @@ const HomeScreen = () => {
         {showBalanceCard && (
           <View style={styles.section}>
             <View style={styles.sectionHeader}>
-              <Text style={styles.sectionTitle}>Transactions</Text>
+              <Text style={styles.sectionTitle}>Kart hereketleri</Text>
               <TouchableOpacity>
-                <Text style={styles.seeAllText}>See All</Text>
+                {/* <Text style={styles.seeAllText}>Hemmesi</Text> */}
               </TouchableOpacity>
             </View>
-            <TransactionList transactions={transactions} />
+            {loadingTransactions ? (
+              <ActivityIndicator color={COLORS.primary} style={{ marginTop: 16 }} />
+            ) : (
+              <TransactionList transactions={transactions} />
+            )}
           </View>
         )}
       </ScrollView>

src/services/apiService.js

@@ -67,6 +67,37 @@ class ApiService {
     return authService.getTransactions(page, limit);
   }
 
+  async getCardTransactionsLastMonth() {
+    try {
+      const response = await authService.getCardTransactionsLastMonth();
+      if (response && response.data && Array.isArray(response.data.transactions)) {
+        const mappedTransactions = response.data.transactions.map((t, index) => ({
+          id: `${t.rrn}-${index}`,
+          type: t.sign === '-' ? 'debit' : 'credit',
+          description: t.binfo || t.opername,
+          date: `${t.operdate}`,
+          time: t.trantime,
+          amount: t.currOperSum,
+          currency: t.currCode,
+        })).reverse();
+        return {
+          success: true,
+          data: mappedTransactions,
+        };
+      }
+      console.warn('Invalid transaction data structure:', response);
+      return {
+        success: false,
+        error: 'Could not parse transaction data.',
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error.message,
+      };
+    }
+  }
+
   // Transfer and payments
   async transferMoney(data) {
     return authService.transferMoney(data);

src/services/authService.js

@@ -162,6 +162,10 @@ class AuthService {
     return this.makeRequest(`/user/cards/${cardId}/unblock`, null, true);
   }
 
+  async getCardTransactionsLastMonth() {
+    return this.makeRequest('/card-transactions-last-month', null, true, 'GET');
+  }
+
   async changePassword(currentPassword, newPassword) {
     return this.makeRequest('/user/change-password', {
       current_password: currentPassword,