kibin/territory-log
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
root
2026-02-19 22:05:40 +08:00
parent 6fe6ebef13
commit c8fe67f346
20 changed files with 1416 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/(tabs)/contacts.tsx
View File

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

87
app/(tabs)/index.tsx
View File

@@ -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 { dbToContact } from '@/lib/contactHelpers';
import { EmptyState } from '@/components/ui/EmptyState';
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 = now + 86400 * 3; // next 3 days
const todayEnd = Math.floor(Date.now() / 1000) + 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">
<Text className="text-charcoal font-semibold mb-3">⏰ Visits Due Soon</Text>
{dueVisits.slice(0, 5).map((v) => (
<TouchableOpacity
key={v.contactId}
onPress={() => router.push({ pathname: '/contact/[id]', params: { id: v.contactId } })}
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>
</TouchableOpacity>
))}
{dueVisits.length > 5 && (
<Text className="text-gray-400 text-sm text-center mt-2">+{dueVisits.length - 5} more</Text>
)}
</View>
)}
<View className="bg-white rounded-2xl p-4">
<Text className="text-charcoal font-semibold mb-3">⏰ Visits Due Soon</Text>
{dueVisits.length === 0 ? (
<EmptyState
icon="Calendar"
title="No visits due"
message="You're all caught up! No visits are due in the next 3 days."
/>
) : (
<>
{dueVisits.slice(0, 5).map((v) => (
<TouchableOpacity
key={v.contactId}
onPress={() => router.push({ pathname: '/contact/[id]', params: { id: v.contactId } })}
className="flex-row items-center justify-between py-2 border-b border-gray-50"
accessibilityRole="button"
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>

1093
app/(tabs)/settings.tsx
View File

File diff suppressed because it is too large Load Diff

50
app/(tabs)/territories.tsx
View File

@@ -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>
<TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
<Text className="text-white text-2xl font-bold" accessibilityRole="header">Territories</Text>
<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={() => (
<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>
)}
ListEmptyComponent={() =>
search.length > 0 ? (
<EmptyState
icon="Search"
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(); }} />

41
app/_layout.tsx
View File

@@ -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 }}>
<Stack.Screen name="onboarding" />
<Stack.Screen name="(tabs)" />
<Stack.Screen
name="lock"
options={{
presentation: 'fullScreenModal',
animation: 'fade',
gestureEnabled: false,
}}
/>
<Stack.Screen
name="sync-progress"
options={{
presentation: 'fullScreenModal',
animation: 'slide_from_bottom',
}}
/>
</Stack>
<ToastProvider>
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="onboarding" />
<Stack.Screen name="(tabs)" />
<Stack.Screen
name="lock"
options={{
presentation: 'fullScreenModal',
animation: 'fade',
gestureEnabled: false,
}}
/>
<Stack.Screen
name="sync-progress"
options={{
presentation: 'fullScreenModal',
animation: 'slide_from_bottom',
}}
/>
</Stack>
</ToastProvider>
</GestureHandlerRootView>
);
}

73
app/contact/[id].tsx
View File

@@ -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() {
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();
await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [Math.floor(Date.now() / 1000), id]);
router.back();
}
}
]);
async function handleDeleteConfirmed() {
const db = await getDatabase();
await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [Math.floor(Date.now() / 1000), id]);
showToast(`${contact?.fullName} deleted`, 'success');
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>
);
}

65
app/territory/[id].tsx
View File

@@ -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() {
Alert.alert('Delete Territory', `Delete territory ${territory?.territoryCode}? Contacts will keep their territory code but it won't link to a territory record.`, [
{ text: 'Cancel', style: 'cancel' },
{ text: 'Delete', style: 'destructive', onPress: async () => {
const db = await getDatabase();
await db.runAsync('DELETE FROM territories WHERE id = ?', [id]);
router.back();
}}
]);
async function handleDeleteConfirmed() {
const db = await getDatabase();
await db.runAsync('DELETE FROM territories WHERE id = ?', [id]);
showToast(`Territory ${territory?.territoryCode} deleted`, 'success');
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>
);
}