115 lines
4.9 KiB
TypeScript
115 lines
4.9 KiB
TypeScript
import { View, Text, FlatList, TouchableOpacity, TextInput } from 'react-native';
|
|
import { useState, useCallback } from 'react';
|
|
import { useFocusEffect } from 'expo-router';
|
|
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() {
|
|
const [territories, setTerritories] = useState<Territory[]>([]);
|
|
const [search, setSearch] = useState('');
|
|
const [showAdd, setShowAdd] = useState(false);
|
|
|
|
async function loadTerritories() {
|
|
const db = await getDatabase();
|
|
const rows = await db.getAllAsync<any>('SELECT * FROM territories ORDER BY territory_code ASC');
|
|
setTerritories(rows.map(dbToTerritory));
|
|
}
|
|
|
|
useFocusEffect(useCallback(() => { loadTerritories(); }, []));
|
|
|
|
const filtered = territories.filter((t) =>
|
|
t.territoryCode.toLowerCase().includes(search.toLowerCase()) ||
|
|
(t.barangay?.toLowerCase().includes(search.toLowerCase()) ?? false) ||
|
|
(t.municipality?.toLowerCase().includes(search.toLowerCase()) ?? false)
|
|
);
|
|
|
|
return (
|
|
<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" 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>
|
|
<View className="flex-row items-center bg-white/20 rounded-xl px-3 py-2">
|
|
<Search size={16} color="rgba(255,255,255,0.7)" />
|
|
<TextInput
|
|
className="flex-1 text-white ml-2"
|
|
placeholder="Search territories..."
|
|
placeholderTextColor="rgba(255,255,255,0.6)"
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
accessibilityLabel="Search territories"
|
|
/>
|
|
{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>
|
|
|
|
<FlatList
|
|
data={filtered}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 100, paddingTop: 12, gap: 8 }}
|
|
renderItem={({ item }) => (
|
|
<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>
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="text-charcoal font-semibold">{item.territoryCode}</Text>
|
|
{item.barangay && <Text className="text-gray-500 text-sm">{item.barangay}{item.municipality ? `, ${item.municipality}` : ''}</Text>}
|
|
{item.area && <Text className="text-gray-400 text-xs">Area: {item.area}{item.block ? ` • Block: ${item.block}` : ''}</Text>}
|
|
</View>
|
|
<ChevronRight size={18} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
)}
|
|
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(); }} />
|
|
</View>
|
|
);
|
|
}
|