feat: Sprint 1 — Onboarding screen, user persistence, Contact management (list, add, edit, delete, detail, search, filter)
This commit is contained in:
root
106
components/contacts/AddContactSheet.tsx
Normal file
106
components/contacts/AddContactSheet.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
|
||||
import { useState } from 'react';
|
||||
import { X } from 'lucide-react-native';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { useUserStore } from '@/store/useUserStore';
|
||||
import { getDatabase } from '@/lib/database';
|
||||
import { newContactId } from '@/lib/contactHelpers';
|
||||
|
||||
const STATUS_OPTIONS = ['Active', 'Return Visit', 'Bible Study', 'Not Interested', 'Do Not Call'];
|
||||
const CATEGORY_OPTIONS = ['Adult', 'Teenager', 'Kid'];
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export function AddContactSheet({ visible, onClose, onSaved }: Props) {
|
||||
const user = useUserStore((s) => s.user);
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [address, setAddress] = useState('');
|
||||
const [status, setStatus] = useState('Active');
|
||||
const [category, setCategory] = useState('Adult');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
function reset() {
|
||||
setFullName(''); setAddress(''); setStatus('Active');
|
||||
setCategory('Adult'); setNotes(''); setErrors({});
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const errs: Record<string, string> = {};
|
||||
if (!fullName.trim()) errs.fullName = 'Name is required';
|
||||
if (Object.keys(errs).length) { setErrors(errs); return; }
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const db = await getDatabase();
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const id = newContactId();
|
||||
await db.runAsync(
|
||||
`INSERT INTO contacts (id, owner_id, full_name, address, category, status, tags, notes, household_count, created_at, updated_at)
|
||||
VALUES (?, ?, ?, ?, ?, ?, '[]', ?, 1, ?, ?)`,
|
||||
[id, user?.id ?? 'unknown', fullName.trim(), address.trim() || null, category, status, notes.trim() || null, now, now]
|
||||
);
|
||||
reset();
|
||||
onSaved();
|
||||
} catch (e) {
|
||||
console.error('Save contact error:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
|
||||
<View className="flex-1 bg-secondary">
|
||||
{/* Header */}
|
||||
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
|
||||
<TouchableOpacity onPress={() => { reset(); onClose(); }}>
|
||||
<X size={22} color="#2C3E50" />
|
||||
</TouchableOpacity>
|
||||
<Text className="text-charcoal font-semibold text-lg">New Contact</Text>
|
||||
<View style={{ width: 22 }} />
|
||||
</View>
|
||||
|
||||
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
|
||||
<Input label="Full Name *" placeholder="e.g. Maria Santos" value={fullName} onChangeText={(t) => { setFullName(t); setErrors((e) => ({ ...e, fullName: '' })); }} error={errors.fullName} />
|
||||
<Input label="Address" placeholder="e.g. 123 Rizal St, Barangay..." value={address} onChangeText={setAddress} />
|
||||
|
||||
{/* Status */}
|
||||
<Text className="text-charcoal font-medium mb-2">Status</Text>
|
||||
<View className="flex-row flex-wrap gap-2 mb-4">
|
||||
{STATUS_OPTIONS.map((s) => (
|
||||
<TouchableOpacity key={s} onPress={() => setStatus(s)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
|
||||
<Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Category */}
|
||||
<Text className="text-charcoal font-medium mb-2">Category</Text>
|
||||
<View className="flex-row gap-2 mb-4">
|
||||
{CATEGORY_OPTIONS.map((c) => (
|
||||
<TouchableOpacity key={c} onPress={() => setCategory(c)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
|
||||
<Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Input label="Notes" placeholder="Any additional notes..." value={notes} onChangeText={setNotes} multiline numberOfLines={3} />
|
||||
<View className="h-8" />
|
||||
</ScrollView>
|
||||
|
||||
<View className="px-4 py-4 border-t border-gray-200 bg-white">
|
||||
<Button label="Save Contact" onPress={handleSave} loading={loading} />
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
42
components/contacts/ContactCard.tsx
Normal file
42
components/contacts/ContactCard.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { View, Text, TouchableOpacity } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { ChevronRight } from 'lucide-react-native';
|
||||
import { Contact } from '@/store/useContactStore';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
'Active': 'bg-green-100 text-green-700',
|
||||
'Return Visit': 'bg-blue-100 text-blue-700',
|
||||
'Bible Study': 'bg-purple-100 text-purple-700',
|
||||
'Not Interested': 'bg-gray-100 text-gray-500',
|
||||
'Do Not Call': 'bg-red-100 text-red-600',
|
||||
};
|
||||
|
||||
interface Props {
|
||||
contact: Contact;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
export function ContactCard({ contact, onRefresh }: Props) {
|
||||
const router = useRouter();
|
||||
const initials = contact.fullName.split(' ').map((n) => n[0]).join('').substring(0, 2).toUpperCase();
|
||||
const statusStyle = statusColors[contact.status] ?? 'bg-gray-100 text-gray-500';
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
|
||||
onPress={() => router.push({ pathname: '/contact/[id]', params: { id: contact.id } })}
|
||||
>
|
||||
<View className="w-12 h-12 rounded-full bg-primary items-center justify-center mr-3">
|
||||
<Text className="text-white font-bold text-lg">{initials}</Text>
|
||||
</View>
|
||||
<View className="flex-1">
|
||||
<Text className="text-charcoal font-semibold text-base" numberOfLines={1}>{contact.fullName}</Text>
|
||||
{contact.address ? <Text className="text-gray-500 text-sm" numberOfLines={1}>{contact.address}</Text> : null}
|
||||
<View className="mt-1">
|
||||
<Text className={`text-xs font-medium px-2 py-0.5 rounded-full self-start ${statusStyle}`}>{contact.status}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<ChevronRight size={18} color="#9CA3AF" />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
89
components/contacts/EditContactSheet.tsx
Normal file
89
components/contacts/EditContactSheet.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { X } from 'lucide-react-native';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { getDatabase } from '@/lib/database';
|
||||
import { Contact } from '@/store/useContactStore';
|
||||
|
||||
const STATUS_OPTIONS = ['Active', 'Return Visit', 'Bible Study', 'Not Interested', 'Do Not Call'];
|
||||
const CATEGORY_OPTIONS = ['Adult', 'Teenager', 'Kid'];
|
||||
|
||||
interface Props {
|
||||
contact: Contact;
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export function EditContactSheet({ contact, visible, onClose, onSaved }: Props) {
|
||||
const [fullName, setFullName] = useState(contact.fullName);
|
||||
const [address, setAddress] = useState(contact.address ?? '');
|
||||
const [status, setStatus] = useState(contact.status);
|
||||
const [category, setCategory] = useState(contact.category);
|
||||
const [notes, setNotes] = useState(contact.notes ?? '');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setFullName(contact.fullName);
|
||||
setAddress(contact.address ?? '');
|
||||
setStatus(contact.status);
|
||||
setCategory(contact.category);
|
||||
setNotes(contact.notes ?? '');
|
||||
}, [contact]);
|
||||
|
||||
async function handleSave() {
|
||||
if (!fullName.trim()) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const db = await getDatabase();
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
await db.runAsync(
|
||||
'UPDATE contacts SET full_name=?, address=?, status=?, category=?, notes=?, updated_at=? WHERE id=?',
|
||||
[fullName.trim(), address.trim() || null, status, category, notes.trim() || null, now, contact.id]
|
||||
);
|
||||
onSaved();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
|
||||
<View className="flex-1 bg-secondary">
|
||||
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
|
||||
<TouchableOpacity onPress={onClose}><X size={22} color="#2C3E50" /></TouchableOpacity>
|
||||
<Text className="text-charcoal font-semibold text-lg">Edit Contact</Text>
|
||||
<View style={{ width: 22 }} />
|
||||
</View>
|
||||
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
|
||||
<Input label="Full Name *" value={fullName} onChangeText={setFullName} />
|
||||
<Input label="Address" value={address} onChangeText={setAddress} />
|
||||
<Text className="text-charcoal font-medium mb-2">Status</Text>
|
||||
<View className="flex-row flex-wrap gap-2 mb-4">
|
||||
{STATUS_OPTIONS.map((s) => (
|
||||
<TouchableOpacity key={s} onPress={() => setStatus(s as any)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
|
||||
<Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
<Text className="text-charcoal font-medium mb-2">Category</Text>
|
||||
<View className="flex-row gap-2 mb-4">
|
||||
{CATEGORY_OPTIONS.map((c) => (
|
||||
<TouchableOpacity key={c} onPress={() => setCategory(c as any)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
|
||||
<Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
<Input label="Notes" value={notes} onChangeText={setNotes} multiline numberOfLines={3} />
|
||||
<View className="h-8" />
|
||||
</ScrollView>
|
||||
<View className="px-4 py-4 border-t border-gray-200 bg-white">
|
||||
<Button label="Save Changes" onPress={handleSave} loading={loading} />
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user