feat: Sprint 2 — Visit history, topic selector, date picker, home dashboard with stats and FAB

app/(tabs)/index.tsx

@@ -1,10 +1,178 @@
-import { View, Text } from 'react-native';
+import { View, Text, ScrollView, TouchableOpacity, Modal, FlatList } 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 { useUserStore } from '@/store/useUserStore';
+import { getDatabase } from '@/lib/database';
+import { Contact } from '@/store/useContactStore';
+import { dbToContact } from '@/lib/contactHelpers';
+import { formatDate } from '@/lib/visitHelpers';
+
+interface Stats {
+  total: number;
+  returnVisits: number;
+  bibleStudies: number;
+  visitsDue: number;
+}
+
+interface ReturnVisit {
+  contactId: string;
+  contactName: string;
+  nextVisitDate: number;
+}
 
 export default function HomeScreen() {
+  const user = useUserStore((s) => s.user);
+  const [stats, setStats] = useState<Stats>({ total: 0, returnVisits: 0, bibleStudies: 0, visitsDue: 0 });
+  const [dueVisits, setDueVisits] = useState<ReturnVisit[]>([]);
+  const [showFAB, setShowFAB] = useState(false);
+
+  async function loadDashboard() {
+    const db = await getDatabase();
+    const now = Math.floor(Date.now() / 1000);
+    const todayEnd = now + 86400 * 3; // next 3 days
+
+    const contacts = await db.getAllAsync<any>('SELECT status FROM contacts WHERE deleted_at IS NULL');
+    const total = contacts.length;
+    const returnVisits = contacts.filter((c) => c.status === 'Return Visit').length;
+    const bibleStudies = contacts.filter((c) => c.status === 'Bible Study').length;
+
+    const due = await db.getAllAsync<any>(
+      `SELECT v.contact_id, c.full_name, MAX(v.next_visit_date) as next_visit_date
+       FROM visits v JOIN contacts c ON c.id = v.contact_id
+       WHERE v.next_visit_date IS NOT NULL AND v.next_visit_date <= ? AND c.deleted_at IS NULL
+       GROUP BY v.contact_id ORDER BY next_visit_date ASC`,
+      [todayEnd]
+    );
+
+    setStats({ total, returnVisits, bibleStudies, visitsDue: due.length });
+    setDueVisits(due.map((d) => ({ contactId: d.contact_id, contactName: d.full_name, nextVisitDate: d.next_visit_date })));
+  }
+
+  useFocusEffect(useCallback(() => { loadDashboard(); }, []));
+
+  const greeting = () => {
+    const h = new Date().getHours();
+    if (h < 12) return 'Good morning';
+    if (h < 18) return 'Good afternoon';
+    return 'Good evening';
+  };
+
   return (
-    <View className="flex-1 items-center justify-center bg-secondary">
-      <Text className="text-2xl font-bold text-primary">TerritoryLog</Text>
-      <Text className="text-charcoal mt-2">Dashboard coming in Sprint 2</Text>
+    <View className="flex-1 bg-secondary">
+      {/* Header */}
+      <View className="bg-primary pt-14 pb-6 px-4">
+        <Text className="text-white/70 text-sm">{greeting()},</Text>
+        <Text className="text-white text-2xl font-bold">{user?.displayName ?? 'Friend'}</Text>
+        <Text className="text-white/60 text-sm mt-1">
+          {new Date().toLocaleDateString('en-PH', { weekday: 'long', month: 'long', day: 'numeric' })}
+        </Text>
+      </View>
+
+      <ScrollView className="flex-1 px-4 pt-4" contentContainerStyle={{ gap: 12, paddingBottom: 100 }}>
+        {/* Stats Grid */}
+        <View className="flex-row gap-3">
+          <StatCard label="Total Contacts" value={stats.total} color="bg-primary" icon="👥" />
+          <StatCard label="Return Visits" value={stats.returnVisits} color="bg-blue-500" icon="📅" />
+        </View>
+        <View className="flex-row gap-3">
+          <StatCard label="Bible Studies" value={stats.bibleStudies} color="bg-purple-500" icon="📖" />
+          <StatCard label="Visits Due" value={stats.visitsDue} color={stats.visitsDue > 0 ? "bg-orange-500" : "bg-gray-400"} icon="⏰" />
+        </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>
+        )}
+
+        {/* Quick actions */}
+        <View className="bg-white rounded-2xl p-4">
+          <Text className="text-charcoal font-semibold mb-3">Quick Actions</Text>
+          <QuickAction icon="👥" label="View Contacts" onPress={() => router.push('/(tabs)/contacts')} />
+          <QuickAction icon="🗺️" label="Open Map" onPress={() => router.push('/(tabs)/map')} />
+          <QuickAction icon="⚙️" label="Settings" onPress={() => router.push('/(tabs)/settings')} />
+        </View>
+      </ScrollView>
+
+      {/* FAB */}
+      <TouchableOpacity
+        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 }}
+      >
+        <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)}>
+          <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
+              icon="👤"
+              label="Add Contact"
+              sub="Record a new person"
+              onPress={() => {
+                setShowFAB(false);
+                router.push({ pathname: '/(tabs)/contacts', params: { openAdd: '1' } });
+              }}
+            />
+            <FABAction
+              icon="📍"
+              label="Log Visit"
+              sub="Record a visit to a contact"
+              onPress={() => { setShowFAB(false); router.push('/(tabs)/contacts'); }}
+            />
+          </View>
+        </TouchableOpacity>
+      </Modal>
     </View>
   );
 }
+
+function StatCard({ label, value, color, icon }: { label: string; value: number; color: string; icon: string }) {
+  return (
+    <View className={`flex-1 ${color} rounded-2xl p-4`}>
+      <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>
+    </View>
+  );
+}
+
+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">
+      <Text className="text-2xl mr-3">{icon}</Text>
+      <Text className="flex-1 text-charcoal font-medium">{label}</Text>
+      <ChevronRight size={16} color="#9CA3AF" />
+    </TouchableOpacity>
+  );
+}
+
+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">
+      <Text className="text-3xl mr-4">{icon}</Text>
+      <View>
+        <Text className="text-charcoal font-semibold">{label}</Text>
+        <Text className="text-gray-400 text-sm">{sub}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}

app/contact/[id].tsx

@@ -1,12 +1,13 @@
 import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
-import { useLocalSearchParams, router } from 'expo-router';
+import { useLocalSearchParams, router, useFocusEffect } from 'expo-router';
 import { useState, useCallback } from 'react';
-import { useFocusEffect } from 'expo-router';
-import { ArrowLeft, Edit2, Trash2, MapPin, Phone } from 'lucide-react-native';
+import { ArrowLeft, Edit2, Trash2, MapPin } from 'lucide-react-native';
 import { getDatabase } from '@/lib/database';
 import { dbToContact } from '@/lib/contactHelpers';
 import { Contact } from '@/store/useContactStore';
 import { EditContactSheet } from '@/components/contacts/EditContactSheet';
+import { LogVisitSheet } from '@/components/visits/LogVisitSheet';
+import { Visit, dbToVisit, formatDate } from '@/lib/visitHelpers';
 
 const statusColors: Record<string, string> = {
   'Active': '#4CAF7D',
@@ -19,15 +20,19 @@ const statusColors: Record<string, string> = {
 export default function ContactDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const [contact, setContact] = useState<Contact | null>(null);
+  const [visits, setVisits] = useState<Visit[]>([]);
   const [showEdit, setShowEdit] = useState(false);
+  const [showLogVisit, setShowLogVisit] = useState(false);
 
-  async function loadContact() {
+  async function loadData() {
     const db = await getDatabase();
     const row = await db.getFirstAsync<any>('SELECT * FROM contacts WHERE id = ?', [id]);
     if (row) setContact(dbToContact(row));
+    const visitRows = await db.getAllAsync<any>('SELECT * FROM visits WHERE contact_id = ? ORDER BY visit_date DESC', [id]);
+    setVisits(visitRows.map(dbToVisit));
   }
 
-  useFocusEffect(useCallback(() => { loadContact(); }, [id]));
+  useFocusEffect(useCallback(() => { loadData(); }, [id]));
 
   async function handleDelete() {
     Alert.alert('Delete Contact', `Are you sure you want to delete ${contact?.fullName}?`, [
@@ -36,8 +41,7 @@ export default function ContactDetailScreen() {
         text: 'Delete', style: 'destructive',
         onPress: async () => {
           const db = await getDatabase();
-          const now = Math.floor(Date.now() / 1000);
-          await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [now, id]);
+          await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [Math.floor(Date.now() / 1000), id]);
           router.back();
         }
       }
@@ -50,7 +54,6 @@ export default function ContactDetailScreen() {
 
   return (
     <View className="flex-1 bg-secondary">
-      {/* Header */}
       <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">
@@ -79,12 +82,11 @@ export default function ContactDetailScreen() {
       </View>
 
       <ScrollView className="flex-1 px-4 pt-4" contentContainerStyle={{ gap: 12, paddingBottom: 40 }}>
-        {/* Info Card */}
         <View className="bg-white rounded-2xl p-4">
           <Text className="text-charcoal font-semibold mb-3">Information</Text>
-          <Row label="Category" value={contact.category} />
-          {contact.address && <Row label="Address" value={contact.address} icon={<MapPin size={14} color="#9CA3AF" />} />}
-          {contact.territoryCode && <Row label="Territory" value={contact.territoryCode} />}
+          <InfoRow label="Category" value={contact.category} />
+          {contact.address && <InfoRow label="Address" value={contact.address} />}
+          {contact.territoryCode && <InfoRow label="Territory" value={contact.territoryCode} />}
         </View>
 
         {contact.notes && (
@@ -93,21 +95,47 @@ export default function ContactDetailScreen() {
             <Text className="text-gray-600">{contact.notes}</Text>
           </View>
         )}
+
+        <View className="bg-white rounded-2xl p-4">
+          <View className="flex-row justify-between items-center mb-3">
+            <Text className="text-charcoal font-semibold">Visit History ({visits.length})</Text>
+            <TouchableOpacity onPress={() => setShowLogVisit(true)} className="bg-primary rounded-lg px-3 py-1.5">
+              <Text className="text-white text-sm font-medium">+ Log Visit</Text>
+            </TouchableOpacity>
+          </View>
+          {visits.length === 0 ? (
+            <Text className="text-gray-400 text-sm">No visits recorded yet</Text>
+          ) : (
+            visits.map((v) => (
+              <View key={v.id} className="border-l-2 border-primary pl-3 mb-3 last:mb-0">
+                <Text className="text-charcoal font-medium text-sm">{formatDate(v.visitDate)}</Text>
+                {v.topic && <Text className="text-gray-500 text-sm mt-0.5">📖 {v.topic}</Text>}
+                {v.response && <Text className="text-gray-500 text-sm mt-0.5">💬 {v.response}</Text>}
+                {v.remarks && <Text className="text-gray-400 text-xs mt-0.5">{v.remarks}</Text>}
+                {v.nextVisitDate && <Text className="text-primary text-xs mt-0.5 font-medium">Next: {formatDate(v.nextVisitDate)}</Text>}
+              </View>
+            ))
+          )}
+        </View>
       </ScrollView>
 
-      <EditContactSheet contact={contact} visible={showEdit} onClose={() => setShowEdit(false)} onSaved={() => { setShowEdit(false); loadContact(); }} />
+      <EditContactSheet contact={contact} visible={showEdit} onClose={() => setShowEdit(false)} onSaved={() => { setShowEdit(false); loadData(); }} />
+      <LogVisitSheet
+        contactId={contact.id}
+        contactName={contact.fullName}
+        visible={showLogVisit}
+        onClose={() => setShowLogVisit(false)}
+        onSaved={() => { setShowLogVisit(false); loadData(); }}
+      />
     </View>
   );
 }
 
-function Row({ label, value, icon }: { label: string; value: string; icon?: React.ReactNode }) {
+function InfoRow({ label, value }: { label: string; value: string }) {
   return (
     <View className="flex-row justify-between items-start py-2 border-b border-gray-50">
       <Text className="text-gray-500 text-sm">{label}</Text>
-      <View className="flex-row items-center gap-1 flex-1 justify-end">
-        {icon}
-        <Text className="text-charcoal text-sm font-medium text-right flex-1" numberOfLines={2}>{value}</Text>
-      </View>
+      <Text className="text-charcoal text-sm font-medium text-right flex-1 ml-4" numberOfLines={2}>{value}</Text>
     </View>
   );
 }