65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, FlatList, TouchableOpacity, Linking } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './customers.styles';
|
|
import { MOCK_CUSTOMERS } from '../../mock-data/customers';
|
|
import { useTheme } from '../../theme';
|
|
|
|
export const CustomersScreen = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const handleCall = (phone: string) => {
|
|
Linking.openURL(`tel:${phone}`).catch(() => {});
|
|
};
|
|
|
|
const handleEmail = (email: string) => {
|
|
Linking.openURL(`mailto:${email}`).catch(() => {});
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={MOCK_CUSTOMERS}
|
|
keyExtractor={item => item.id}
|
|
contentContainerStyle={styles.listContent}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.customerCard}>
|
|
<View style={styles.cardHeader}>
|
|
<View>
|
|
<Text style={styles.customerName}>{item.name}</Text>
|
|
<Text style={styles.contactPerson}>
|
|
Contact: {item.contactPerson}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>
|
|
{item.activeProjects} active projects
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.cardFooter}>
|
|
<TouchableOpacity
|
|
style={[styles.actionButton, styles.callButton]}
|
|
onPress={() => handleCall(item.phone)}
|
|
>
|
|
<Icon name="call" size={16} color={colors.icon} />
|
|
<Text style={styles.callButtonText}>Call</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.actionButton, styles.emailButton]}
|
|
onPress={() => handleEmail(item.email)}
|
|
>
|
|
<Icon name="mail" size={16} color={colors.textSecondary} />
|
|
<Text style={styles.emailButtonText}>Email</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|