94 lines
2.1 KiB
TypeScript
94 lines
2.1 KiB
TypeScript
|
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,
|
||
|
|
},
|
||
|
|
});
|