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

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>