feat: create TransactionList component

- Display transactions with FlatList
- Add onDelete callback prop
- Show category, date, amount
- Conditional styling for income/expense
- Empty state handling

components/TransactionList.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
+import { COLORS, FONTS } from '../constants/theme';
+import { Transaction } from '../types';
+import { formatRupiah, formatDate } from '../utils/helpers';
+
+interface TransactionListProps {
+  transactions: Transaction[];
+  onDelete: (id: string) => void;
+}
+
+export const TransactionList: React.FC<TransactionListProps> = ({
+  transactions,
+  onDelete,
+}) => {
+  const renderItem = ({ item }: { item: Transaction }) => {
+    const isExpense = item.type === 'expense';
+    
+    return (
+      <View style={styles.item}>
+        <View style={styles.info}>
+          <Text style={styles.description}>{item.description}</Text>
+          <Text style={styles.category}>{item.category}</Text>
+          <Text style={styles.date}>{formatDate(item.date)}</Text>
+        </View>
+        <View style={styles.amountContainer}>
+          <Text style={[styles.amount, isExpense ? styles.expense : styles.income]}>
+            {isExpense ? '-' : '+'}{formatRupiah(item.amount)}
+          </Text>
+          <TouchableOpacity
+            style={styles.deleteButton}
+            onPress={() => onDelete(item.id)}
+          >
+            <Text style={styles.deleteText}>Hapus</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  };
+
+  if (transactions.length === 0) {
+    return (
+      <View style={styles.empty}>
+        <Text style={styles.emptyText}>Belum ada transaksi</Text>
+        <Text style={styles.emptySubtext}>
+          Tambahkan transaksi pertama Anda
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Riwayat Transaksi</Text>
+      <FlatList
+        data={transactions}
+        keyExtractor={(item) => item.id}
+        renderItem={renderItem}
+        scrollEnabled={false}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    marginTop: 0,
+  },
+  title: {
+    fontSize: FONTS.regular,
+    fontWeight: 'bold',
+    color: COLORS.text,
+    marginBottom: 12,
+  },
+  item: {
+    backgroundColor: COLORS.card,
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  info: {
+    flex: 1,
+  },
+  description: {
+    fontSize: FONTS.regular,
+    fontWeight: '600',
+    color: COLORS.text,
+  },
+  category: {
+    fontSize: FONTS.small,
+    color: COLORS.textSecondary,
+    marginTop: 2,
+  },
+  date: {
+    fontSize: FONTS.small,
+    color: COLORS.textSecondary,
+    marginTop: 2,
+  },
+  amountContainer: {
+    alignItems: 'flex-end',
+  },
+  amount: {
+    fontSize: FONTS.regular,
+    fontWeight: 'bold',
+  },
+  income: {
+    color: COLORS.income,
+  },
+  expense: {
+    color: COLORS.expense,
+  },
+  deleteButton: {
+    marginTop: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  deleteText: {
+    fontSize: FONTS.small,
+    color: COLORS.expense,
+  },
+  empty: {
+    margin: 16,
+    padding: 40,
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: FONTS.regular,
+    color: COLORS.textSecondary,
+  },
+  emptySubtext: {
+    fontSize: FONTS.small,
+    color: COLORS.textSecondary,
+    marginTop: 8,
+  },
+});