feat: Sprint 5 - Toast, ConfirmDialog, EmptyStates, Settings, Export/Import, Accessibility (TERLOG-52/53/54/55/56/57/58/59)
This commit is contained in:
@@ -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(); }} />
|
||||
|
||||
Reference in New Issue
Block a user