107 lines
4.8 KiB
TypeScript
107 lines
4.8 KiB
TypeScript
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>
|
|
);
|
|
}
|