feat: Sprint 3 — Territory management (list, add, edit, delete, detail), GPS tagging, territory tab
This commit is contained in:
root
72
components/territories/AddTerritorySheet.tsx
Normal file
72
components/territories/AddTerritorySheet.tsx
Normal 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
64
components/territories/EditTerritorySheet.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user