51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, FlatList } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './invoices.styles';
|
|
import { MOCK_INVOICES } from '../../mock-data/invoices';
|
|
import { useTheme } from '../../theme';
|
|
|
|
export const InvoicesScreen = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={MOCK_INVOICES}
|
|
keyExtractor={item => item.id}
|
|
contentContainerStyle={styles.listContent}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.card}>
|
|
<View style={styles.header}>
|
|
<View style={styles.titleWrapper}>
|
|
<Icon
|
|
name="card-outline"
|
|
size={20}
|
|
color={item.color}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.title}>{item.invoiceNo}</Text>
|
|
</View>
|
|
<Text style={styles.amount}>{item.amount}</Text>
|
|
</View>
|
|
<View style={styles.body}>
|
|
<Text style={styles.client}>Client: {item.client}</Text>
|
|
<Text style={styles.dueDate}>Due Date: {item.dueDate}</Text>
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<View
|
|
style={[styles.badge, { backgroundColor: `${item.color}15` }]}
|
|
>
|
|
<Text style={[styles.badgeText, { color: item.color }]}>
|
|
{item.status}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|