feat: Sprint 2 — Visit history, topic selector, date picker, home dashboard with stats and FAB
This commit is contained in:
root
99
components/ui/DatePicker.tsx
Normal file
99
components/ui/DatePicker.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
99
components/visits/LogVisitSheet.tsx
Normal file
99
components/visits/LogVisitSheet.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
93
components/visits/TopicSelector.tsx
Normal file
93
components/visits/TopicSelector.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user