feat: Sprint 1 — Onboarding screen, user persistence, Contact management (list, add, edit, delete, detail, search, filter)

app/(tabs)/_layout.tsx

@@ -1,7 +1,18 @@
-import { Tabs } from 'expo-router';
+// app/(tabs)/_layout.tsx
+import { Tabs, router } from 'expo-router';
+import { useEffect } from 'react';
 import { Home, Users, Map, Settings } from 'lucide-react-native';
+import { useUserStore } from '@/store/useUserStore';
 
 export default function TabLayout() {
+  const user = useUserStore((s) => s.user);
+
+  useEffect(() => {
+    if (!user) {
+      router.replace('/onboarding');
+    }
+  }, [user]);
+
   return (
     <Tabs
       screenOptions={{
@@ -10,34 +21,10 @@ export default function TabLayout() {
         headerShown: false,
       }}
     >
-      <Tabs.Screen
+      <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({ color, size }) => <Home size={size} color={color} /> }} />
-        name="index"
+      <Tabs.Screen name="contacts" options={{ title: 'Contacts', tabBarIcon: ({ color, size }) => <Users size={size} color={color} /> }} />
-        options={{
+      <Tabs.Screen name="map" options={{ title: 'Map', tabBarIcon: ({ color, size }) => <Map size={size} color={color} /> }} />
-          title: 'Home',
+      <Tabs.Screen name="settings" options={{ title: 'Settings', tabBarIcon: ({ color, size }) => <Settings size={size} color={color} /> }} />
-          tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="contacts"
-        options={{
-          title: 'Contacts',
-          tabBarIcon: ({ color, size }) => <Users size={size} color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="map"
-        options={{
-          title: 'Map',
-          tabBarIcon: ({ color, size }) => <Map size={size} color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="settings"
-        options={{
-          title: 'Settings',
-          tabBarIcon: ({ color, size }) => <Settings size={size} color={color} />,
-        }}
-      />
     </Tabs>
   );
 }

app/(tabs)/contacts.tsx

@@ -1,10 +1,99 @@
-import { View, Text } from 'react-native';
+// app/(tabs)/contacts.tsx
+import { View, Text, FlatList, TouchableOpacity, TextInput } from 'react-native';
+import { useState, useCallback } from 'react';
+import { useFocusEffect } from 'expo-router';
+import { Plus, Search, X } from 'lucide-react-native';
+import { useContactStore, Contact } from '@/store/useContactStore';
+import { getDatabase } from '@/lib/database';
+import { ContactCard } from '@/components/contacts/ContactCard';
+import { AddContactSheet } from '@/components/contacts/AddContactSheet';
+import { dbToContact } from '@/lib/contactHelpers';
 
 export default function ContactsScreen() {
+  const { contacts, setContacts } = useContactStore();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('All');
+  const [showAdd, setShowAdd] = useState(false);
+
+  const statusOptions = ['All', 'Active', 'Return Visit', 'Bible Study', 'Not Interested', 'Do Not Call'];
+
+  async function loadContacts() {
+    const db = await getDatabase();
+    const rows = await db.getAllAsync<any>(
+      'SELECT * FROM contacts WHERE deleted_at IS NULL ORDER BY full_name ASC'
+    );
+    setContacts(rows.map(dbToContact));
+  }
+
+  useFocusEffect(useCallback(() => { loadContacts(); }, []));
+
+  const filtered = contacts.filter((c) => {
+    const matchSearch = c.fullName.toLowerCase().includes(search.toLowerCase()) ||
+      (c.address?.toLowerCase().includes(search.toLowerCase()) ?? false);
+    const matchStatus = statusFilter === 'All' || c.status === statusFilter;
+    return matchSearch && matchStatus;
+  });
+
   return (
-    <View className="flex-1 items-center justify-center bg-secondary">
+    <View className="flex-1 bg-secondary">
-      <Text className="text-xl text-charcoal">Contacts</Text>
+      {/* Header */}
-      <Text className="text-gray-500 mt-2">Coming in Sprint 1</Text>
+      <View className="bg-primary pt-14 pb-4 px-4">
+        <View className="flex-row justify-between items-center mb-3">
+          <Text className="text-white text-2xl font-bold">Contacts</Text>
+          <TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
+            <Plus size={22} color="white" />
+          </TouchableOpacity>
+        </View>
+        {/* Search */}
+        <View className="flex-row items-center bg-white/20 rounded-xl px-3 py-2">
+          <Search size={16} color="rgba(255,255,255,0.7)" />
+          <TextInput
+            className="flex-1 text-white ml-2"
+            placeholder="Search contacts..."
+            placeholderTextColor="rgba(255,255,255,0.6)"
+            value={search}
+            onChangeText={setSearch}
+          />
+          {search ? <TouchableOpacity onPress={() => setSearch('')}><X size={16} color="rgba(255,255,255,0.7)" /></TouchableOpacity> : null}
+        </View>
+      </View>
+
+      {/* Status Filter */}
+      <View className="py-2">
+        <FlatList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ paddingHorizontal: 12, gap: 8 }}
+          data={statusOptions}
+          keyExtractor={(item) => item}
+          renderItem={({ item }) => (
+            <TouchableOpacity
+              onPress={() => setStatusFilter(item)}
+              className={`px-3 py-1.5 rounded-full border ${statusFilter === item ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
+            >
+              <Text className={`text-sm font-medium ${statusFilter === item ? 'text-white' : 'text-charcoal'}`}>{item}</Text>
+            </TouchableOpacity>
+          )}
+        />
+      </View>
+
+      {/* List */}
+      <FlatList
+        data={filtered}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 100, paddingTop: 4, gap: 8 }}
+        renderItem={({ item }) => <ContactCard contact={item} onRefresh={loadContacts} />}
+        ListEmptyComponent={() => (
+          <View className="flex-1 items-center justify-center py-20">
+            <Text className="text-gray-400 text-lg">
+              {search ? 'No contacts found' : 'No contacts yet'}
+            </Text>
+            {!search && <Text className="text-gray-400 mt-1">Tap + to add your first contact</Text>}
+          </View>
+        )}
+      />
+
+      <AddContactSheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadContacts(); }} />
     </View>
   );
 }

app/_layout.tsx

@@ -1,11 +1,49 @@
+// app/_layout.tsx
 import { Stack } from 'expo-router';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useEffect, useState } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { useUserStore } from '@/store/useUserStore';
+import { getDatabase } from '@/lib/database';
 import '../global.css';
 
 export default function RootLayout() {
+  const [loading, setLoading] = useState(true);
+  const setUser = useUserStore((s) => s.setUser);
+
+  useEffect(() => {
+    async function bootstrap() {
+      try {
+        const db = await getDatabase();
+        const user = await db.getFirstAsync<{ id: string; display_name: string; share_id: string }>(
+          'SELECT id, display_name, share_id FROM users WHERE is_self = 1 LIMIT 1'
+        );
+        if (user) {
+          setUser({ id: user.id, displayName: user.display_name, shareId: user.share_id });
+        }
+      } catch (e) {
+        console.error('Bootstrap error:', e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    bootstrap();
+  }, []);
+
+  if (loading) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F8F4EF' }}>
+        <ActivityIndicator size="large" color="#1A6B72" />
+      </View>
+    );
+  }
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <Stack screenOptions={{ headerShown: false }} />
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="onboarding" />
+        <Stack.Screen name="(tabs)" />
+      </Stack>
     </GestureHandlerRootView>
   );
 }

app/contact/[id].tsx

@@ -0,0 +1,113 @@
+import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { useLocalSearchParams, router } from 'expo-router';
+import { useState, useCallback } from 'react';
+import { useFocusEffect } from 'expo-router';
+import { ArrowLeft, Edit2, Trash2, MapPin, Phone } from 'lucide-react-native';
+import { getDatabase } from '@/lib/database';
+import { dbToContact } from '@/lib/contactHelpers';
+import { Contact } from '@/store/useContactStore';
+import { EditContactSheet } from '@/components/contacts/EditContactSheet';
+
+const statusColors: Record<string, string> = {
+  'Active': '#4CAF7D',
+  'Return Visit': '#2196F3',
+  'Bible Study': '#9C27B0',
+  'Not Interested': '#9CA3AF',
+  'Do Not Call': '#C0392B',
+};
+
+export default function ContactDetailScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const [contact, setContact] = useState<Contact | null>(null);
+  const [showEdit, setShowEdit] = useState(false);
+
+  async function loadContact() {
+    const db = await getDatabase();
+    const row = await db.getFirstAsync<any>('SELECT * FROM contacts WHERE id = ?', [id]);
+    if (row) setContact(dbToContact(row));
+  }
+
+  useFocusEffect(useCallback(() => { loadContact(); }, [id]));
+
+  async function handleDelete() {
+    Alert.alert('Delete Contact', `Are you sure you want to delete ${contact?.fullName}?`, [
+      { text: 'Cancel', style: 'cancel' },
+      {
+        text: 'Delete', style: 'destructive',
+        onPress: async () => {
+          const db = await getDatabase();
+          const now = Math.floor(Date.now() / 1000);
+          await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [now, id]);
+          router.back();
+        }
+      }
+    ]);
+  }
+
+  if (!contact) return <View className="flex-1 bg-secondary" />;
+
+  const statusColor = statusColors[contact.status] ?? '#9CA3AF';
+
+  return (
+    <View className="flex-1 bg-secondary">
+      {/* Header */}
+      <View className="bg-primary pt-14 pb-6 px-4">
+        <View className="flex-row items-center justify-between mb-4">
+          <TouchableOpacity onPress={() => router.back()} className="bg-white/20 rounded-full p-2">
+            <ArrowLeft size={20} color="white" />
+          </TouchableOpacity>
+          <View className="flex-row gap-2">
+            <TouchableOpacity onPress={() => setShowEdit(true)} className="bg-white/20 rounded-full p-2">
+              <Edit2 size={18} color="white" />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={handleDelete} className="bg-white/20 rounded-full p-2">
+              <Trash2 size={18} color="white" />
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View className="items-center">
+          <View className="w-20 h-20 rounded-full bg-white/20 items-center justify-center mb-3">
+            <Text className="text-white text-3xl font-bold">
+              {contact.fullName.split(' ').map((n) => n[0]).join('').substring(0, 2).toUpperCase()}
+            </Text>
+          </View>
+          <Text className="text-white text-xl font-bold">{contact.fullName}</Text>
+          <View className="mt-2 px-3 py-1 rounded-full" style={{ backgroundColor: statusColor + '33' }}>
+            <Text style={{ color: 'white' }} className="text-sm font-medium">{contact.status}</Text>
+          </View>
+        </View>
+      </View>
+
+      <ScrollView className="flex-1 px-4 pt-4" contentContainerStyle={{ gap: 12, paddingBottom: 40 }}>
+        {/* Info Card */}
+        <View className="bg-white rounded-2xl p-4">
+          <Text className="text-charcoal font-semibold mb-3">Information</Text>
+          <Row label="Category" value={contact.category} />
+          {contact.address && <Row label="Address" value={contact.address} icon={<MapPin size={14} color="#9CA3AF" />} />}
+          {contact.territoryCode && <Row label="Territory" value={contact.territoryCode} />}
+        </View>
+
+        {contact.notes && (
+          <View className="bg-white rounded-2xl p-4">
+            <Text className="text-charcoal font-semibold mb-2">Notes</Text>
+            <Text className="text-gray-600">{contact.notes}</Text>
+          </View>
+        )}
+      </ScrollView>
+
+      <EditContactSheet contact={contact} visible={showEdit} onClose={() => setShowEdit(false)} onSaved={() => { setShowEdit(false); loadContact(); }} />
+    </View>
+  );
+}
+
+function Row({ label, value, icon }: { label: string; value: string; icon?: React.ReactNode }) {
+  return (
+    <View className="flex-row justify-between items-start py-2 border-b border-gray-50">
+      <Text className="text-gray-500 text-sm">{label}</Text>
+      <View className="flex-row items-center gap-1 flex-1 justify-end">
+        {icon}
+        <Text className="text-charcoal text-sm font-medium text-right flex-1" numberOfLines={2}>{value}</Text>
+      </View>
+    </View>
+  );
+}

app/onboarding.tsx

@@ -0,0 +1,70 @@
+// app/onboarding.tsx
+import { View, Text, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { useState } from 'react';
+import { router } from 'expo-router';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { useUserStore } from '@/store/useUserStore';
+import { getDatabase } from '@/lib/database';
+import * as Crypto from 'expo-crypto';
+
+export default function OnboardingScreen() {
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const setUser = useUserStore((s) => s.setUser);
+
+  async function handleContinue() {
+    if (!name.trim()) {
+      setError('Please enter your name');
+      return;
+    }
+    setLoading(true);
+    try {
+      const id = Crypto.randomUUID();
+      const shareId = Crypto.randomUUID().replace(/-/g, '').substring(0, 12).toUpperCase();
+      const now = Math.floor(Date.now() / 1000);
+      const db = await getDatabase();
+      await db.runAsync(
+        'INSERT INTO users (id, display_name, share_id, is_self, created_at) VALUES (?, ?, ?, 1, ?)',
+        [id, name.trim(), shareId, now]
+      );
+      setUser({ id, displayName: name.trim(), shareId });
+      router.replace('/(tabs)');
+    } catch (e) {
+      setError('Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }} className="bg-secondary">
+        <View className="flex-1 justify-center px-6 py-12">
+          <View className="mb-10">
+            <Text className="text-4xl font-bold text-primary mb-2">TerritoryLog</Text>
+            <Text className="text-charcoal text-lg">Your ministry field records, private and organized.</Text>
+          </View>
+          <View className="mb-6">
+            <Text className="text-xl font-semibold text-charcoal mb-6">What should we call you?</Text>
+            <Input
+              label="Your Name"
+              placeholder="e.g. Brother Kevin"
+              value={name}
+              onChangeText={(t) => { setName(t); setError(''); }}
+              error={error}
+              autoFocus
+              returnKeyType="done"
+              onSubmitEditing={handleContinue}
+            />
+          </View>
+          <Button label="Get Started" onPress={handleContinue} loading={loading} disabled={!name.trim()} />
+          <Text className="text-gray-400 text-sm text-center mt-6">
+            Your data stays on your device. We never collect or share it.
+          </Text>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

components/contacts/AddContactSheet.tsx

@@ -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>
+  );
+}

components/contacts/ContactCard.tsx

@@ -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>
+  );
+}

components/contacts/EditContactSheet.tsx

@@ -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>
+  );
+}

lib/contactHelpers.ts

@@ -0,0 +1,26 @@
+import { Contact } from '@/store/useContactStore';
+import * as Crypto from 'expo-crypto';
+
+export function dbToContact(row: any): Contact {
+  return {
+    id: row.id,
+    ownerId: row.owner_id,
+    fullName: row.full_name,
+    address: row.address,
+    householdCount: row.household_count ?? 1,
+    gender: row.gender,
+    category: row.category,
+    status: row.status,
+    tags: JSON.parse(row.tags ?? '[]'),
+    notes: row.notes,
+    territoryCode: row.territory_code,
+    latitude: row.latitude,
+    longitude: row.longitude,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  };
+}
+
+export function newContactId(): string {
+  return Crypto.randomUUID();
+}

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "expo": "~52.0.0",
+    "expo-crypto": "~13.0.0",
     "expo-router": "~4.0.0",
     "expo-sqlite": "~15.0.0",
     "expo-location": "~18.0.0",