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
-        name="index"
-        options={{
-          title: 'Home',
-          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.Screen name="index" options={{ title: 'Home', 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">
-      <Text className="text-xl text-charcoal">Contacts</Text>
-      <Text className="text-gray-500 mt-2">Coming in Sprint 1</Text>
+    <View className="flex-1 bg-secondary">
+      {/* Header */}
+      <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>
+  );
+}