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

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