kibin/territory-log
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Sprint 3 — Territory management (list, add, edit, delete, detail), GPS tagging, territory tab

Browse Source
This commit is contained in:
root
2026-02-18 16:41:47 +08:00
parent 419865e8cf
commit 9bd02b1a17
9 changed files with 425 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/contacts/AddContactSheet.tsx
View File

@@ -1,6 +1,7 @@
import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
import { useState } from 'react';
import { X } from 'lucide-react-native';
import * as Location from 'expo-location';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { useUserStore } from '@/store/useUserStore';
@@ -23,12 +24,15 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
const [status, setStatus] = useState('Active');
const [category, setCategory] = useState('Adult');
const [notes, setNotes] = useState('');
const [territoryCode, setTerritoryCode] = useState('');
const [coords, setCoords] = useState<{ lat: number; lng: number } | null>(null);
const [loading, setLoading] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
function reset() {
setFullName(''); setAddress(''); setStatus('Active');
setCategory('Adult'); setNotes(''); setErrors({});
setTerritoryCode(''); setCoords(null);
}
async function handleSave() {
@@ -42,9 +46,9 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
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]
`INSERT INTO contacts (id, owner_id, full_name, address, category, status, tags, notes, territory_code, latitude, longitude, household_count, created_at, updated_at)
VALUES (?, ?, ?, ?, ?, ?, '[]', ?, ?, ?, ?, 1, ?, ?)`,
[id, user?.id ?? 'unknown', fullName.trim(), address.trim() || null, category, status, notes.trim() || null, territoryCode.trim().toUpperCase() || null, coords?.lat ?? null, coords?.lng ?? null, now, now]
);
reset();
onSaved();
@@ -92,6 +96,25 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
))}
</View>
{/* Territory Code */}
<Input label="Territory Code" placeholder="e.g. T-01" value={territoryCode} onChangeText={setTerritoryCode} autoCapitalize="characters" />
{/* GPS Tag */}
<TouchableOpacity
onPress={async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') { alert('Location permission denied'); return; }
const loc = await Location.getCurrentPositionAsync({});
setCoords({ lat: loc.coords.latitude, lng: loc.coords.longitude });
}}
className={`flex-row items-center border rounded-xl px-4 py-3 mb-4 ${coords ? 'border-primary bg-primary/5' : 'border-gray-200 bg-white'}`}
>
<Text className="text-lg mr-2">📍</Text>
<Text className={coords ? 'text-primary font-medium' : 'text-gray-400'}>
{coords ? `GPS: ${coords.lat.toFixed(5)}, ${coords.lng.toFixed(5)}` : 'Tag GPS Location (optional)'}
</Text>
</TouchableOpacity>
<Input label="Notes" placeholder="Any additional notes..." value={notes} onChangeText={setNotes} multiline numberOfLines={3} />
<View className="h-8" />
</ScrollView>

8
components/contacts/EditContactSheet.tsx
View File

@@ -22,6 +22,7 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
const [status, setStatus] = useState(contact.status);
const [category, setCategory] = useState(contact.category);
const [notes, setNotes] = useState(contact.notes ?? '');
const [territoryCode, setTerritoryCode] = useState(contact.territoryCode ?? '');
const [loading, setLoading] = useState(false);
useEffect(() => {
@@ -30,6 +31,7 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
setStatus(contact.status);
setCategory(contact.category);
setNotes(contact.notes ?? '');
setTerritoryCode(contact.territoryCode ?? '');
}, [contact]);
async function handleSave() {
@@ -39,8 +41,8 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
const db = await getDatabase();
const now = Math.floor(Date.now() / 1000);
await db.runAsync(
'UPDATE contacts SET full_name=?, address=?, status=?, category=?, notes=?, updated_at=? WHERE id=?',
[fullName.trim(), address.trim() || null, status, category, notes.trim() || null, now, contact.id]
'UPDATE contacts SET full_name=?, address=?, status=?, category=?, notes=?, territory_code=?, updated_at=? WHERE id=?',
[fullName.trim(), address.trim() || null, status, category, notes.trim() || null, territoryCode.trim().toUpperCase() || null, now, contact.id]
);
onSaved();
} finally {
@@ -76,6 +78,8 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
</TouchableOpacity>
))}
</View>
{/* Territory Code */}
<Input label="Territory Code" placeholder="e.g. T-01" value={territoryCode} onChangeText={setTerritoryCode} autoCapitalize="characters" />
<Input label="Notes" value={notes} onChangeText={setNotes} multiline numberOfLines={3} />
<View className="h-8" />
</ScrollView>

72
components/territories/AddTerritorySheet.tsx Normal file
View File

@@ -0,0 +1,72 @@
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 { getDatabase } from '@/lib/database';
import { newTerritoryId } from '@/lib/territoryHelpers';
interface Props {
visible: boolean;
onClose: () => void;
onSaved: () => void;
}
export function AddTerritorySheet({ visible, onClose, onSaved }: Props) {
const [code, setCode] = useState('');
const [municipality, setMunicipality] = useState('');
const [barangay, setBarangay] = useState('');
const [area, setArea] = useState('');
const [block, setBlock] = useState('');
const [errors, setErrors] = useState<Record<string, string>>({});
const [loading, setLoading] = useState(false);
function reset() { setCode(''); setMunicipality(''); setBarangay(''); setArea(''); setBlock(''); setErrors({}); }
async function handleSave() {
const errs: Record<string, string> = {};
if (!code.trim()) errs.code = 'Territory code is required';
if (Object.keys(errs).length) { setErrors(errs); return; }
setLoading(true);
try {
const db = await getDatabase();
const now = Math.floor(Date.now() / 1000);
await db.runAsync(
'INSERT INTO territories (id, territory_code, municipality, barangay, area, block, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
[newTerritoryId(), code.trim().toUpperCase(), municipality.trim() || null, barangay.trim() || null, area.trim() || null, block.trim() || null, now, now]
);
reset();
onSaved();
} catch (e: any) {
if (e?.message?.includes('UNIQUE')) setErrors({ code: 'Territory code already exists' });
} 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">New Territory</Text>
<View style={{ width: 22 }} />
</View>
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
<Input label="Territory Code *" placeholder="e.g. T-01, A-12" value={code} onChangeText={(t) => { setCode(t); setErrors((e) => ({ ...e, code: '' })); }} error={errors.code} autoCapitalize="characters" />
<Input label="Municipality" placeholder="e.g. San Pedro" value={municipality} onChangeText={setMunicipality} />
<Input label="Barangay" placeholder="e.g. Barangay 1" value={barangay} onChangeText={setBarangay} />
<Input label="Area" placeholder="e.g. Zone A" value={area} onChangeText={setArea} />
<Input label="Block" placeholder="e.g. Block 3" value={block} onChangeText={setBlock} />
<View className="h-8" />
</ScrollView>
<View className="px-4 py-4 border-t border-gray-200 bg-white">
<Button label="Save Territory" onPress={handleSave} loading={loading} />
</View>
</View>
</KeyboardAvoidingView>
</Modal>
);
}

64
components/territories/EditTerritorySheet.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
import { useState, useEffect } from 'react';
import { X } from 'lucide-react-native';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { getDatabase } from '@/lib/database';
import { Territory } from '@/lib/territoryHelpers';
interface Props { territory: Territory; visible: boolean; onClose: () => void; onSaved: () => void; }
export function EditTerritorySheet({ territory, visible, onClose, onSaved }: Props) {
const [municipality, setMunicipality] = useState(territory.municipality ?? '');
const [barangay, setBarangay] = useState(territory.barangay ?? '');
const [area, setArea] = useState(territory.area ?? '');
const [block, setBlock] = useState(territory.block ?? '');
const [loading, setLoading] = useState(false);
useEffect(() => {
setMunicipality(territory.municipality ?? '');
setBarangay(territory.barangay ?? '');
setArea(territory.area ?? '');
setBlock(territory.block ?? '');
}, [territory]);
async function handleSave() {
setLoading(true);
try {
const db = await getDatabase();
const now = Math.floor(Date.now() / 1000);
await db.runAsync(
'UPDATE territories SET municipality=?, barangay=?, area=?, block=?, updated_at=? WHERE id=?',
[municipality.trim() || null, barangay.trim() || null, area.trim() || null, block.trim() || null, now, territory.id]
);
onSaved();
} 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">
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
<TouchableOpacity onPress={onClose}><X size={22} color="#2C3E50" /></TouchableOpacity>
<Text className="text-charcoal font-semibold text-lg">Edit Territory</Text>
<View style={{ width: 22 }} />
</View>
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
<View className="mb-4 bg-gray-100 rounded-xl px-4 py-3">
<Text className="text-gray-500 text-sm">Territory Code</Text>
<Text className="text-charcoal font-bold text-lg">{territory.territoryCode}</Text>
</View>
<Input label="Municipality" value={municipality} onChangeText={setMunicipality} />
<Input label="Barangay" value={barangay} onChangeText={setBarangay} />
<Input label="Area" value={area} onChangeText={setArea} />
<Input label="Block" value={block} onChangeText={setBlock} />
</ScrollView>
<View className="px-4 py-4 border-t border-gray-200 bg-white">
<Button label="Save Changes" onPress={handleSave} loading={loading} />
</View>
</View>
</KeyboardAvoidingView>
</Modal>
);
}