feat: Sprint 5 - Toast, ConfirmDialog, EmptyStates, Settings, Export/Import, Accessibility (TERLOG-52/53/54/55/56/57/58/59)

app/(tabs)/contacts.tsx

@@ -7,6 +7,7 @@ import { useContactStore, Contact } from '@/store/useContactStore';
 import { getDatabase } from '@/lib/database';
 import { ContactCard } from '@/components/contacts/ContactCard';
 import { AddContactSheet } from '@/components/contacts/AddContactSheet';
+import { EmptyState } from '@/components/ui/EmptyState';
 import { dbToContact } from '@/lib/contactHelpers';
 
 export default function ContactsScreen() {
@@ -26,7 +27,6 @@ export default function ContactsScreen() {
     );
     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));
   }
@@ -41,13 +41,21 @@ export default function ContactsScreen() {
     return matchSearch && matchStatus && matchTerritory;
   });
 
+  const isFiltered = search.length > 0 || statusFilter !== 'All' || territoryFilter !== 'All';
+
   return (
     <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">
+          <Text className="text-white text-2xl font-bold" accessibilityRole="header">Contacts</Text>
+          <TouchableOpacity
+            onPress={() => setShowAdd(true)}
+            className="bg-white/20 rounded-full p-2"
+            accessibilityRole="button"
+            accessibilityLabel="Add new contact"
+            style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+          >
             <Plus size={22} color="white" />
           </TouchableOpacity>
         </View>
@@ -60,8 +68,18 @@ export default function ContactsScreen() {
             placeholderTextColor="rgba(255,255,255,0.6)"
             value={search}
             onChangeText={setSearch}
+            accessibilityLabel="Search contacts"
           />
-          {search ? <TouchableOpacity onPress={() => setSearch('')}><X size={16} color="rgba(255,255,255,0.7)" /></TouchableOpacity> : null}
+          {search ? (
+            <TouchableOpacity
+              onPress={() => setSearch('')}
+              accessibilityRole="button"
+              accessibilityLabel="Clear search"
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            >
+              <X size={16} color="rgba(255,255,255,0.7)" />
+            </TouchableOpacity>
+          ) : null}
         </View>
       </View>
 
@@ -77,6 +95,10 @@ export default function ContactsScreen() {
             <TouchableOpacity
               onPress={() => setStatusFilter(item)}
               className={`px-3 py-1.5 rounded-full border ${statusFilter === item ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
+              accessibilityRole="button"
+              accessibilityLabel={`Filter by ${item}`}
+              accessibilityState={{ selected: statusFilter === item }}
+              style={{ minHeight: 36 }}
             >
               <Text className={`text-sm font-medium ${statusFilter === item ? 'text-white' : 'text-charcoal'}`}>{item}</Text>
             </TouchableOpacity>
@@ -97,6 +119,10 @@ export default function ContactsScreen() {
               <TouchableOpacity
                 onPress={() => setTerritoryFilter(item)}
                 className={`px-3 py-1 rounded-full border ${territoryFilter === item ? 'bg-accent border-accent' : 'bg-white border-gray-200'}`}
+                accessibilityRole="button"
+                accessibilityLabel={`Filter by territory ${item === 'All' ? 'all' : item}`}
+                accessibilityState={{ selected: territoryFilter === item }}
+                style={{ minHeight: 32 }}
               >
                 <Text className={`text-xs font-medium ${territoryFilter === item ? 'text-white' : 'text-gray-500'}`}>{item === 'All' ? 'All Territories' : item}</Text>
               </TouchableOpacity>
@@ -111,14 +137,23 @@ export default function ContactsScreen() {
         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>
-        )}
+        ListEmptyComponent={() =>
+          isFiltered ? (
+            <EmptyState
+              icon="Search"
+              title="No contacts found"
+              message="Try adjusting your search or filters."
+            />
+          ) : (
+            <EmptyState
+              icon="Users"
+              title="No contacts yet"
+              message="Start building your ministry records by adding your first contact."
+              actionLabel="Add Contact"
+              onAction={() => setShowAdd(true)}
+            />
+          )
+        }
       />
 
       <AddContactSheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadContacts(); }} />