feat: complete Sprint 3 Expo mobile app scaffold + all screens
This commit is contained in:
Nemo
41
app/(app)/remittances/[id].tsx
Normal file
41
app/(app)/remittances/[id].tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
export default function RemittanceDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['remittance', id],
|
||||
queryFn: () => api.get(`/api/v1/remittances/${id}`).then(r => r.data),
|
||||
});
|
||||
|
||||
if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>;
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
|
||||
<TouchableOpacity onPress={() => router.back()} className="mr-3">
|
||||
<Text className="text-white text-lg">←</Text>
|
||||
</TouchableOpacity>
|
||||
<Text className="text-white text-xl font-bold">Remittance Detail</Text>
|
||||
</View>
|
||||
<ScrollView className="flex-1 px-4 py-4">
|
||||
<View className="bg-white rounded-2xl border border-gray-100 p-4">
|
||||
<Text className="text-3xl font-bold text-gray-900 mb-1">₱{Number(data?.totalAmount ?? 0).toLocaleString()}</Text>
|
||||
<Text className="text-gray-500 text-sm mb-4">{new Date(data?.createdAt).toLocaleDateString()}</Text>
|
||||
<View className="border-t border-gray-100 pt-4">
|
||||
<Text className="text-gray-500 text-xs mb-0.5">Status</Text>
|
||||
<Text className="font-semibold text-gray-900">{data?.status}</Text>
|
||||
</View>
|
||||
{data?.notes && (
|
||||
<View className="border-t border-gray-100 pt-4 mt-4">
|
||||
<Text className="text-gray-500 text-xs mb-0.5">Notes</Text>
|
||||
<Text className="text-gray-900">{data.notes}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
49
app/(app)/remittances/index.tsx
Normal file
49
app/(app)/remittances/index.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { router } from 'expo-router';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = { PENDING: '#D97706', CONFIRMED: '#16A34A', DISPUTED: '#DC2626' };
|
||||
|
||||
export default function RemittancesScreen() {
|
||||
const { data, isLoading, refetch, isRefetching } = useQuery({
|
||||
queryKey: ['remittances'],
|
||||
queryFn: () => api.get('/api/v1/remittances?limit=50').then(r => r.data?.data ?? r.data),
|
||||
});
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-4 bg-primary flex-row justify-between items-center">
|
||||
<Text className="text-white text-xl font-bold">Remittances</Text>
|
||||
<TouchableOpacity className="bg-white/20 rounded-lg px-3 py-1.5" onPress={() => router.push('/(app)/remittances/submit')}>
|
||||
<Text className="text-white text-sm font-semibold">+ Submit</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{isLoading ? (
|
||||
<View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={data ?? []}
|
||||
keyExtractor={(item) => item.id}
|
||||
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
|
||||
contentContainerStyle={{ padding: 16 }}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
className="bg-white rounded-xl p-4 mb-2 border border-gray-100"
|
||||
onPress={() => router.push(`/(app)/remittances/${item.id}`)}
|
||||
>
|
||||
<View className="flex-row justify-between">
|
||||
<Text className="font-semibold text-gray-900">₱{Number(item.totalAmount).toLocaleString()}</Text>
|
||||
<View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${STATUS_COLOR[item.status] ?? '#6B7280'}20` }}>
|
||||
<Text className="text-xs font-medium" style={{ color: STATUS_COLOR[item.status] ?? '#6B7280' }}>{item.status}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className="text-gray-500 text-sm mt-1">{new Date(item.createdAt).toLocaleDateString()}</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={<View className="items-center py-16"><Text className="text-gray-400">No remittances yet</Text></View>}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
57
app/(app)/remittances/submit.tsx
Normal file
57
app/(app)/remittances/submit.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
export default function SubmitRemittanceScreen() {
|
||||
const [amount, setAmount] = useState('');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const submit = async () => {
|
||||
if (!amount || isNaN(Number(amount))) return Alert.alert('Required', 'Enter a valid amount.');
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.post('/api/v1/remittances', { totalAmount: Number(amount), notes });
|
||||
Alert.alert('Submitted', 'Remittance submitted successfully.', [{ text: 'OK', onPress: () => router.back() }]);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e?.response?.data?.message ?? 'Submission failed.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
|
||||
<TouchableOpacity onPress={() => router.back()} className="mr-3">
|
||||
<Text className="text-white text-lg">←</Text>
|
||||
</TouchableOpacity>
|
||||
<Text className="text-white text-xl font-bold">Submit Remittance</Text>
|
||||
</View>
|
||||
<ScrollView className="flex-1 px-4 py-6">
|
||||
<Text className="font-semibold text-gray-700 mb-2">Total Collection (₱)</Text>
|
||||
<TextInput
|
||||
className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base mb-4"
|
||||
placeholder="0.00"
|
||||
value={amount}
|
||||
onChangeText={setAmount}
|
||||
keyboardType="numeric"
|
||||
autoFocus
|
||||
/>
|
||||
<Text className="font-semibold text-gray-700 mb-2">Notes (optional)</Text>
|
||||
<TextInput
|
||||
className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base mb-8"
|
||||
placeholder="Any remarks..."
|
||||
value={notes}
|
||||
onChangeText={setNotes}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
<TouchableOpacity className="bg-primary rounded-xl py-4 items-center" onPress={submit} disabled={loading}>
|
||||
{loading ? <ActivityIndicator color="white" /> : <Text className="text-white font-bold text-base">Submit Remittance</Text>}
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user