feat: Sprint 3 — Territory management (list, add, edit, delete, detail), GPS tagging, territory tab

app/(tabs)/_layout.tsx

@@ -1,7 +1,7 @@
 // app/(tabs)/_layout.tsx
 import { Tabs, router } from 'expo-router';
 import { useEffect } from 'react';
-import { Home, Users, Map, Settings } from 'lucide-react-native';
+import { Home, Users, Map, Settings, MapPin } from 'lucide-react-native';
 import { useUserStore } from '@/store/useUserStore';
 
 export default function TabLayout() {
@@ -23,6 +23,7 @@ export default function TabLayout() {
     >
       <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="territories" options={{ title: 'Territories', tabBarIcon: ({ color, size }) => <MapPin 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

@@ -13,6 +13,8 @@ export default function ContactsScreen() {
   const { contacts, setContacts } = useContactStore();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('All');
+  const [territoryFilter, setTerritoryFilter] = useState<string>('All');
+  const [territories, setTerritories] = useState<string[]>([]);
   const [showAdd, setShowAdd] = useState(false);
 
   const statusOptions = ['All', 'Active', 'Return Visit', 'Bible Study', 'Not Interested', 'Do Not Call'];
@@ -23,6 +25,10 @@ export default function ContactsScreen() {
       'SELECT * FROM contacts WHERE deleted_at IS NULL ORDER BY full_name ASC'
     );
     setContacts(rows.map(dbToContact));
+
+    // Load territory codes for filter
+    const tRows = await db.getAllAsync<any>('SELECT territory_code FROM territories ORDER BY territory_code ASC');
+    setTerritories(tRows.map((r: any) => r.territory_code));
   }
 
   useFocusEffect(useCallback(() => { loadContacts(); }, []));
@@ -31,7 +37,8 @@ export default function ContactsScreen() {
     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;
+    const matchTerritory = territoryFilter === 'All' || c.territoryCode === territoryFilter;
+    return matchSearch && matchStatus && matchTerritory;
   });
 
   return (
@@ -59,7 +66,7 @@ export default function ContactsScreen() {
       </View>
 
       {/* Status Filter */}
-      <View className="py-2">
+      <View className="pt-2">
         <FlatList
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -77,6 +84,27 @@ export default function ContactsScreen() {
         />
       </View>
 
+      {/* Territory Filter */}
+      {territories.length > 0 && (
+        <View className="pb-2">
+          <FlatList
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{ paddingHorizontal: 12, gap: 8, paddingTop: 6 }}
+            data={['All', ...territories]}
+            keyExtractor={(item) => `t-${item}`}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                onPress={() => setTerritoryFilter(item)}
+                className={`px-3 py-1 rounded-full border ${territoryFilter === item ? 'bg-accent border-accent' : 'bg-white border-gray-200'}`}
+              >
+                <Text className={`text-xs font-medium ${territoryFilter === item ? 'text-white' : 'text-gray-500'}`}>{item === 'All' ? 'All Territories' : item}</Text>
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      )}
+
       {/* List */}
       <FlatList
         data={filtered}

app/(tabs)/territories.tsx

@@ -0,0 +1,82 @@
+import { View, Text, FlatList, TouchableOpacity, TextInput } from 'react-native';
+import { useState, useCallback } from 'react';
+import { useFocusEffect } from 'expo-router';
+import { Plus, Search, X, ChevronRight } from 'lucide-react-native';
+import { getDatabase } from '@/lib/database';
+import { Territory, dbToTerritory } from '@/lib/territoryHelpers';
+import { AddTerritorySheet } from '@/components/territories/AddTerritorySheet';
+import { router } from 'expo-router';
+
+export default function TerritoriesScreen() {
+  const [territories, setTerritories] = useState<Territory[]>([]);
+  const [search, setSearch] = useState('');
+  const [showAdd, setShowAdd] = useState(false);
+
+  async function loadTerritories() {
+    const db = await getDatabase();
+    const rows = await db.getAllAsync<any>('SELECT * FROM territories ORDER BY territory_code ASC');
+    setTerritories(rows.map(dbToTerritory));
+  }
+
+  useFocusEffect(useCallback(() => { loadTerritories(); }, []));
+
+  const filtered = territories.filter((t) =>
+    t.territoryCode.toLowerCase().includes(search.toLowerCase()) ||
+    (t.barangay?.toLowerCase().includes(search.toLowerCase()) ?? false) ||
+    (t.municipality?.toLowerCase().includes(search.toLowerCase()) ?? false)
+  );
+
+  return (
+    <View className="flex-1 bg-secondary">
+      <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">Territories</Text>
+          <TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
+            <Plus size={22} color="white" />
+          </TouchableOpacity>
+        </View>
+        <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 territories..."
+            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>
+
+      <FlatList
+        data={filtered}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 100, paddingTop: 12, gap: 8 }}
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            onPress={() => router.push({ pathname: '/territory/[id]', params: { id: item.id } })}
+            className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
+          >
+            <View className="w-12 h-12 rounded-full bg-primary/10 items-center justify-center mr-3">
+              <Text className="text-primary font-bold text-sm">{item.territoryCode}</Text>
+            </View>
+            <View className="flex-1">
+              <Text className="text-charcoal font-semibold">{item.territoryCode}</Text>
+              {item.barangay && <Text className="text-gray-500 text-sm">{item.barangay}{item.municipality ? `, ${item.municipality}` : ''}</Text>}
+              {item.area && <Text className="text-gray-400 text-xs">Area: {item.area}{item.block ? ` • Block: ${item.block}` : ''}</Text>}
+            </View>
+            <ChevronRight size={18} color="#9CA3AF" />
+          </TouchableOpacity>
+        )}
+        ListEmptyComponent={() => (
+          <View className="items-center justify-center py-20">
+            <Text className="text-gray-400 text-lg">{search ? 'No territories found' : 'No territories yet'}</Text>
+            {!search && <Text className="text-gray-400 mt-1">Tap + to add your first territory</Text>}
+          </View>
+        )}
+      />
+
+      <AddTerritorySheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadTerritories(); }} />
+    </View>
+  );
+}