85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './leadItemCard.styles';
|
|
import { LeadItemCardProps } from './leadItemCard.props';
|
|
import { getInitials, handleEmailPress, handlePhonePress, formatDate } from '@utils';
|
|
|
|
export const LeadItemCard: React.FC<LeadItemCardProps> = ({ item, onPress }) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const displayName = item.name || 'No Name';
|
|
const initials = getInitials(displayName);
|
|
const accent = item.color?.startsWith('#') ? item.color : colors.icon;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={onPress ? 0.8 : 1}
|
|
onPress={onPress}
|
|
style={styles.customerCard}>
|
|
<View style={styles.cardHeader}>
|
|
<View style={styles.cardHeaderLeft}>
|
|
<View style={[styles.avatarCircle, { backgroundColor: accent }]}>
|
|
<Text style={styles.avatarInitial}>{initials}</Text>
|
|
</View>
|
|
<View style={styles.cardInfo}>
|
|
<Text style={styles.customerName} numberOfLines={1}>
|
|
{displayName}
|
|
</Text>
|
|
{item.company ? (
|
|
<Text style={styles.contactPerson} numberOfLines={1}>
|
|
{item.company}
|
|
</Text>
|
|
) : null}
|
|
<Text style={styles.location} numberOfLines={1}>
|
|
<Icon name="call-outline" size={11} color={colors.textMuted} />
|
|
{' '}{item.phonenumber || 'N/A'}{' • '}
|
|
<Icon name="mail-outline" size={11} color={colors.textMuted} />
|
|
{' '}{item.email || 'N/A'}
|
|
</Text>
|
|
{item.source_name || item.source || item.dateadded ? (
|
|
<Text style={styles.location} numberOfLines={1}>
|
|
{item.source_name || item.source ? (
|
|
<>
|
|
<Icon name="radio-outline" size={11} color={colors.textMuted} />
|
|
{' '}{item.source_name || item.source}
|
|
</>
|
|
) : null}
|
|
{item.dateadded ? ` • ${formatDate(item.dateadded)}` : ''}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.cardHeaderRight}>
|
|
{item.status_name || item.status ? (
|
|
<View style={[styles.badge, { backgroundColor: `${accent}15` }]}>
|
|
<Text style={[styles.badgeText, { color: accent }]}>
|
|
{item.status_name || item.status}
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.cardFooter}>
|
|
<TouchableOpacity
|
|
style={[styles.actionButton, styles.callButton, { backgroundColor: `${accent}10` }]}
|
|
onPress={() => handlePhonePress(item.phonenumber)}>
|
|
<Icon name="call" size={15} color={accent} />
|
|
<Text style={[styles.callButtonText, { color: accent }]}>Call</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.actionButton, styles.emailButton]}
|
|
onPress={() => handleEmailPress(item.email)}>
|
|
<Icon name="mail" size={15} color={colors.textSecondary} />
|
|
<Text style={styles.emailButtonText}>Email</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|