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

2026-02-18 16:04:34 +08:00
parent 5ddfa9722b
commit 419865e8cf
6 changed files with 549 additions and 22 deletions
--- a/components/visits/TopicSelector.tsx
+++ b/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>
+  );
+}