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

components/ui/DatePicker.tsx

@@ -0,0 +1,99 @@
+import { View, Text, TouchableOpacity, Modal, Platform } from 'react-native';
+import { useState } from 'react';
+import { Calendar } from 'lucide-react-native';
+
+interface Props {
+  label?: string;
+  value: number | null;
+  onChange: (timestamp: number) => void;
+}
+
+export function DatePicker({ label, value, onChange }: Props) {
+  const [show, setShow] = useState(false);
+
+  // Build a simple date selector (year/month/day dropdowns)
+  const selected = value ? new Date(value * 1000) : new Date();
+  const today = new Date();
+
+  const [year, setYear] = useState(selected.getFullYear());
+  const [month, setMonth] = useState(selected.getMonth());
+  const [day, setDay] = useState(selected.getDate());
+
+  const years = Array.from({ length: 3 }, (_, i) => today.getFullYear() - 1 + i);
+  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+
+  function handleConfirm() {
+    const d = new Date(year, month, day, 12, 0, 0);
+    onChange(Math.floor(d.getTime() / 1000));
+    setShow(false);
+  }
+
+  const displayDate = value
+    ? new Date(value * 1000).toLocaleDateString('en-PH', { year: 'numeric', month: 'short', day: 'numeric' })
+    : 'Select date';
+
+  return (
+    <View className="mb-4">
+      {label && <Text className="text-charcoal font-medium mb-1">{label}</Text>}
+      <TouchableOpacity
+        onPress={() => setShow(true)}
+        className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
+      >
+        <Calendar size={16} color="#1A6B72" />
+        <Text className={`ml-2 flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{displayDate}</Text>
+      </TouchableOpacity>
+
+      <Modal visible={show} transparent animationType="fade">
+        <TouchableOpacity className="flex-1 bg-black/50 justify-end" onPress={() => setShow(false)}>
+          <View className="bg-white rounded-t-3xl p-6">
+            <Text className="text-charcoal font-semibold text-lg mb-4 text-center">Select Date</Text>
+
+            <View className="flex-row justify-center gap-4 mb-6">
+              {/* Month */}
+              <View className="flex-1">
+                <Text className="text-gray-500 text-xs text-center mb-2">Month</Text>
+                <View className="border border-gray-200 rounded-xl overflow-hidden">
+                  {months.map((m, i) => (
+                    <TouchableOpacity key={m} onPress={() => setMonth(i)} className={`py-2 px-3 ${month === i ? 'bg-primary' : ''}`}>
+                      <Text className={`text-center text-sm ${month === i ? 'text-white font-semibold' : 'text-charcoal'}`}>{m}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+
+              {/* Day */}
+              <View style={{ width: 60 }}>
+                <Text className="text-gray-500 text-xs text-center mb-2">Day</Text>
+                <View className="border border-gray-200 rounded-xl overflow-hidden">
+                  {days.filter((_, i) => i < 10 || Math.abs(i - (day - 1)) < 3).map((d) => (
+                    <TouchableOpacity key={d} onPress={() => setDay(d)} className={`py-2 ${day === d ? 'bg-primary' : ''}`}>
+                      <Text className={`text-center text-sm ${day === d ? 'text-white font-semibold' : 'text-charcoal'}`}>{d}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+
+              {/* Year */}
+              <View style={{ width: 70 }}>
+                <Text className="text-gray-500 text-xs text-center mb-2">Year</Text>
+                <View className="border border-gray-200 rounded-xl overflow-hidden">
+                  {years.map((y) => (
+                    <TouchableOpacity key={y} onPress={() => setYear(y)} className={`py-3 ${year === y ? 'bg-primary' : ''}`}>
+                      <Text className={`text-center text-sm ${year === y ? 'text-white font-semibold' : 'text-charcoal'}`}>{y}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+            </View>
+
+            <TouchableOpacity onPress={handleConfirm} className="bg-primary rounded-xl py-4">
+              <Text className="text-white text-center font-semibold text-base">Confirm</Text>
+            </TouchableOpacity>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+}

components/visits/LogVisitSheet.tsx

@@ -0,0 +1,99 @@
+import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
+import { useState } from 'react';
+import { X } from 'lucide-react-native';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { DatePicker } from '@/components/ui/DatePicker';
+import { TopicSelector } from '@/components/visits/TopicSelector';
+import { useUserStore } from '@/store/useUserStore';
+import { getDatabase } from '@/lib/database';
+import { newVisitId } from '@/lib/visitHelpers';
+
+interface Props {
+  contactId: string;
+  contactName: string;
+  visible: boolean;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+const RESPONSE_OPTIONS = ['Interested', 'Not Interested', 'Busy', 'No Answer', 'Do Not Call'];
+
+export function LogVisitSheet({ contactId, contactName, visible, onClose, onSaved }: Props) {
+  const user = useUserStore((s) => s.user);
+  const [visitDate, setVisitDate] = useState<number>(Math.floor(Date.now() / 1000));
+  const [topic, setTopic] = useState('');
+  const [response, setResponse] = useState('');
+  const [remarks, setRemarks] = useState('');
+  const [nextVisitDate, setNextVisitDate] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  function reset() {
+    setVisitDate(Math.floor(Date.now() / 1000));
+    setTopic(''); setResponse(''); setRemarks(''); setNextVisitDate(null);
+  }
+
+  async function handleSave() {
+    setLoading(true);
+    try {
+      const db = await getDatabase();
+      const now = Math.floor(Date.now() / 1000);
+      const id = newVisitId();
+      await db.runAsync(
+        `INSERT INTO visits (id, contact_id, visited_by_name, visited_by_id, visit_date, topic, response, remarks, next_visit_date, created_at, updated_at)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+        [id, contactId, user?.displayName ?? 'Unknown', user?.id ?? 'unknown',
+         visitDate, topic || null, response || null, remarks.trim() || null,
+         nextVisitDate, now, now]
+      );
+      // Update contact status if response is Do Not Call
+      if (response === 'Do Not Call') {
+        await db.runAsync('UPDATE contacts SET status=?, updated_at=? WHERE id=?', ['Do Not Call', now, contactId]);
+      } else if (response === 'Interested') {
+        await db.runAsync('UPDATE contacts SET status=?, updated_at=? WHERE id=?', ['Return Visit', now, contactId]);
+      }
+      reset();
+      onSaved();
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={() => { reset(); onClose(); }}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
+        <View className="flex-1 bg-secondary">
+          <View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
+            <TouchableOpacity onPress={() => { reset(); onClose(); }}><X size={22} color="#2C3E50" /></TouchableOpacity>
+            <Text className="text-charcoal font-semibold text-lg">Log Visit</Text>
+            <View style={{ width: 22 }} />
+          </View>
+
+          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
+            <Text className="text-gray-500 text-sm mb-4">Contact: <Text className="text-charcoal font-medium">{contactName}</Text></Text>
+
+            <DatePicker label="Visit Date" value={visitDate} onChange={setVisitDate} />
+            <TopicSelector value={topic} onChange={setTopic} />
+
+            <Text className="text-charcoal font-medium mb-2">Response</Text>
+            <View className="flex-row flex-wrap gap-2 mb-4">
+              {RESPONSE_OPTIONS.map((r) => (
+                <TouchableOpacity key={r} onPress={() => setResponse(r === response ? '' : r)} className={`px-3 py-1.5 rounded-full border ${response === r ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                  <Text className={`text-sm ${response === r ? 'text-white' : 'text-charcoal'}`}>{r}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            <Input label="Remarks" placeholder="Any notes about this visit..." value={remarks} onChangeText={setRemarks} multiline numberOfLines={3} />
+            <DatePicker label="Schedule Next Visit (optional)" value={nextVisitDate} onChange={setNextVisitDate} />
+            <View className="h-8" />
+          </ScrollView>
+
+          <View className="px-4 py-4 border-t border-gray-200 bg-white">
+            <Button label="Save Visit" onPress={handleSave} loading={loading} />
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}

components/visits/TopicSelector.tsx

@@ -0,0 +1,93 @@
+import { View, Text, TouchableOpacity, Modal, FlatList, TextInput } from 'react-native';
+import { useState, useEffect } from 'react';
+import { ChevronDown, Plus, X, Search } from 'lucide-react-native';
+import { getDatabase } from '@/lib/database';
+import * as Crypto from 'expo-crypto';
+
+interface Props {
+  value: string;
+  onChange: (topic: string) => void;
+}
+
+interface Topic { id: string; name: string; is_default: number; }
+
+export function TopicSelector({ value, onChange }: Props) {
+  const [show, setShow] = useState(false);
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const [search, setSearch] = useState('');
+  const [newTopic, setNewTopic] = useState('');
+
+  async function loadTopics() {
+    const db = await getDatabase();
+    const rows = await db.getAllAsync<Topic>('SELECT * FROM topics ORDER BY is_default DESC, name ASC');
+    setTopics(rows);
+  }
+
+  useEffect(() => { if (show) loadTopics(); }, [show]);
+
+  async function addCustomTopic() {
+    if (!newTopic.trim()) return;
+    const db = await getDatabase();
+    const id = Crypto.randomUUID();
+    const now = Math.floor(Date.now() / 1000);
+    await db.runAsync('INSERT OR IGNORE INTO topics (id, name, is_default, created_at) VALUES (?, ?, 0, ?)', [id, newTopic.trim(), now]);
+    setNewTopic('');
+    await loadTopics();
+  }
+
+  const filtered = topics.filter((t) => t.name.toLowerCase().includes(search.toLowerCase()));
+
+  return (
+    <View className="mb-4">
+      <Text className="text-charcoal font-medium mb-1">Topic</Text>
+      <TouchableOpacity onPress={() => setShow(true)} className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white">
+        <Text className={`flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{value || 'Select topic...'}</Text>
+        <ChevronDown size={16} color="#9CA3AF" />
+      </TouchableOpacity>
+
+      <Modal visible={show} animationType="slide" presentationStyle="pageSheet">
+        <View className="flex-1 bg-secondary">
+          <View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
+            <TouchableOpacity onPress={() => setShow(false)}><X size={22} color="#2C3E50" /></TouchableOpacity>
+            <Text className="text-charcoal font-semibold text-lg">Select Topic</Text>
+            <View style={{ width: 22 }} />
+          </View>
+
+          <View className="px-4 pt-3 pb-2">
+            <View className="flex-row items-center bg-white border border-gray-200 rounded-xl px-3 py-2 mb-3">
+              <Search size={16} color="#9CA3AF" />
+              <TextInput className="flex-1 text-charcoal ml-2" placeholder="Search topics..." value={search} onChangeText={setSearch} />
+            </View>
+            <View className="flex-row gap-2">
+              <TextInput
+                className="flex-1 border border-gray-200 rounded-xl px-3 py-2 bg-white text-charcoal"
+                placeholder="Add custom topic..."
+                value={newTopic}
+                onChangeText={setNewTopic}
+                onSubmitEditing={addCustomTopic}
+              />
+              <TouchableOpacity onPress={addCustomTopic} className="bg-primary rounded-xl px-3 items-center justify-center">
+                <Plus size={18} color="white" />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <FlatList
+            data={filtered}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 40, gap: 8 }}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                onPress={() => { onChange(item.name); setShow(false); }}
+                className={`bg-white rounded-xl px-4 py-3 flex-row items-center justify-between ${value === item.name ? 'border-2 border-primary' : 'border border-gray-100'}`}
+              >
+                <Text className="text-charcoal">{item.name}</Text>
+                {item.is_default === 1 && <Text className="text-xs text-gray-400">Default</Text>}
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+}

lib/visitHelpers.ts

@@ -0,0 +1,40 @@
+import * as Crypto from 'expo-crypto';
+
+export interface Visit {
+  id: string;
+  contactId: string;
+  visitedByName: string;
+  visitedById: string;
+  visitDate: number;
+  topic?: string;
+  response?: string;
+  remarks?: string;
+  nextVisitDate?: number;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export function dbToVisit(row: any): Visit {
+  return {
+    id: row.id,
+    contactId: row.contact_id,
+    visitedByName: row.visited_by_name,
+    visitedById: row.visited_by_id,
+    visitDate: row.visit_date,
+    topic: row.topic,
+    response: row.response,
+    remarks: row.remarks,
+    nextVisitDate: row.next_visit_date,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  };
+}
+
+export function newVisitId(): string {
+  return Crypto.randomUUID();
+}
+
+export function formatDate(timestamp: number): string {
+  const d = new Date(timestamp * 1000);
+  return d.toLocaleDateString('en-PH', { year: 'numeric', month: 'short', day: 'numeric' });
+}