feat: Introduce financial goal and asset management with SQLite and NativeWind integration, new tab screens, and updated dependencies.

components/TransactionList.tsx

@@ -0,0 +1,51 @@
+import { FontAwesome } from '@expo/vector-icons';
+import { FlatList, Text, View } from 'react-native';
+import { Transaction } from '../types';
+
+interface TransactionListProps {
+    transactions: Transaction[];
+    onDelete?: (id: number) => void;
+}
+
+export default function TransactionList({ transactions, onDelete }: TransactionListProps) {
+    if (transactions.length === 0) {
+        return (
+            <View className="flex-1 justify-center items-center py-10">
+                <Text className="text-gray-400 text-lg">No transactions yet</Text>
+            </View>
+        );
+    }
+
+    return (
+        <FlatList
+            data={transactions}
+            keyExtractor={(item) => item.id.toString()}
+            contentContainerStyle={{ paddingBottom: 20 }}
+            renderItem={({ item }) => (
+                <View className="bg-white dark:bg-gray-800 p-4 mb-3 rounded-2xl shadow-sm flex-row items-center justify-between">
+                    <View className="flex-row items-center">
+                        <View className={`w-10 h-10 rounded-full items-center justify-center mr-4 ${item.type === 'expense' ? 'bg-red-100' : 'bg-green-100'}`}>
+                            <FontAwesome
+                                name={item.type === 'expense' ? 'arrow-down' : 'arrow-up'}
+                                size={16}
+                                color={item.type === 'expense' ? '#EF4444' : '#10B981'}
+                            />
+                        </View>
+                        <View>
+                            <Text className="font-bold text-gray-900 dark:text-white text-base">{item.category}</Text>
+                            <Text className="text-gray-500 text-xs">{item.date}</Text>
+                        </View>
+                    </View>
+                    <View className="items-end">
+                        <Text className={`font-bold text-base ${item.type === 'expense' ? 'text-red-500' : 'text-green-500'}`}>
+                            {item.type === 'expense' ? '-' : '+'}€{item.amount.toFixed(2)}
+                        </Text>
+                        {item.description && (
+                            <Text className="text-gray-400 text-xs max-w-[100px]" numberOfLines={1}>{item.description}</Text>
+                        )}
+                    </View>
+                </View>
+            )}
+        />
+    );
+}