209 lines
10 KiB
TypeScript
209 lines
10 KiB
TypeScript
import { useState } from 'react';
|
||
import {
|
||
View, Text, FlatList, TouchableOpacity, TextInput,
|
||
ActivityIndicator, RefreshControl, Alert, Modal,
|
||
KeyboardAvoidingView, Platform, ScrollView,
|
||
} from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||
import { router } from 'expo-router';
|
||
import { api } from '../../../services/api';
|
||
import { useAuthStore } from '../../../stores/authStore';
|
||
|
||
const STATUS_CONFIG: Record<string, { label: string; color: string; bg: string }> = {
|
||
NEW: { label: 'New', color: '#0891B2', bg: '#ECFEFF' },
|
||
CONTACTED: { label: 'Contacted', color: '#D97706', bg: '#FEF3C7' },
|
||
INTERESTED: { label: 'Interested', color: '#7C3AED', bg: '#F5F3FF' },
|
||
CONVERTED: { label: 'Converted', color: '#166534', bg: '#DCFCE7' },
|
||
LOST: { label: 'Lost', color: '#6B7280', bg: '#F1F5F9' },
|
||
};
|
||
|
||
export default function LeadsScreen() {
|
||
const { user } = useAuthStore();
|
||
const qc = useQueryClient();
|
||
const [search, setSearch] = useState('');
|
||
const [showAdd, setShowAdd] = useState(false);
|
||
const [newName, setNewName] = useState('');
|
||
const [newPhone, setNewPhone] = useState('');
|
||
const [newAddress, setNewAddress] = useState('');
|
||
const [newNotes, setNewNotes] = useState('');
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
const { data, isLoading, refetch, isRefetching } = useQuery({
|
||
queryKey: ['leads'],
|
||
queryFn: () => api.get('/api/v1/leads?limit=100').then(r => r.data?.data ?? r.data ?? []),
|
||
});
|
||
|
||
const leads: any[] = (data ?? []).filter((l: any) =>
|
||
`${l.firstName} ${l.lastName} ${l.phone}`.toLowerCase().includes(search.toLowerCase())
|
||
);
|
||
|
||
const addLead = async () => {
|
||
const parts = newName.trim().split(' ');
|
||
const firstName = parts[0] ?? '';
|
||
const lastName = parts.slice(1).join(' ') || '—';
|
||
if (!firstName) { Alert.alert('Required', 'Enter the lead\'s name.'); return; }
|
||
if (!newPhone.trim()) { Alert.alert('Required', 'Enter a contact number.'); return; }
|
||
setSaving(true);
|
||
try {
|
||
await api.post('/api/v1/leads', {
|
||
firstName, lastName,
|
||
phone: newPhone.trim(),
|
||
...(newAddress.trim() ? { address: newAddress.trim() } : {}),
|
||
...(newNotes.trim() ? { notes: newNotes.trim() } : {}),
|
||
});
|
||
setShowAdd(false);
|
||
setNewName(''); setNewPhone(''); setNewAddress(''); setNewNotes('');
|
||
qc.invalidateQueries({ queryKey: ['leads'] });
|
||
refetch();
|
||
} catch (e: any) {
|
||
Alert.alert('Error', e?.response?.data?.message ?? 'Could not save lead.');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const renderLead = ({ item: l }: { item: any }) => {
|
||
const cfg = STATUS_CONFIG[l.status] ?? STATUS_CONFIG.NEW;
|
||
return (
|
||
<TouchableOpacity
|
||
onPress={() => router.push(`/(app)/leads/${l.id}`)}
|
||
activeOpacity={0.7}
|
||
style={{ backgroundColor: '#fff', borderRadius: 14, padding: 16, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9', flexDirection: 'row', alignItems: 'center' }}
|
||
>
|
||
{/* Avatar circle */}
|
||
<View style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: '#ECFEFF', alignItems: 'center', justifyContent: 'center', marginRight: 14 }}>
|
||
<Text style={{ fontSize: 18, fontWeight: '800', color: '#0891B2' }}>
|
||
{l.firstName?.[0]?.toUpperCase() ?? '?'}
|
||
</Text>
|
||
</View>
|
||
<View style={{ flex: 1 }}>
|
||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A' }}>
|
||
{l.firstName} {l.lastName !== '—' ? l.lastName : ''}
|
||
</Text>
|
||
<Text style={{ fontSize: 14, color: '#64748B', marginTop: 2 }}>{l.phone}</Text>
|
||
{l.notes ? <Text style={{ fontSize: 13, color: '#94A3B8', marginTop: 2 }} numberOfLines={1}>{l.notes}</Text> : null}
|
||
</View>
|
||
<View style={{ backgroundColor: cfg.bg, borderRadius: 20, paddingHorizontal: 10, paddingVertical: 4 }}>
|
||
<Text style={{ fontSize: 12, fontWeight: '700', color: cfg.color }}>{cfg.label}</Text>
|
||
</View>
|
||
</TouchableOpacity>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<SafeAreaView style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
||
{/* Header */}
|
||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 20, flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>
|
||
<View>
|
||
<Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Leads</Text>
|
||
<Text style={{ color: '#A5F3FC', fontSize: 15, marginTop: 2 }}>{leads.length} prospect{leads.length !== 1 ? 's' : ''}</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
onPress={() => setShowAdd(true)}
|
||
style={{ backgroundColor: '#fff', borderRadius: 20, paddingHorizontal: 14, paddingVertical: 8, flexDirection: 'row', alignItems: 'center', gap: 6 }}
|
||
>
|
||
<Text style={{ fontSize: 18, color: '#0891B2', fontWeight: '800', lineHeight: 20 }}>+</Text>
|
||
<Text style={{ fontSize: 14, fontWeight: '700', color: '#0891B2' }}>Add Lead</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
{/* Search */}
|
||
<View style={{ backgroundColor: '#fff', paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F1F5F9' }}>
|
||
<View style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 12, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14 }}>
|
||
<TextInput
|
||
style={{ flex: 1, paddingVertical: 13, fontSize: 16, color: '#0F172A' }}
|
||
placeholder="Search by name or phone"
|
||
placeholderTextColor="#94A3B8"
|
||
value={search} onChangeText={setSearch}
|
||
/>
|
||
{search.length > 0 && (
|
||
<TouchableOpacity onPress={() => setSearch('')}>
|
||
<View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: '#CBD5E1', alignItems: 'center', justifyContent: 'center' }}>
|
||
<Text style={{ color: '#fff', fontSize: 12, fontWeight: '800' }}>×</Text>
|
||
</View>
|
||
</TouchableOpacity>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
{isLoading ? (
|
||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||
<ActivityIndicator color="#0891B2" size="large" />
|
||
</View>
|
||
) : (
|
||
<FlatList
|
||
data={leads}
|
||
keyExtractor={i => i.id}
|
||
renderItem={renderLead}
|
||
contentContainerStyle={{ padding: 16, paddingBottom: 40 }}
|
||
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#0891B2" />}
|
||
ListEmptyComponent={
|
||
<View style={{ alignItems: 'center', paddingTop: 60 }}>
|
||
<Text style={{ fontSize: 40, marginBottom: 12 }}>👥</Text>
|
||
<Text style={{ fontSize: 17, fontWeight: '700', color: '#475569' }}>No leads yet</Text>
|
||
<Text style={{ fontSize: 14, color: '#94A3B8', marginTop: 4 }}>Tap + Add Lead to record a prospect</Text>
|
||
</View>
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{/* Add Lead Modal */}
|
||
<Modal visible={showAdd} transparent animationType="slide" onRequestClose={() => setShowAdd(false)}>
|
||
<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
|
||
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}>
|
||
<TouchableOpacity style={{ flex: 1 }} onPress={() => setShowAdd(false)} />
|
||
<ScrollView
|
||
keyboardShouldPersistTaps="handled"
|
||
style={{ backgroundColor: '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24 }}
|
||
contentContainerStyle={{ padding: 24, paddingBottom: 48 }}
|
||
bounces={false}
|
||
>
|
||
<View style={{ width: 40, height: 4, backgroundColor: '#E2E8F0', borderRadius: 2, alignSelf: 'center', marginBottom: 20 }} />
|
||
<Text style={{ fontSize: 20, fontWeight: '800', color: '#1E293B', marginBottom: 20 }}>New Lead</Text>
|
||
|
||
<Text style={{ fontSize: 13, fontWeight: '600', color: '#64748B', marginBottom: 6 }}>Full Name <Text style={{ color: '#DC2626' }}>*</Text></Text>
|
||
<TextInput
|
||
value={newName} onChangeText={setNewName}
|
||
placeholder="Juan Dela Cruz"
|
||
autoCapitalize="words"
|
||
style={{ borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 14, paddingVertical: 13, fontSize: 16, color: '#1E293B', marginBottom: 14 }}
|
||
/>
|
||
|
||
<Text style={{ fontSize: 13, fontWeight: '600', color: '#64748B', marginBottom: 6 }}>Contact Number <Text style={{ color: '#DC2626' }}>*</Text></Text>
|
||
<TextInput
|
||
value={newPhone} onChangeText={setNewPhone}
|
||
placeholder="09XXXXXXXXX"
|
||
keyboardType="phone-pad"
|
||
style={{ borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 14, paddingVertical: 13, fontSize: 16, color: '#1E293B', marginBottom: 14 }}
|
||
/>
|
||
|
||
<Text style={{ fontSize: 13, fontWeight: '600', color: '#64748B', marginBottom: 6 }}>Address (optional)</Text>
|
||
<TextInput
|
||
value={newAddress} onChangeText={setNewAddress}
|
||
placeholder="Sitio, Barangay, Municipality..."
|
||
style={{ borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 14, paddingVertical: 13, fontSize: 16, color: '#1E293B', marginBottom: 14 }}
|
||
/>
|
||
|
||
<Text style={{ fontSize: 13, fontWeight: '600', color: '#64748B', marginBottom: 6 }}>Notes (optional)</Text>
|
||
<TextInput
|
||
value={newNotes} onChangeText={setNewNotes}
|
||
placeholder="Location, interest, remarks..."
|
||
multiline
|
||
style={{ borderWidth: 1, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 14, paddingVertical: 12, fontSize: 15, color: '#1E293B', marginBottom: 20, minHeight: 72, textAlignVertical: 'top' }}
|
||
/>
|
||
|
||
<TouchableOpacity
|
||
onPress={addLead} disabled={saving}
|
||
style={{ backgroundColor: saving ? '#94A3B8' : '#0891B2', borderRadius: 14, paddingVertical: 17, alignItems: 'center' }}
|
||
>
|
||
{saving ? <ActivityIndicator color="#fff" /> : <Text style={{ fontSize: 16, fontWeight: '700', color: '#fff' }}>Save Lead</Text>}
|
||
</TouchableOpacity>
|
||
</ScrollView>
|
||
</View>
|
||
</KeyboardAvoidingView>
|
||
</Modal>
|
||
</SafeAreaView>
|
||
);
|
||
}
|