feat: create BalanceCard component

- Display income, expense, and total balance
- Use BalanceInfo props interface
- Conditional styling for income/expense colors

components/BalanceCard.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { COLORS, FONTS } from '../constants/theme';
+import { BalanceInfo } from '../types';
+import { formatRupiah } from '../utils/helpers';
+
+interface BalanceCardProps {
+  balance: BalanceInfo;
+}
+
+export const BalanceCard: React.FC<BalanceCardProps> = ({ balance }) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <View style={styles.col}>
+          <Text style={styles.label}>Pemasukan</Text>
+          <Text style={[styles.amount, styles.income]}>
+            +{formatRupiah(balance.income)}
+          </Text>
+        </View>
+        <View style={styles.col}>
+          <Text style={styles.label}>Pengeluaran</Text>
+          <Text style={[styles.amount, styles.expense]}>
+            -{formatRupiah(balance.expense)}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.divider} />
+      <View style={styles.totalContainer}>
+        <Text style={styles.totalLabel}>Total Saldo</Text>
+        <Text style={styles.totalAmount}>
+          {formatRupiah(balance.total)}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.card,
+    margin: 16,
+    padding: 20,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  col: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: FONTS.small,
+    color: COLORS.textSecondary,
+    marginBottom: 4,
+  },
+  amount: {
+    fontSize: FONTS.regular,
+    fontWeight: '600',
+  },
+  income: {
+    color: COLORS.income,
+  },
+  expense: {
+    color: COLORS.expense,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.border,
+    marginVertical: 16,
+  },
+  totalContainer: {
+    alignItems: 'center',
+  },
+  totalLabel: {
+    fontSize: FONTS.small,
+    color: COLORS.textSecondary,
+    marginBottom: 4,
+  },
+  totalAmount: {
+    fontSize: FONTS.xlarge,
+    fontWeight: 'bold',
+    color: COLORS.text,
+  },
+});