feat: Sprint 1 — Onboarding screen, user persistence, Contact management (list, add, edit, delete, detail, search, filter)

2026-02-18 14:35:49 +08:00
parent 8f66a4d4ed
commit 5ddfa9722b
10 changed files with 595 additions and 34 deletions
--- a/components/contacts/AddContactSheet.tsx
+++ b/components/contacts/AddContactSheet.tsx
@@ -0,0 +1,106 @@
+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 { useUserStore } from '@/store/useUserStore';
+import { getDatabase } from '@/lib/database';
+import { newContactId } from '@/lib/contactHelpers';
+
+const STATUS_OPTIONS = ['Active', 'Return Visit', 'Bible Study', 'Not Interested', 'Do Not Call'];
+const CATEGORY_OPTIONS = ['Adult', 'Teenager', 'Kid'];
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+export function AddContactSheet({ visible, onClose, onSaved }: Props) {
+  const user = useUserStore((s) => s.user);
+  const [fullName, setFullName] = useState('');
+  const [address, setAddress] = useState('');
+  const [status, setStatus] = useState('Active');
+  const [category, setCategory] = useState('Adult');
+  const [notes, setNotes] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  function reset() {
+    setFullName(''); setAddress(''); setStatus('Active');
+    setCategory('Adult'); setNotes(''); setErrors({});
+  }
+
+  async function handleSave() {
+    const errs: Record<string, string> = {};
+    if (!fullName.trim()) errs.fullName = 'Name is required';
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+
+    setLoading(true);
+    try {
+      const db = await getDatabase();
+      const now = Math.floor(Date.now() / 1000);
+      const id = newContactId();
+      await db.runAsync(
+        `INSERT INTO contacts (id, owner_id, full_name, address, category, status, tags, notes, household_count, created_at, updated_at)
+         VALUES (?, ?, ?, ?, ?, ?, '[]', ?, 1, ?, ?)`,
+        [id, user?.id ?? 'unknown', fullName.trim(), address.trim() || null, category, status, notes.trim() || null, now, now]
+      );
+      reset();
+      onSaved();
+    } catch (e) {
+      console.error('Save contact error:', e);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
+        <View className="flex-1 bg-secondary">
+          {/* Header */}
+          <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">New Contact</Text>
+            <View style={{ width: 22 }} />
+          </View>
+
+          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
+            <Input label="Full Name *" placeholder="e.g. Maria Santos" value={fullName} onChangeText={(t) => { setFullName(t); setErrors((e) => ({ ...e, fullName: '' })); }} error={errors.fullName} />
+            <Input label="Address" placeholder="e.g. 123 Rizal St, Barangay..." value={address} onChangeText={setAddress} />
+
+            {/* Status */}
+            <Text className="text-charcoal font-medium mb-2">Status</Text>
+            <View className="flex-row flex-wrap gap-2 mb-4">
+              {STATUS_OPTIONS.map((s) => (
+                <TouchableOpacity key={s} onPress={() => setStatus(s)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                  <Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            {/* Category */}
+            <Text className="text-charcoal font-medium mb-2">Category</Text>
+            <View className="flex-row gap-2 mb-4">
+              {CATEGORY_OPTIONS.map((c) => (
+                <TouchableOpacity key={c} onPress={() => setCategory(c)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                  <Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            <Input label="Notes" placeholder="Any additional notes..." value={notes} onChangeText={setNotes} multiline numberOfLines={3} />
+            <View className="h-8" />
+          </ScrollView>
+
+          <View className="px-4 py-4 border-t border-gray-200 bg-white">
+            <Button label="Save Contact" onPress={handleSave} loading={loading} />
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}