97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
Text,
|
|
View,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './leads.styles';
|
|
import { useTheme } from '@theme';
|
|
import { useAppDispatch, useAppSelector, RootState } from '@store';
|
|
import { getLeads } from './thunk';
|
|
import { LeadItem } from '@interfaces';
|
|
import { LeadItemCard, SearchInput, Loader } from '@components';
|
|
import { LeadsStackParamList } from '../../navigation/leadsStack';
|
|
import { route } from '@utils';
|
|
|
|
type LeadsScreenNavigationProp = NativeStackNavigationProp<
|
|
LeadsStackParamList,
|
|
'leads'
|
|
>;
|
|
|
|
export const LeadsScreen = () => {
|
|
const dispatch = useAppDispatch();
|
|
const navigation = useNavigation<LeadsScreenNavigationProp>();
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
const { items, loading, error } = useAppSelector(
|
|
(state: RootState) => state.leads,
|
|
);
|
|
const user_data = useAppSelector((state: RootState) => state.auth.user_data);
|
|
|
|
useEffect(() => {
|
|
if (user_data?.staffid) {
|
|
dispatch(getLeads({ leadId: null, staffid: user_data.staffid }));
|
|
}
|
|
}, [dispatch, user_data]);
|
|
|
|
const filteredLeads = searchTerm
|
|
? items.filter(
|
|
lead =>
|
|
lead.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
lead.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
lead.email.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
)
|
|
: items;
|
|
|
|
const handleLeadPress = (lead: LeadItem) => {
|
|
// Navigate to lead details screen
|
|
navigation.navigate(route.leadDetails, { lead });
|
|
};
|
|
|
|
const renderLead = ({ item }: { item: LeadItem }) => (
|
|
<LeadItemCard item={item} onPress={() => handleLeadPress(item)} />
|
|
);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<SearchInput
|
|
value={searchTerm}
|
|
onChangeText={setSearchTerm}
|
|
placeholder="Search leads, companies, emails..."
|
|
style={styles.searchInput}
|
|
/>
|
|
<TouchableOpacity style={styles.filterButton}>
|
|
<Icon name="filter-outline" size={20} color={colors.text} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{loading ? (
|
|
<Loader message="Loading leads..." />
|
|
) : error ? (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
</View>
|
|
) : (
|
|
<FlatList
|
|
data={filteredLeads}
|
|
keyExtractor={item => item.id}
|
|
contentContainerStyle={styles.listContent}
|
|
renderItem={renderLead}
|
|
ListEmptyComponent={() => (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>No leads available.</Text>
|
|
</View>
|
|
)}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|