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

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