feat: add CI/CD workflows and EAS build config (Sprint 5)

.gitea/workflows/build.yml

@@ -0,0 +1,37 @@
+name: Build (EAS)
+
+# Triggered on push to main branch.
+# IMPORTANT: Set EXPO_TOKEN as a Gitea Actions secret before running this workflow.
+#   Go to: Repo → Settings → Actions → Secrets → Add secret: EXPO_TOKEN
+#   Get your token at: https://expo.dev/accounts/[username]/settings/access-tokens
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  eas-build:
+    name: EAS Build (Android Preview APK)
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install EAS CLI
+        run: npm install -g eas-cli
+
+      - name: Build Android APK (preview)
+        run: eas build --platform android --profile preview --non-interactive
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

.gitea/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - dev
+      - 'sprint/**'
+
+jobs:
+  lint-and-typecheck:
+    name: Lint & TypeScript Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npx eslint . --ext .ts,.tsx --max-warnings 0
+
+      - name: Run TypeScript check
+        run: npx tsc --noEmit

BUILDING.md

@@ -0,0 +1,103 @@
+# Building TerritoryLog with EAS
+
+This document explains how to build TerritoryLog APKs and production bundles using **Expo Application Services (EAS)**.
+
+---
+
+## Prerequisites
+
+### 1. Install EAS CLI
+
+```bash
+npm install -g eas-cli
+```
+
+Verify installation:
+
+```bash
+eas --version
+# Should output >= 12.0.0
+```
+
+### 2. Log in to Expo Account
+
+```bash
+eas login
+```
+
+You will be prompted for your Expo username and password. If you don't have an account, create one at [https://expo.dev](https://expo.dev).
+
+---
+
+## Building
+
+### Preview Build (APK — for internal testing)
+
+This generates a standard `.apk` file that can be installed directly on Android devices without the Play Store.
+
+```bash
+eas build --platform android --profile preview
+```
+
+Once the build completes, EAS will provide a download URL for the APK.
+
+### Production Build (AAB — for Play Store submission)
+
+This generates an `.aab` (Android App Bundle) optimized for Play Store distribution.
+
+```bash
+eas build --platform android --profile production
+```
+
+### Development Build (for local development with Expo Go replacement)
+
+```bash
+eas build --platform android --profile development
+```
+
+---
+
+## About Keystores
+
+> **EAS manages keystores automatically.** On your first build, EAS will generate and securely store a keystore on Expo's servers. You don't need to manually create or manage a keystore. If you need to use an existing keystore, see the [EAS credentials documentation](https://docs.expo.dev/app-signing/managed-credentials/).
+
+---
+
+## CI/CD — Setting Up `EXPO_TOKEN` in Gitea
+
+The CI/CD pipeline in `.gitea/workflows/build.yml` requires an `EXPO_TOKEN` secret to authenticate with EAS without interactive login.
+
+### Steps to set up:
+
+1. **Generate an Expo access token:**
+   - Go to [https://expo.dev/accounts/\[your-username\]/settings/access-tokens](https://expo.dev/accounts/)
+   - Click **"Create Token"**
+   - Name it something like `gitea-ci` and copy the token value
+
+2. **Add the secret to Gitea:**
+   - In this repo, go to **Settings → Actions → Secrets**
+   - Click **"Add Secret"**
+   - Name: `EXPO_TOKEN`
+   - Value: *(paste your token)*
+   - Click **"Save"**
+
+3. The `build.yml` workflow will now authenticate automatically when triggered by a push to `main`.
+
+---
+
+## Build Profiles Summary
+
+| Profile       | Output   | Distribution | Use Case                     |
+|---------------|----------|--------------|------------------------------|
+| `development` | APK      | Internal     | Dev client for local testing |
+| `preview`     | APK      | Internal     | QA / internal testing        |
+| `production`  | AAB      | Play Store   | Public release               |
+
+---
+
+## Useful Links
+
+- [EAS Build documentation](https://docs.expo.dev/build/introduction/)
+- [EAS CLI reference](https://docs.expo.dev/eas-cli/)
+- [Android app signing with EAS](https://docs.expo.dev/app-signing/managed-credentials/)
+- [Expo access tokens](https://docs.expo.dev/accounts/programmatic-access/)

app.json

@@ -13,13 +13,14 @@
     },
     "ios": {
       "supportsTablet": false,
-      "bundleIdentifier": "space.juankibin.territorylog"
+      "bundleIdentifier": "com.juankibin.territorylog"
     },
     "android": {
       "adaptiveIcon": {
         "backgroundColor": "#1A6B72"
       },
-      "package": "space.juankibin.territorylog"
+      "package": "com.juankibin.territorylog",
+      "versionCode": 1
     },
     "web": {
       "bundler": "metro"

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>
+          <Text className="text-white text-2xl font-bold" accessibilityRole="header">Contacts</Text>
-          <TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
+          <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={() => (
+        ListEmptyComponent={() =>
-          <View className="flex-1 items-center justify-center py-20">
+          isFiltered ? (
-            <Text className="text-gray-400 text-lg">
+            <EmptyState
-              {search ? 'No contacts found' : 'No contacts yet'}
+              icon="Search"
-            </Text>
+              title="No contacts found"
-            {!search && <Text className="text-gray-400 mt-1">Tap + to add your first contact</Text>}
+              message="Try adjusting your search or filters."
-          </View>
+            />
-        )}
+          ) : (
+            <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(); }} />

app/(tabs)/index.tsx

@@ -1,11 +1,10 @@
-import { View, Text, ScrollView, TouchableOpacity, Modal, FlatList } from 'react-native';
+import { View, Text, ScrollView, TouchableOpacity, Modal } from 'react-native';
 import { useState, useCallback } from 'react';
 import { useFocusEffect, router } from 'expo-router';
-import { Plus, Users, Calendar, BookOpen, ChevronRight, X } from 'lucide-react-native';
+import { Plus, ChevronRight } from 'lucide-react-native';
 import { useUserStore } from '@/store/useUserStore';
 import { getDatabase } from '@/lib/database';
-import { Contact } from '@/store/useContactStore';
+import { EmptyState } from '@/components/ui/EmptyState';
-import { dbToContact } from '@/lib/contactHelpers';
 import { formatDate } from '@/lib/visitHelpers';
 
 interface Stats {
@@ -29,8 +28,7 @@ export default function HomeScreen() {
 
   async function loadDashboard() {
     const db = await getDatabase();
-    const now = Math.floor(Date.now() / 1000);
+    const todayEnd = Math.floor(Date.now() / 1000) + 86400 * 3; // next 3 days
-    const todayEnd = now + 86400 * 3; // next 3 days
 
     const contacts = await db.getAllAsync<any>('SELECT status FROM contacts WHERE deleted_at IS NULL');
     const total = contacts.length;
@@ -46,7 +44,7 @@ export default function HomeScreen() {
     );
 
     setStats({ total, returnVisits, bibleStudies, visitsDue: due.length });
-    setDueVisits(due.map((d) => ({ contactId: d.contact_id, contactName: d.full_name, nextVisitDate: d.next_visit_date })));
+    setDueVisits(due.map((d: any) => ({ contactId: d.contact_id, contactName: d.full_name, nextVisitDate: d.next_visit_date })));
   }
 
   useFocusEffect(useCallback(() => { loadDashboard(); }, []));
@@ -81,24 +79,35 @@ export default function HomeScreen() {
         </View>
 
         {/* Return Visits Due */}
-        {dueVisits.length > 0 && (
+        <View className="bg-white rounded-2xl p-4">
-          <View className="bg-white rounded-2xl p-4">
+          <Text className="text-charcoal font-semibold mb-3">⏰ Visits Due Soon</Text>
-            <Text className="text-charcoal font-semibold mb-3">⏰ Visits Due Soon</Text>
+          {dueVisits.length === 0 ? (
-            {dueVisits.slice(0, 5).map((v) => (
+            <EmptyState
-              <TouchableOpacity
+              icon="Calendar"
-                key={v.contactId}
+              title="No visits due"
-                onPress={() => router.push({ pathname: '/contact/[id]', params: { id: v.contactId } })}
+              message="You're all caught up! No visits are due in the next 3 days."
-                className="flex-row items-center justify-between py-2 border-b border-gray-50"
+            />
-              >
+          ) : (
-                <Text className="text-charcoal font-medium">{v.contactName}</Text>
+            <>
-                <Text className="text-primary text-sm">{formatDate(v.nextVisitDate)}</Text>
+              {dueVisits.slice(0, 5).map((v) => (
-              </TouchableOpacity>
+                <TouchableOpacity
-            ))}
+                  key={v.contactId}
-            {dueVisits.length > 5 && (
+                  onPress={() => router.push({ pathname: '/contact/[id]', params: { id: v.contactId } })}
-              <Text className="text-gray-400 text-sm text-center mt-2">+{dueVisits.length - 5} more</Text>
+                  className="flex-row items-center justify-between py-2 border-b border-gray-50"
-            )}
+                  accessibilityRole="button"
-          </View>
+                  accessibilityLabel={`Visit ${v.contactName} on ${formatDate(v.nextVisitDate)}`}
-        )}
+                  style={{ minHeight: 44 }}
+                >
+                  <Text className="text-charcoal font-medium">{v.contactName}</Text>
+                  <Text className="text-primary text-sm">{formatDate(v.nextVisitDate)}</Text>
+                </TouchableOpacity>
+              ))}
+              {dueVisits.length > 5 && (
+                <Text className="text-gray-400 text-sm text-center mt-2">+{dueVisits.length - 5} more</Text>
+              )}
+            </>
+          )}
+        </View>
 
         {/* Quick actions */}
         <View className="bg-white rounded-2xl p-4">
@@ -114,13 +123,21 @@ export default function HomeScreen() {
         onPress={() => setShowFAB(true)}
         className="absolute bottom-8 right-6 w-14 h-14 bg-primary rounded-full items-center justify-center shadow-lg"
         style={{ elevation: 8 }}
+        accessibilityRole="button"
+        accessibilityLabel="Quick add"
+        accessibilityHint="Open quick actions menu to add a contact or log a visit"
       >
         <Plus size={28} color="white" />
       </TouchableOpacity>
 
       {/* FAB Action Sheet */}
       <Modal visible={showFAB} transparent animationType="fade">
-        <TouchableOpacity className="flex-1 bg-black/50 justify-end" onPress={() => setShowFAB(false)}>
+        <TouchableOpacity
+          className="flex-1 bg-black/50 justify-end"
+          onPress={() => setShowFAB(false)}
+          accessibilityRole="button"
+          accessibilityLabel="Close menu"
+        >
           <View className="bg-white rounded-t-3xl px-4 pt-6 pb-10">
             <Text className="text-charcoal font-semibold text-lg mb-4 text-center">Quick Add</Text>
             <FABAction
@@ -147,7 +164,7 @@ export default function HomeScreen() {
 
 function StatCard({ label, value, color, icon }: { label: string; value: number; color: string; icon: string }) {
   return (
-    <View className={`flex-1 ${color} rounded-2xl p-4`}>
+    <View className={`flex-1 ${color} rounded-2xl p-4`} accessibilityRole="text" accessibilityLabel={`${label}: ${value}`}>
       <Text className="text-2xl mb-1">{icon}</Text>
       <Text className="text-white text-2xl font-bold">{value}</Text>
       <Text className="text-white/80 text-xs">{label}</Text>
@@ -157,7 +174,13 @@ function StatCard({ label, value, color, icon }: { label: string; value: number;
 
 function QuickAction({ icon, label, onPress }: { icon: string; label: string; onPress: () => void }) {
   return (
-    <TouchableOpacity onPress={onPress} className="flex-row items-center py-3 border-b border-gray-50">
+    <TouchableOpacity
+      onPress={onPress}
+      className="flex-row items-center py-3 border-b border-gray-50"
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={{ minHeight: 48 }}
+    >
       <Text className="text-2xl mr-3">{icon}</Text>
       <Text className="flex-1 text-charcoal font-medium">{label}</Text>
       <ChevronRight size={16} color="#9CA3AF" />
@@ -167,7 +190,13 @@ function QuickAction({ icon, label, onPress }: { icon: string; label: string; on
 
 function FABAction({ icon, label, sub, onPress }: { icon: string; label: string; sub: string; onPress: () => void }) {
   return (
-    <TouchableOpacity onPress={onPress} className="flex-row items-center py-3 px-2 mb-2 border border-gray-100 rounded-xl">
+    <TouchableOpacity
+      onPress={onPress}
+      className="flex-row items-center py-3 px-2 mb-2 border border-gray-100 rounded-xl"
+      accessibilityRole="button"
+      accessibilityLabel={`${label} - ${sub}`}
+      style={{ minHeight: 64 }}
+    >
       <Text className="text-3xl mr-4">{icon}</Text>
       <View>
         <Text className="text-charcoal font-semibold">{label}</Text>

app/(tabs)/territories.tsx

@@ -5,6 +5,7 @@ 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 { EmptyState } from '@/components/ui/EmptyState';
 import { router } from 'expo-router';
 
 export default function TerritoriesScreen() {
@@ -30,8 +31,14 @@ export default function TerritoriesScreen() {
     <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>
+          <Text className="text-white text-2xl font-bold" accessibilityRole="header">Territories</Text>
-          <TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
+          <TouchableOpacity
+            onPress={() => setShowAdd(true)}
+            className="bg-white/20 rounded-full p-2"
+            accessibilityRole="button"
+            accessibilityLabel="Add new territory"
+            style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+          >
             <Plus size={22} color="white" />
           </TouchableOpacity>
         </View>
@@ -43,8 +50,18 @@ export default function TerritoriesScreen() {
             placeholderTextColor="rgba(255,255,255,0.6)"
             value={search}
             onChangeText={setSearch}
+            accessibilityLabel="Search territories"
           />
-          {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>
 
@@ -56,6 +73,10 @@ export default function TerritoriesScreen() {
           <TouchableOpacity
             onPress={() => router.push({ pathname: '/territory/[id]', params: { id: item.id } })}
             className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
+            accessibilityRole="button"
+            accessibilityLabel={`Territory ${item.territoryCode}${item.barangay ? `, ${item.barangay}` : ''}`}
+            accessibilityHint="Tap to view territory details"
+            style={{ minHeight: 72 }}
           >
             <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>
@@ -68,12 +89,23 @@ export default function TerritoriesScreen() {
             <ChevronRight size={18} color="#9CA3AF" />
           </TouchableOpacity>
         )}
-        ListEmptyComponent={() => (
+        ListEmptyComponent={() =>
-          <View className="items-center justify-center py-20">
+          search.length > 0 ? (
-            <Text className="text-gray-400 text-lg">{search ? 'No territories found' : 'No territories yet'}</Text>
+            <EmptyState
-            {!search && <Text className="text-gray-400 mt-1">Tap + to add your first territory</Text>}
+              icon="Search"
-          </View>
+              title="No territories found"
-        )}
+              message="Try adjusting your search."
+            />
+          ) : (
+            <EmptyState
+              icon="MapPin"
+              title="No territories yet"
+              message="Add your first territory to organize your ministry work."
+              actionLabel="Add Territory"
+              onAction={() => setShowAdd(true)}
+            />
+          )
+        }
       />
 
       <AddTerritorySheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadTerritories(); }} />

app/_layout.tsx

@@ -6,6 +6,7 @@ import { View, ActivityIndicator, AppState, AppStateStatus } from 'react-native'
 import { useUserStore } from '@/store/useUserStore';
 import { getDatabase } from '@/lib/database';
 import { isPinEnabled } from '@/lib/pinService';
+import { ToastProvider } from '@/components/ui/Toast';
 import '../global.css';
 
 const LOCK_AFTER_SECONDS = 60;
@@ -100,25 +101,27 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <Stack screenOptions={{ headerShown: false }}>
+      <ToastProvider>
-        <Stack.Screen name="onboarding" />
+        <Stack screenOptions={{ headerShown: false }}>
-        <Stack.Screen name="(tabs)" />
+          <Stack.Screen name="onboarding" />
-        <Stack.Screen
+          <Stack.Screen name="(tabs)" />
-          name="lock"
+          <Stack.Screen
-          options={{
+            name="lock"
-            presentation: 'fullScreenModal',
+            options={{
-            animation: 'fade',
+              presentation: 'fullScreenModal',
-            gestureEnabled: false,
+              animation: 'fade',
-          }}
+              gestureEnabled: false,
-        />
+            }}
-        <Stack.Screen
+          />
-          name="sync-progress"
+          <Stack.Screen
-          options={{
+            name="sync-progress"
-            presentation: 'fullScreenModal',
+            options={{
-            animation: 'slide_from_bottom',
+              presentation: 'fullScreenModal',
-          }}
+              animation: 'slide_from_bottom',
-        />
+            }}
-      </Stack>
+          />
+        </Stack>
+      </ToastProvider>
     </GestureHandlerRootView>
   );
 }

app/contact/[id].tsx

@@ -1,12 +1,15 @@
-import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
 import { useLocalSearchParams, router, useFocusEffect } from 'expo-router';
 import { useState, useCallback } from 'react';
-import { ArrowLeft, Edit2, Trash2, MapPin } from 'lucide-react-native';
+import { ArrowLeft, Edit2, Trash2 } 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';
 import { LogVisitSheet } from '@/components/visits/LogVisitSheet';
+import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { useToast } from '@/components/ui/Toast';
 import { Visit, dbToVisit, formatDate } from '@/lib/visitHelpers';
 
 const statusColors: Record<string, string> = {
@@ -23,6 +26,8 @@ export default function ContactDetailScreen() {
   const [visits, setVisits] = useState<Visit[]>([]);
   const [showEdit, setShowEdit] = useState(false);
   const [showLogVisit, setShowLogVisit] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const { showToast } = useToast();
 
   async function loadData() {
     const db = await getDatabase();
@@ -34,18 +39,11 @@ export default function ContactDetailScreen() {
 
   useFocusEffect(useCallback(() => { loadData(); }, [id]));
 
-  async function handleDelete() {
+  async function handleDeleteConfirmed() {
-    Alert.alert('Delete Contact', `Are you sure you want to delete ${contact?.fullName}?`, [
+    const db = await getDatabase();
-      { text: 'Cancel', style: 'cancel' },
+    await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [Math.floor(Date.now() / 1000), id]);
-      {
+    showToast(`${contact?.fullName} deleted`, 'success');
-        text: 'Delete', style: 'destructive',
+    router.back();
-        onPress: async () => {
-          const db = await getDatabase();
-          await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [Math.floor(Date.now() / 1000), id]);
-          router.back();
-        }
-      }
-    ]);
   }
 
   if (!contact) return <View className="flex-1 bg-secondary" />;
@@ -56,14 +54,32 @@ export default function ContactDetailScreen() {
     <View className="flex-1 bg-secondary">
       <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">
+          <TouchableOpacity
+            onPress={() => router.back()}
+            className="bg-white/20 rounded-full p-2"
+            accessibilityRole="button"
+            accessibilityLabel="Go back"
+            style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+          >
             <ArrowLeft size={20} color="white" />
           </TouchableOpacity>
           <View className="flex-row gap-2">
-            <TouchableOpacity onPress={() => setShowEdit(true)} className="bg-white/20 rounded-full p-2">
+            <TouchableOpacity
+              onPress={() => setShowEdit(true)}
+              className="bg-white/20 rounded-full p-2"
+              accessibilityRole="button"
+              accessibilityLabel="Edit contact"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
               <Edit2 size={18} color="white" />
             </TouchableOpacity>
-            <TouchableOpacity onPress={handleDelete} className="bg-white/20 rounded-full p-2">
+            <TouchableOpacity
+              onPress={() => setShowDeleteConfirm(true)}
+              className="bg-white/20 rounded-full p-2"
+              accessibilityRole="button"
+              accessibilityLabel="Delete contact"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
               <Trash2 size={18} color="white" />
             </TouchableOpacity>
           </View>
@@ -99,12 +115,22 @@ export default function ContactDetailScreen() {
         <View className="bg-white rounded-2xl p-4">
           <View className="flex-row justify-between items-center mb-3">
             <Text className="text-charcoal font-semibold">Visit History ({visits.length})</Text>
-            <TouchableOpacity onPress={() => setShowLogVisit(true)} className="bg-primary rounded-lg px-3 py-1.5">
+            <TouchableOpacity
+              onPress={() => setShowLogVisit(true)}
+              className="bg-primary rounded-lg px-3 py-1.5"
+              accessibilityRole="button"
+              accessibilityLabel="Log a new visit"
+              style={{ minHeight: 36 }}
+            >
               <Text className="text-white text-sm font-medium">+ Log Visit</Text>
             </TouchableOpacity>
           </View>
           {visits.length === 0 ? (
-            <Text className="text-gray-400 text-sm">No visits recorded yet</Text>
+            <EmptyState
+              icon="Calendar"
+              title="No visits logged yet"
+              message="Tap '+ Log Visit' to record your first visit with this contact."
+            />
           ) : (
             visits.map((v) => (
               <View key={v.id} className="border-l-2 border-primary pl-3 mb-3 last:mb-0">
@@ -127,6 +153,15 @@ export default function ContactDetailScreen() {
         onClose={() => setShowLogVisit(false)}
         onSaved={() => { setShowLogVisit(false); loadData(); }}
       />
+      <ConfirmDialog
+        visible={showDeleteConfirm}
+        title="Delete Contact"
+        message={`Are you sure you want to delete ${contact.fullName}? This action cannot be undone.`}
+        confirmText="Delete"
+        confirmStyle="danger"
+        onConfirm={() => { setShowDeleteConfirm(false); handleDeleteConfirmed(); }}
+        onCancel={() => setShowDeleteConfirm(false)}
+      />
     </View>
   );
 }

app/territory/[id].tsx

@@ -1,4 +1,4 @@
-import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
 import { useLocalSearchParams, router, useFocusEffect } from 'expo-router';
 import { useState, useCallback } from 'react';
 import { ArrowLeft, Edit2, Trash2, ChevronRight } from 'lucide-react-native';
@@ -7,12 +7,17 @@ import { Territory, dbToTerritory } from '@/lib/territoryHelpers';
 import { Contact } from '@/store/useContactStore';
 import { dbToContact } from '@/lib/contactHelpers';
 import { EditTerritorySheet } from '@/components/territories/EditTerritorySheet';
+import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { useToast } from '@/components/ui/Toast';
 
 export default function TerritoryDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const [territory, setTerritory] = useState<Territory | null>(null);
   const [contacts, setContacts] = useState<Contact[]>([]);
   const [showEdit, setShowEdit] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const { showToast } = useToast();
 
   async function loadData() {
     const db = await getDatabase();
@@ -30,15 +35,11 @@ export default function TerritoryDetailScreen() {
 
   useFocusEffect(useCallback(() => { loadData(); }, [id]));
 
-  async function handleDelete() {
+  async function handleDeleteConfirmed() {
-    Alert.alert('Delete Territory', `Delete territory ${territory?.territoryCode}? Contacts will keep their territory code but it won't link to a territory record.`, [
+    const db = await getDatabase();
-      { text: 'Cancel', style: 'cancel' },
+    await db.runAsync('DELETE FROM territories WHERE id = ?', [id]);
-      { text: 'Delete', style: 'destructive', onPress: async () => {
+    showToast(`Territory ${territory?.territoryCode} deleted`, 'success');
-        const db = await getDatabase();
+    router.back();
-        await db.runAsync('DELETE FROM territories WHERE id = ?', [id]);
-        router.back();
-      }}
-    ]);
   }
 
   if (!territory) return <View className="flex-1 bg-secondary" />;
@@ -47,14 +48,32 @@ export default function TerritoryDetailScreen() {
     <View className="flex-1 bg-secondary">
       <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">
+          <TouchableOpacity
+            onPress={() => router.back()}
+            className="bg-white/20 rounded-full p-2"
+            accessibilityRole="button"
+            accessibilityLabel="Go back"
+            style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+          >
             <ArrowLeft size={20} color="white" />
           </TouchableOpacity>
           <View className="flex-row gap-2">
-            <TouchableOpacity onPress={() => setShowEdit(true)} className="bg-white/20 rounded-full p-2">
+            <TouchableOpacity
+              onPress={() => setShowEdit(true)}
+              className="bg-white/20 rounded-full p-2"
+              accessibilityRole="button"
+              accessibilityLabel="Edit territory"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
               <Edit2 size={18} color="white" />
             </TouchableOpacity>
-            <TouchableOpacity onPress={handleDelete} className="bg-white/20 rounded-full p-2">
+            <TouchableOpacity
+              onPress={() => setShowDeleteConfirm(true)}
+              className="bg-white/20 rounded-full p-2"
+              accessibilityRole="button"
+              accessibilityLabel="Delete territory"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
               <Trash2 size={18} color="white" />
             </TouchableOpacity>
           </View>
@@ -80,13 +99,20 @@ export default function TerritoryDetailScreen() {
         <View className="bg-white rounded-2xl p-4">
           <Text className="text-charcoal font-semibold mb-3">Contacts in this territory ({contacts.length})</Text>
           {contacts.length === 0 ? (
-            <Text className="text-gray-400 text-sm">No contacts assigned to this territory</Text>
+            <EmptyState
+              icon="Users"
+              title="No contacts here yet"
+              message="Assign contacts to this territory to see them here."
+            />
           ) : (
             contacts.map((c) => (
               <TouchableOpacity
                 key={c.id}
                 onPress={() => router.push({ pathname: '/contact/[id]', params: { id: c.id } })}
                 className="flex-row items-center py-2 border-b border-gray-50"
+                accessibilityRole="button"
+                accessibilityLabel={`View contact ${c.fullName}`}
+                style={{ minHeight: 44 }}
               >
                 <Text className="flex-1 text-charcoal font-medium">{c.fullName}</Text>
                 <Text className="text-gray-400 text-xs mr-2">{c.status}</Text>
@@ -98,6 +124,17 @@ export default function TerritoryDetailScreen() {
       </ScrollView>
 
       <EditTerritorySheet territory={territory} visible={showEdit} onClose={() => setShowEdit(false)} onSaved={() => { setShowEdit(false); loadData(); }} />
+
+      <ConfirmDialog
+        visible={showDeleteConfirm}
+        title="Delete Territory"
+        message={`Delete territory ${territory.territoryCode}? Contacts will keep their territory code but it won't link to a territory record.`}
+        confirmText="Delete"
+        confirmStyle="danger"
+        impactCount={contacts.length}
+        onConfirm={() => { setShowDeleteConfirm(false); handleDeleteConfirmed(); }}
+        onCancel={() => setShowDeleteConfirm(false)}
+      />
     </View>
   );
 }

components/contacts/AddContactSheet.tsx

@@ -65,11 +65,16 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
         <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(); }}>
+            <TouchableOpacity
+              onPress={() => { reset(); onClose(); }}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
               <X size={22} color="#2C3E50" />
             </TouchableOpacity>
             <Text className="text-charcoal font-semibold text-lg">New Contact</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
           </View>
 
           <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
@@ -80,7 +85,15 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
             <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'}`}>
+                <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'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Status: ${s}`}
+                  accessibilityState={{ selected: status === s }}
+                  style={{ minHeight: 36 }}
+                >
                   <Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
                 </TouchableOpacity>
               ))}
@@ -90,7 +103,15 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
             <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'}`}>
+                <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'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Category: ${c}`}
+                  accessibilityState={{ selected: category === c }}
+                  style={{ minHeight: 36 }}
+                >
                   <Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
                 </TouchableOpacity>
               ))}
@@ -101,6 +122,10 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
 
             {/* GPS Tag */}
             <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel={coords ? `GPS location tagged: ${coords.lat.toFixed(5)}, ${coords.lng.toFixed(5)}` : 'Tag GPS location'}
+              accessibilityHint="Requests location permission and tags the current GPS coordinates"
+              style={{ minHeight: 48 }}
               onPress={async () => {
                 const { status } = await Location.requestForegroundPermissionsAsync();
                 if (status !== 'granted') { alert('Location permission denied'); return; }

components/contacts/ContactCard.tsx

@@ -1,4 +1,4 @@
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { useRouter } from 'expo-router';
 import { ChevronRight } from 'lucide-react-native';
 import { Contact } from '@/store/useContactStore';
@@ -25,9 +25,13 @@ export function ContactCard({ contact, onRefresh }: Props) {
     <TouchableOpacity
       className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
       onPress={() => router.push({ pathname: '/contact/[id]', params: { id: contact.id } })}
+      accessibilityRole="button"
+      accessibilityLabel={`${contact.fullName}, ${contact.status}${contact.address ? `, ${contact.address}` : ''}`}
+      accessibilityHint="Tap to view contact details"
+      style={{ minHeight: 72 }}
     >
       <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>
+        <Text className="text-white font-bold text-lg" accessibilityElementsHidden>{initials}</Text>
       </View>
       <View className="flex-1">
         <Text className="text-charcoal font-semibold text-base" numberOfLines={1}>{contact.fullName}</Text>
@@ -36,7 +40,7 @@ export function ContactCard({ contact, onRefresh }: Props) {
           <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" />
+      <ChevronRight size={18} color="#9CA3AF" accessibilityElementsHidden />
     </TouchableOpacity>
   );
 }

components/contacts/EditContactSheet.tsx

@@ -55,9 +55,16 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
       <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>
+            <TouchableOpacity
+              onPress={onClose}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
+              <X size={22} color="#2C3E50" />
+            </TouchableOpacity>
             <Text className="text-charcoal font-semibold text-lg">Edit Contact</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
           </View>
           <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
             <Input label="Full Name *" value={fullName} onChangeText={setFullName} />
@@ -65,7 +72,15 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
             <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'}`}>
+                <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'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Status: ${s}`}
+                  accessibilityState={{ selected: status === s }}
+                  style={{ minHeight: 36 }}
+                >
                   <Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
                 </TouchableOpacity>
               ))}
@@ -73,7 +88,15 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
             <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'}`}>
+                <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'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Category: ${c}`}
+                  accessibilityState={{ selected: category === c }}
+                  style={{ minHeight: 36 }}
+                >
                   <Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
                 </TouchableOpacity>
               ))}

components/territories/AddTerritorySheet.tsx

@@ -50,9 +50,16 @@ export function AddTerritorySheet({ visible, onClose, onSaved }: Props) {
       <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={() => { reset(); onClose(); }}><X size={22} color="#2C3E50" /></TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => { reset(); onClose(); }}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
+              <X size={22} color="#2C3E50" />
+            </TouchableOpacity>
             <Text className="text-charcoal font-semibold text-lg">New Territory</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
           </View>
           <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
             <Input label="Territory Code *" placeholder="e.g. T-01, A-12" value={code} onChangeText={(t) => { setCode(t); setErrors((e) => ({ ...e, code: '' })); }} error={errors.code} autoCapitalize="characters" />

components/territories/EditTerritorySheet.tsx

@@ -40,9 +40,16 @@ export function EditTerritorySheet({ territory, visible, onClose, onSaved }: Pro
       <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>
+            <TouchableOpacity
+              onPress={onClose}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
+              <X size={22} color="#2C3E50" />
+            </TouchableOpacity>
             <Text className="text-charcoal font-semibold text-lg">Edit Territory</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
           </View>
           <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
             <View className="mb-4 bg-gray-100 rounded-xl px-4 py-3">

components/ui/Button.tsx

@@ -26,6 +26,10 @@ export function Button({ label, onPress, variant = 'primary', loading, disabled
       className={`${base} ${variants[variant]} ${disabled || loading ? 'opacity-50' : ''}`}
       onPress={onPress}
       disabled={disabled || loading}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled: !!(disabled || loading) }}
+      style={{ minHeight: 52 }}
     >
       {loading ? (
         <ActivityIndicator color={variant === 'secondary' ? '#1A6B72' : 'white'} />

components/ui/ConfirmDialog.tsx

@@ -0,0 +1,166 @@
+import { Modal, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { AlertTriangle } from 'lucide-react-native';
+
+interface Props {
+  visible: boolean;
+  title: string;
+  message: string;
+  confirmText?: string;
+  confirmStyle?: 'danger' | 'default';
+  onConfirm: () => void;
+  onCancel: () => void;
+  impactCount?: number;
+}
+
+export function ConfirmDialog({
+  visible,
+  title,
+  message,
+  confirmText = 'Confirm',
+  confirmStyle = 'default',
+  onConfirm,
+  onCancel,
+  impactCount,
+}: Props) {
+  const isDanger = confirmStyle === 'danger';
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onCancel}
+      accessibilityViewIsModal
+    >
+      <View style={styles.overlay}>
+        <View
+          style={styles.dialog}
+          accessibilityRole="alert"
+          accessibilityLabel={title}
+        >
+          {isDanger && (
+            <View style={styles.iconWrap}>
+              <AlertTriangle size={28} color="#C0392B" />
+            </View>
+          )}
+
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.message}>{message}</Text>
+
+          {impactCount !== undefined && impactCount > 0 && (
+            <View style={styles.impactBadge}>
+              <Text style={styles.impactText}>
+                This will affect {impactCount} record{impactCount !== 1 ? 's' : ''}
+              </Text>
+            </View>
+          )}
+
+          <View style={styles.buttons}>
+            <TouchableOpacity
+              style={[styles.btn, styles.cancelBtn]}
+              onPress={onCancel}
+              accessibilityRole="button"
+              accessibilityLabel="Cancel"
+            >
+              <Text style={styles.cancelText}>Cancel</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.btn, isDanger ? styles.dangerBtn : styles.confirmBtn]}
+              onPress={onConfirm}
+              accessibilityRole="button"
+              accessibilityLabel={confirmText}
+            >
+              <Text style={styles.confirmText}>{confirmText}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+  },
+  dialog: {
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 24,
+    width: '100%',
+    maxWidth: 400,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 10,
+  },
+  iconWrap: {
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#2C3E50',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  message: {
+    fontSize: 14,
+    color: '#6B7280',
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: 12,
+  },
+  impactBadge: {
+    backgroundColor: '#FEF3C7',
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    marginBottom: 20,
+    alignItems: 'center',
+  },
+  impactText: {
+    fontSize: 12,
+    color: '#92400E',
+    fontWeight: '500',
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 4,
+  },
+  btn: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: 'center',
+    minHeight: 48,
+    justifyContent: 'center',
+  },
+  cancelBtn: {
+    backgroundColor: '#F3F4F6',
+  },
+  confirmBtn: {
+    backgroundColor: '#1A6B72',
+  },
+  dangerBtn: {
+    backgroundColor: '#C0392B',
+  },
+  cancelText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#374151',
+  },
+  confirmText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: 'white',
+  },
+});

components/ui/DatePicker.tsx

@@ -40,6 +40,10 @@ export function DatePicker({ label, value, onChange }: Props) {
       <TouchableOpacity
         onPress={() => setShow(true)}
         className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
+        accessibilityRole="button"
+        accessibilityLabel={label ? `${label}: ${displayDate}` : displayDate}
+        accessibilityHint="Opens date picker"
+        style={{ minHeight: 48 }}
       >
         <Calendar size={16} color="#1A6B72" />
         <Text className={`ml-2 flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{displayDate}</Text>
@@ -88,7 +92,13 @@ export function DatePicker({ label, value, onChange }: Props) {
               </View>
             </View>
 
-            <TouchableOpacity onPress={handleConfirm} className="bg-primary rounded-xl py-4">
+            <TouchableOpacity
+              onPress={handleConfirm}
+              className="bg-primary rounded-xl py-4"
+              accessibilityRole="button"
+              accessibilityLabel="Confirm date selection"
+              style={{ minHeight: 52 }}
+            >
               <Text className="text-white text-center font-semibold text-base">Confirm</Text>
             </TouchableOpacity>
           </View>

components/ui/EmptyState.tsx

@@ -0,0 +1,107 @@
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  Users, MapPin, Map, Calendar, BookOpen, Settings,
+  Inbox, FileText, Bell, Star, Heart, Search,
+  Package, Archive, List, Clipboard, Tag, Shield,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+// Map of icon name strings to actual components
+const ICON_MAP: Record<string, LucideIcon> = {
+  Users,
+  MapPin,
+  Map,
+  Calendar,
+  BookOpen,
+  Settings,
+  Inbox,
+  FileText,
+  Bell,
+  Star,
+  Heart,
+  Search,
+  Package,
+  Archive,
+  List,
+  Clipboard,
+  Tag,
+  Shield,
+};
+
+interface Props {
+  icon?: string;
+  title: string;
+  message?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+export function EmptyState({ icon, title, message, actionLabel, onAction }: Props) {
+  const IconComponent = icon ? ICON_MAP[icon] ?? Inbox : Inbox;
+
+  return (
+    <View style={styles.container} accessibilityRole="text" accessibilityLabel={title}>
+      <View style={styles.iconWrap}>
+        <IconComponent size={40} color="#9CA3AF" strokeWidth={1.5} />
+      </View>
+      <Text style={styles.title}>{title}</Text>
+      {message ? <Text style={styles.message}>{message}</Text> : null}
+      {actionLabel && onAction ? (
+        <TouchableOpacity
+          style={styles.button}
+          onPress={onAction}
+          accessibilityRole="button"
+          accessibilityLabel={actionLabel}
+        >
+          <Text style={styles.buttonText}>{actionLabel}</Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+    paddingHorizontal: 32,
+  },
+  iconWrap: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#374151',
+    textAlign: 'center',
+    marginBottom: 6,
+  },
+  message: {
+    fontSize: 14,
+    color: '#9CA3AF',
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: 20,
+  },
+  button: {
+    backgroundColor: '#1A6B72',
+    paddingVertical: 12,
+    paddingHorizontal: 28,
+    borderRadius: 12,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+});

components/ui/Input.tsx

@@ -14,6 +14,8 @@ export function Input({ label, error, ...props }: InputProps) {
           error ? 'border-danger' : 'border-gray-200'
         }`}
         placeholderTextColor="#9CA3AF"
+        accessibilityLabel={label}
+        style={{ minHeight: 48 }}
         {...props}
       />
       {error && <Text className="text-danger text-sm mt-1">{error}</Text>}

components/ui/Toast.tsx

@@ -0,0 +1,127 @@
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
+import { View, Text, Animated, TouchableOpacity, StyleSheet } from 'react-native';
+import { CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react-native';
+
+export type ToastType = 'success' | 'warning' | 'error';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastContextValue {
+  showToast: (message: string, type?: ToastType) => void;
+}
+
+const ToastContext = createContext<ToastContextValue>({ showToast: () => {} });
+
+const COLORS: Record<ToastType, string> = {
+  success: '#4CAF7D',
+  warning: '#D4A843',
+  error: '#C0392B',
+};
+
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(-20)).current;
+
+  React.useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacity, { toValue: 1, duration: 250, useNativeDriver: true }),
+      Animated.timing(translateY, { toValue: 0, duration: 250, useNativeDriver: true }),
+    ]).start();
+
+    const timer = setTimeout(() => dismiss(), 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  function dismiss() {
+    Animated.parallel([
+      Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }),
+      Animated.timing(translateY, { toValue: -20, duration: 200, useNativeDriver: true }),
+    ]).start(() => onDismiss(toast.id));
+  }
+
+  const color = COLORS[toast.type];
+  const Icon = toast.type === 'success' ? CheckCircle : toast.type === 'warning' ? AlertTriangle : XCircle;
+
+  return (
+    <Animated.View
+      style={[styles.toast, { backgroundColor: color, opacity, transform: [{ translateY }] }]}
+      accessibilityRole="alert"
+      accessibilityLabel={`${toast.type}: ${toast.message}`}
+    >
+      <Icon size={18} color="white" />
+      <Text style={styles.message} numberOfLines={3}>{toast.message}</Text>
+      <TouchableOpacity
+        onPress={dismiss}
+        accessibilityLabel="Dismiss notification"
+        accessibilityRole="button"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      >
+        <X size={16} color="rgba(255,255,255,0.8)" />
+      </TouchableOpacity>
+    </Animated.View>
+  );
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const counterRef = useRef(0);
+
+  const showToast = useCallback((message: string, type: ToastType = 'success') => {
+    const id = `toast-${++counterRef.current}-${Date.now()}`;
+    setToasts((prev) => [...prev, { id, message, type }]);
+  }, []);
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <View style={styles.container} pointerEvents="box-none">
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} onDismiss={dismissToast} />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  return useContext(ToastContext);
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 90,
+    left: 16,
+    right: 16,
+    gap: 8,
+    zIndex: 9999,
+  },
+  toast: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    gap: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 6,
+  },
+  message: {
+    flex: 1,
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+});

components/visits/LogVisitSheet.tsx

@@ -64,9 +64,16 @@ export function LogVisitSheet({ contactId, contactName, visible, onClose, onSave
       <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={() => { reset(); onClose(); }}><X size={22} color="#2C3E50" /></TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => { reset(); onClose(); }}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
+              <X size={22} color="#2C3E50" />
+            </TouchableOpacity>
             <Text className="text-charcoal font-semibold text-lg">Log Visit</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
           </View>
 
           <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
@@ -78,7 +85,15 @@ export function LogVisitSheet({ contactId, contactName, visible, onClose, onSave
             <Text className="text-charcoal font-medium mb-2">Response</Text>
             <View className="flex-row flex-wrap gap-2 mb-4">
               {RESPONSE_OPTIONS.map((r) => (
-                <TouchableOpacity key={r} onPress={() => setResponse(r === response ? '' : r)} className={`px-3 py-1.5 rounded-full border ${response === r ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                <TouchableOpacity
+                  key={r}
+                  onPress={() => setResponse(r === response ? '' : r)}
+                  className={`px-3 py-1.5 rounded-full border ${response === r ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={r}
+                  accessibilityState={{ selected: response === r }}
+                  style={{ minHeight: 36 }}
+                >
                   <Text className={`text-sm ${response === r ? 'text-white' : 'text-charcoal'}`}>{r}</Text>
                 </TouchableOpacity>
               ))}

components/visits/TopicSelector.tsx

@@ -40,7 +40,14 @@ export function TopicSelector({ value, onChange }: Props) {
   return (
     <View className="mb-4">
       <Text className="text-charcoal font-medium mb-1">Topic</Text>
-      <TouchableOpacity onPress={() => setShow(true)} className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white">
+      <TouchableOpacity
+        onPress={() => setShow(true)}
+        className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
+        accessibilityRole="button"
+        accessibilityLabel={value ? `Selected topic: ${value}` : 'Select topic'}
+        accessibilityHint="Opens topic selector"
+        style={{ minHeight: 48 }}
+      >
         <Text className={`flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{value || 'Select topic...'}</Text>
         <ChevronDown size={16} color="#9CA3AF" />
       </TouchableOpacity>
@@ -48,9 +55,16 @@ export function TopicSelector({ value, onChange }: Props) {
       <Modal visible={show} animationType="slide" presentationStyle="pageSheet">
         <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={() => setShow(false)}><X size={22} color="#2C3E50" /></TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setShow(false)}
+              accessibilityRole="button"
+              accessibilityLabel="Close topic selector"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
+              <X size={22} color="#2C3E50" />
+            </TouchableOpacity>
             <Text className="text-charcoal font-semibold text-lg">Select Topic</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
           </View>
 
           <View className="px-4 pt-3 pb-2">
@@ -66,7 +80,13 @@ export function TopicSelector({ value, onChange }: Props) {
                 onChangeText={setNewTopic}
                 onSubmitEditing={addCustomTopic}
               />
-              <TouchableOpacity onPress={addCustomTopic} className="bg-primary rounded-xl px-3 items-center justify-center">
+              <TouchableOpacity
+                onPress={addCustomTopic}
+                className="bg-primary rounded-xl px-3 items-center justify-center"
+                accessibilityRole="button"
+                accessibilityLabel="Add custom topic"
+                style={{ minWidth: 44, minHeight: 44 }}
+              >
                 <Plus size={18} color="white" />
               </TouchableOpacity>
             </View>
@@ -80,6 +100,10 @@ export function TopicSelector({ value, onChange }: Props) {
               <TouchableOpacity
                 onPress={() => { onChange(item.name); setShow(false); }}
                 className={`bg-white rounded-xl px-4 py-3 flex-row items-center justify-between ${value === item.name ? 'border-2 border-primary' : 'border border-gray-100'}`}
+                accessibilityRole="button"
+                accessibilityLabel={item.name}
+                accessibilityState={{ selected: value === item.name }}
+                style={{ minHeight: 48 }}
               >
                 <Text className="text-charcoal">{item.name}</Text>
                 {item.is_default === 1 && <Text className="text-xs text-gray-400">Default</Text>}

eas.json

@@ -0,0 +1,25 @@
+{
+  "cli": {
+    "version": ">= 12.0.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {
+      "android": {
+        "buildType": "app-bundle"
+      }
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}