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

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

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