67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import React, { memo } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import { useTheme, fontFamily } from '../../../theme';
|
|
import { formatCurrency } from '../../../utils/formatters';
|
|
import type { LoanEmiScheduleItem } from '../../../types/app';
|
|
|
|
interface EmiScheduleRowProps {
|
|
item: LoanEmiScheduleItem;
|
|
isHeader?: boolean;
|
|
}
|
|
|
|
const EmiScheduleRowComponent = ({ item, isHeader }: EmiScheduleRowProps) => {
|
|
const theme = useTheme();
|
|
|
|
if (isHeader) {
|
|
return (
|
|
<View style={[styles.row, styles.headerRow, { borderBottomColor: theme.colors.cardBorder }]}>
|
|
<Text style={[styles.cell, styles.monthCell, styles.headerText, { color: theme.colors.textSecondary }]}>Month</Text>
|
|
<Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>EMI</Text>
|
|
<Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>Principal</Text>
|
|
<Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>Interest</Text>
|
|
<Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>Balance</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.row, { borderBottomColor: theme.colors.cardBorder }]}>
|
|
<Text style={[styles.cell, styles.monthCell, { color: theme.colors.textPrimary }]}>{item.month}</Text>
|
|
<Text style={[styles.cell, { color: theme.colors.textPrimary }]}>{formatCurrency(item.emiAmount)}</Text>
|
|
<Text style={[styles.cell, { color: theme.colors.success }]}>{formatCurrency(item.principalComponent)}</Text>
|
|
<Text style={[styles.cell, { color: theme.colors.warning }]}>{formatCurrency(item.interestComponent)}</Text>
|
|
<Text style={[styles.cell, { color: theme.colors.textSecondary }]}>{formatCurrency(item.outstandingAfter)}</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
flexDirection: 'row',
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 1,
|
|
},
|
|
headerRow: {
|
|
paddingVertical: 8,
|
|
borderBottomWidth: 2,
|
|
},
|
|
cell: {
|
|
flex: 1,
|
|
fontSize: 11,
|
|
fontFamily: fontFamily.medium,
|
|
textAlign: 'right',
|
|
},
|
|
monthCell: {
|
|
flex: 0.5,
|
|
textAlign: 'center',
|
|
},
|
|
headerText: {
|
|
fontSize: 10,
|
|
fontFamily: fontFamily.bold,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.3,
|
|
},
|
|
});
|
|
|
|
export const EmiScheduleRow = memo(EmiScheduleRowComponent);
|