feat: leads module - list, detail, add, convert to client, delete; leads section on dashboard
This commit is contained in:
Nemo
222
app/(app)/leads/[id].tsx
Normal file
222
app/(app)/leads/[id].tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import { View, Text, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { api } from '../../../services/api';
|
||||
import { Icon } from '../../../components/Icon';
|
||||
|
||||
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' },
|
||||
};
|
||||
|
||||
const STATUS_FLOW = ['NEW', 'CONTACTED', 'INTERESTED', 'CONVERTED', 'LOST'];
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value?: string | null }) {
|
||||
if (!value) return null;
|
||||
return (
|
||||
<View style={{ paddingVertical: 13, paddingHorizontal: 18, borderBottomWidth: 1, borderBottomColor: '#F1F5F9', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<Text style={{ fontSize: 14, color: '#64748B', fontWeight: '500' }}>{label}</Text>
|
||||
<Text style={{ fontSize: 14, color: '#1E293B', fontWeight: '600', maxWidth: '60%', textAlign: 'right' }}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LeadDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const qc = useQueryClient();
|
||||
|
||||
const { data: lead, isLoading, refetch } = useQuery({
|
||||
queryKey: ['lead', id],
|
||||
queryFn: () => api.get(`/api/v1/leads/${id}`).then(r => r.data),
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
const cfg = STATUS_CONFIG[lead?.status ?? 'NEW'] ?? STATUS_CONFIG.NEW;
|
||||
const isConverted = lead?.status === 'CONVERTED';
|
||||
|
||||
const updateStatus = async (status: string) => {
|
||||
try {
|
||||
await api.patch(`/api/v1/leads/${id}`, { status });
|
||||
await refetch();
|
||||
qc.invalidateQueries({ queryKey: ['leads'] });
|
||||
} catch {
|
||||
Alert.alert('Error', 'Could not update status.');
|
||||
}
|
||||
};
|
||||
|
||||
const confirmConvert = () => {
|
||||
Alert.alert(
|
||||
'Convert to Client?',
|
||||
`This will start the onboarding process for ${lead?.firstName} ${lead?.lastName}. They will be added to Clients and an installation ticket will be created.`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{ text: 'Convert & Onboard', style: 'default', onPress: convertLead },
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const convertLead = async () => {
|
||||
try {
|
||||
// Create client from lead
|
||||
const clientRes = await api.post('/api/v1/clients', {
|
||||
firstName: lead.firstName,
|
||||
lastName: lead.lastName !== '—' ? lead.lastName : '',
|
||||
phone: lead.phone,
|
||||
address: lead.address ?? '—',
|
||||
...(lead.email ? { email: lead.email } : {}),
|
||||
...(lead.areaId ? { areaId: lead.areaId } : {}),
|
||||
});
|
||||
const client = clientRes.data;
|
||||
|
||||
// Create installation ticket
|
||||
const ticketRes = await api.post('/api/v1/tickets', {
|
||||
clientId: client.id,
|
||||
subject: `New Installation — ${lead.firstName} ${lead.lastName !== '—' ? lead.lastName : ''}`.trim(),
|
||||
type: 'INSTALLATION',
|
||||
priority: 'NORMAL',
|
||||
});
|
||||
const ticket = ticketRes.data;
|
||||
|
||||
// Mark lead as CONVERTED
|
||||
await api.patch(`/api/v1/leads/${id}`, {
|
||||
status: 'CONVERTED',
|
||||
convertedClientId: client.id,
|
||||
});
|
||||
|
||||
qc.invalidateQueries({ queryKey: ['leads'] });
|
||||
qc.invalidateQueries({ queryKey: ['clients'] });
|
||||
qc.invalidateQueries({ queryKey: ['tasks'] });
|
||||
|
||||
Alert.alert(
|
||||
'Lead Converted! 🎉',
|
||||
`${lead.firstName} is now a client with an installation ticket created.`,
|
||||
[{
|
||||
text: 'View Installation Ticket',
|
||||
onPress: () => {
|
||||
router.replace('/(app)/tasks');
|
||||
setTimeout(() => router.push(`/(app)/tasks/${ticket.id}`), 300);
|
||||
},
|
||||
}, {
|
||||
text: 'Done',
|
||||
onPress: () => router.back(),
|
||||
}]
|
||||
);
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data?.message ?? 'Could not convert lead.';
|
||||
Alert.alert('Error', Array.isArray(msg) ? msg.join('\n') : msg);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
Alert.alert(
|
||||
'Delete Lead?',
|
||||
`Are you sure you want to delete ${lead?.firstName} ${lead?.lastName}? This cannot be undone.`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{ text: 'Delete', style: 'destructive', onPress: deleteLead },
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const deleteLead = async () => {
|
||||
try {
|
||||
await api.delete(`/api/v1/leads/${id}`);
|
||||
qc.invalidateQueries({ queryKey: ['leads'] });
|
||||
router.back();
|
||||
} catch {
|
||||
Alert.alert('Error', 'Could not delete lead.');
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#F8FAFC', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ActivityIndicator color="#0891B2" size="large" />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#F8FAFC' }} edges={['top']}>
|
||||
{/* Header */}
|
||||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 16, paddingVertical: 14, flexDirection: 'row', alignItems: 'center' }}>
|
||||
<TouchableOpacity onPress={() => router.back()} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={{ marginRight: 14 }}>
|
||||
<Icon name="arrow-left" size={22} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 20, fontWeight: '800', color: '#fff' }}>
|
||||
{lead?.firstName} {lead?.lastName !== '—' ? lead?.lastName : ''}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 14, color: '#A5F3FC', marginTop: 1 }}>Lead</Text>
|
||||
</View>
|
||||
<View style={{ backgroundColor: cfg.bg, borderRadius: 20, paddingHorizontal: 12, paddingVertical: 5 }}>
|
||||
<Text style={{ fontSize: 13, fontWeight: '700', color: cfg.color }}>{cfg.label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
|
||||
{/* Info card */}
|
||||
<View style={{ backgroundColor: '#fff', borderRadius: 16, marginBottom: 16, borderWidth: 1, borderColor: '#F1F5F9', overflow: 'hidden' }}>
|
||||
<InfoRow label="Phone" value={lead?.phone} />
|
||||
<InfoRow label="Email" value={lead?.email} />
|
||||
<InfoRow label="Address" value={lead?.address} />
|
||||
<InfoRow label="Area" value={lead?.area?.name} />
|
||||
<InfoRow label="Notes" value={lead?.notes} />
|
||||
<InfoRow label="Added" value={lead?.createdAt ? new Date(lead.createdAt).toLocaleDateString('en-PH', { dateStyle: 'medium' }) : null} />
|
||||
</View>
|
||||
|
||||
{/* Status update */}
|
||||
{!isConverted && (
|
||||
<View style={{ backgroundColor: '#fff', borderRadius: 16, marginBottom: 16, padding: 16, borderWidth: 1, borderColor: '#F1F5F9' }}>
|
||||
<Text style={{ fontSize: 13, fontWeight: '700', color: '#94A3B8', marginBottom: 12, textTransform: 'uppercase', letterSpacing: 0.5 }}>Update Status</Text>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
|
||||
{STATUS_FLOW.filter(s => s !== 'CONVERTED').map(s => {
|
||||
const c = STATUS_CONFIG[s];
|
||||
const isActive = lead?.status === s;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={s} onPress={() => !isActive && updateStatus(s)}
|
||||
style={{ paddingHorizontal: 14, paddingVertical: 8, borderRadius: 20, borderWidth: 1.5,
|
||||
borderColor: isActive ? c.color : '#E2E8F0',
|
||||
backgroundColor: isActive ? c.bg : '#F8FAFC' }}
|
||||
>
|
||||
<Text style={{ fontSize: 13, fontWeight: '700', color: isActive ? c.color : '#94A3B8' }}>{c.label}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
<View style={{ gap: 12 }}>
|
||||
{!isConverted && (
|
||||
<TouchableOpacity
|
||||
onPress={confirmConvert}
|
||||
style={{ backgroundColor: '#059669', borderRadius: 14, paddingVertical: 18, alignItems: 'center', flexDirection: 'row', justifyContent: 'center', gap: 8 }}
|
||||
>
|
||||
<Text style={{ fontSize: 17, fontWeight: '700', color: '#fff' }}>🚀 Convert to Client & Schedule Install</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{isConverted && (
|
||||
<View style={{ backgroundColor: '#F0FDF4', borderRadius: 14, paddingVertical: 18, alignItems: 'center', borderWidth: 1.5, borderColor: '#86EFAC' }}>
|
||||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#166534' }}>✓ Already Converted to Client</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={confirmDelete}
|
||||
style={{ backgroundColor: '#FEF2F2', borderRadius: 14, paddingVertical: 18, alignItems: 'center', borderWidth: 1.5, borderColor: '#FCA5A5' }}
|
||||
>
|
||||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#DC2626' }}>🗑 Delete Lead</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user