init

src/components/TransactionItem.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {Transaction} from '../types';
+import {formatCurrency} from '../utils';
+import {useSettingsStore} from '../store';
+import {useTheme} from '../theme';
+
+interface TransactionItemProps {
+  transaction: Transaction;
+  onPress?: (transaction: Transaction) => void;
+}
+
+export const TransactionItem: React.FC<TransactionItemProps> = ({
+  transaction,
+  onPress,
+}) => {
+  const baseCurrency = useSettingsStore(s => s.baseCurrency);
+  const {colors} = useTheme();
+  const isExpense = transaction.type === 'expense';
+
+  return (
+    <Pressable
+      style={[styles.container, {backgroundColor: colors.surface}]}
+      onPress={() => onPress?.(transaction)}
+      android_ripple={{color: colors.primary + '12'}}>
+      <View
+        style={[
+          styles.iconCircle,
+          {backgroundColor: (transaction.categoryColor || '#95A5A6') + '18'},
+        ]}>
+        <Icon
+          name={transaction.categoryIcon || 'dots-horizontal'}
+          size={22}
+          color={transaction.categoryColor || '#95A5A6'}
+        />
+      </View>
+
+      <View style={styles.details}>
+        <Text style={[styles.categoryName, {color: colors.onSurface}]} numberOfLines={1}>
+          {transaction.categoryName || 'Uncategorized'}
+        </Text>
+        <Text style={[styles.meta, {color: colors.onSurfaceVariant}]} numberOfLines={1}>
+          {transaction.paymentMethod}
+          {transaction.note ? ` · ${transaction.note}` : ''}
+        </Text>
+      </View>
+
+      <View style={styles.amountContainer}>
+        <Text
+          style={[
+            styles.amount,
+            {color: isExpense ? colors.error : colors.success},
+          ]}>
+          {isExpense ? '-' : '+'}
+          {formatCurrency(transaction.amount, baseCurrency)}
+        </Text>
+        <Text style={[styles.date, {color: colors.onSurfaceVariant}]}>
+          {new Date(transaction.date).toLocaleDateString('en-IN', {
+            day: 'numeric',
+            month: 'short',
+          })}
+        </Text>
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+  },
+  iconCircle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  details: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  categoryName: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  meta: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  amountContainer: {
+    alignItems: 'flex-end',
+  },
+  amount: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  date: {
+    fontSize: 12,
+    marginTop: 2,
+  },
+});