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} />}
       />